Echarts插件使用總結

做項目一直在使用echarts插件進行畫圖，怎麼說呢，一直在用，但是下次再用的時候還是要翻看筆記或者官網。下面總結一下用echarts走的彎路。

1.

首先是當一個頁面有兩個echarts圖時，怎麼做到圖形隨着窗口大小而變化：

chart1.resize();
chart2.resize();

上面這麼寫是不行的，因爲你會發現只會有一個圖形變化。下面的纔是正確的打開方式：

window.onresize = function () {
                    chart1.resize();
                    chart2.resize();
                }

好像window.addEventListener("resize", function(){}); 這個方法也是可以的，可以自己試下。

2.

要善於利用formatter: function (params) {} 裏的參數params，console.log(params) 輸出看一下params裏的內容，也許能幫你解決很多問題。

比如 tooltip 裏的formatter，修改鼠標放在圖形上顯示的那個框框的數據，基本上都是在這裏改的，具體的就不舉例子了，官網的例子也有。

3.

這個就要提一下markPoint了，看下面這個例子，其實第二條裏面的tooltip裏的也是可以修改markPoint的，具體可以自己嘗試一下。

series : [
                {
                    name:'用電量',
                    type:'bar',
                    data:[], //待填充
                    markPoint: { // 默認的mark圖標是水滴狀的
                        symbolSize: 52,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: function (param, ticket, callback) { // 這些都是對數據的處理
                                        var str;
                                        var val = (param.value * 100).toFixed(0);
                                        if (param.value >= 0) {
                                            str = "+"+val+"%";
                                        } else if (param.value < 0) {
                                            str = val+"%";
                                        } else {
                                            str = "-%";
                                        }
                                        return str;
                                    }
                                }
                            }
                        },
                        data: [] // js填充，這個填充的就是markPoint上顯示的數據了
                    }
                },
                {
                    name:'電費',
                    type:'bar',
                    data:[]//待填充
                }
            ]

4.

然後是dataZoom，其實沒什麼講的，主要是在設置的時候小心一點就好了。

option.dataZoom[0].start=0; // 注意dataZoom後面‘[0]’千萬不要忘記了
option.dataZoom[0].end=((5/param)*100).toFixed(0); // end我設置了一個動態的

5.

最後就是option裏面的參數可以自己動態設置，按照上面第四條的格式就可以了，最後在chart.setOption(option)就可以了。

6.
legeng表示圖標的圖例。

如上圖所示，每個圖標最多隻有一個圖例，所以設置legend屬性時，不需要添加數組角標：

elecOption.legend.selected = {
                        '降水量': false,
                        '最低氣溫': false
                    }