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
                    }