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