echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

  这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍。该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档

1、legend设置单选

legend: {
data:['db block gets', 'consistent gets'],
selectedMode: 'single',
},

  修改图例legend颜色,定义color数组,对应图例即可

color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'],  //手动设置每个图例的颜色
legend: { //图例组件
right:, //图例组件离右边的距离
orient : 'vertical', //布局 纵向布局
width:, //图行例组件的宽度,默认自适应
x : 'right', //图例显示在右边
itemWidth:, //图例标记的图形宽度
itemHeight:, //图例标记的图形高度
data:['30%','10%','15%','20%','25%'],
textStyle:{ //图例文字的样式
color:'#333',
fontSize:
}
},

2、添加缩放滚动

  加上dataZoom配置

dataZoom: [
{
show: true,
realtime: true,
start: ,
end:
},
{
type: 'inside',
realtime: true,
start: ,
end:
}
],

  需要配合grid配置给dataZoom留出底部位置

  也可以将show设置为false就不会显示那个滚动图,但是依然有滚动效果

grid: {
top: ,
bottom:
},

3、视图里面添加多个线条:在series数组里面继续加对象即可

series: [
{
name:'db block gets',
type:'line',
xAxisIndex: ,//加这个dataZoom对该对象不起作用,需要去掉这个属性
smooth: true,//代表平滑曲线,如需要折线,则去掉即可
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'consistent gets',
type:'line',
smooth: true,
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
}
]

4、视图里面加阴影提示:tooltip,提示框组件

  show,默认true,是否显示提示框组件

  trigger,触发类型,item、axis、none,当为none的时候代表什么都不触发,就不会显示提示框

  axisPointer,坐标轴指示器配置项,实际上坐标轴指示器的全部功能,都可以通过轴上的 axisPointer 配置项完成

  label属性加formatter函数,可以格式化提示框显示内容

tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label:{
formatter: function (params) {
return '快照时间:' + params.value;
}
}
}
},

5、雷达图添加阴影提示

series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
value: this.radarValues,
name: '指标值'
}
]
}
]

6、一般echarts里面配色都是默认的,如果需要修改,就加上  color:[]配置项  ,这里也推荐一个取色器,很好用Pipette

7、stackedBar图形配置

{
name: '表使用比例',
type: 'bar',
stack: '总量',//代表叠加的形态,如果去掉这个,该条就会单独出来
label: { //就是每条目上会显示数字,去掉label属性就不显示
normal: {
show: true,
position: 'insideRight'
}
},
data: [, , , , ]
},

8、legrend的data数组里面的内容必须与series配置里面对象的name完全一样,否则会不显示。所以当你legrend不显示的时候,一定是这里没对应上,修改即可。

9、echarts的图表自适应,resize问题

  echarts官网的实例都具有响应式功能,确实不是单纯的宽度改变,是每次调整后图表是重新绘制。猜想echart源码里应该有resize这个API,打开调试器,打开echart源码,Ctrl+F,果然找到了

echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

  再看官方文档

echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

  echart图表本身是提供了一个resize的函数的。

  于是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。

echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

  用window.onresize = myChart.resize; 可以完成自适应,就是把window的onresize事件赋值为echart的resize事件

  当然这是单个图表的情况,要是多个图表,发现会不起作用。

  多个图表可以使用addEventListener

window.addEventListener("resize", () => {
this.myChart.resize();
this.myChart2.resize();
this.myChart3.resize();
});

在vue组件上就可以直接单个组件添加进事件列表

myLogLine.setOption(option);
window.addEventListener("resize", () => { myLogLine.resize();}); myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});
上一篇:git学习---去除版本控制


下一篇:Git学习三