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

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

一、legend设置单选

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

　　修改图例legend颜色，定义color数组，对应图例便可

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

二、添加缩放滚动

　　加上dataZoom配置

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

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

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

grid: { top: 30, bottom: 60 },

三、视图里面添加多个线条：在series数组里面继续加对象便可

series: [ { name:'db block gets', type:'line', xAxisIndex: 1,//加这个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] } ]

四、视图里面加阴影提示：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; } } } },

五、雷达图添加阴影提示

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

六、通常echarts里面配色都是默认的，若是须要修改，就加上  color:[]配置项  ，这里也推荐一个取色器，很好用Pipette

七、stackedBar图形配置

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

八、legrend的data数组里面的内容必须与series配置里面对象的name彻底同样，不然会不显示。因此当你legrend不显示的时候，必定是这里没对应上，修改便可。

九、echarts的图表自适应，resize问题

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

　　再看官方文档

　　echart图表自己是提供了一个resize的函数的。

　　因而当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

　　用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();});