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