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


==============================================