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                    }