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:68,  //图例组件离右边的距离
    orient : 'vertical',  //布局  纵向布局
    width:40,      //图行例组件的宽度,默认自适应
    x : 'right',   //图例显示在右边
    itemWidth:10,  //图例标记的图形宽度
    itemHeight:10, //图例标记的图形高度
    data:['30%','10%','15%','20%','25%'],
    textStyle:{    //图例文字的样式
        color:'#333',
        fontSize:12
    }
},

2、添加缩放滚动

　　加上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
},

3、视图里面添加多个线条：在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]
    }
]

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: [20, 2, 1, 34, 20]
},

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

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