零、什么是Echarts
Echarts是谷歌的JavaScript开源库，主要用于实现网页端的图表操作。简单说就是，如果你需要在软件或网页内嵌一个交互式的折线图/饼图/柱状图，用Echarts就对了。
Echarts功能强大，具体参考官方文档：echarts官方API
这么好用的官方库，网上应该有很多教程吧？对，也不对。网上教程虽多，我上手这个库的时候还是走了不少弯路，遇到的问题很多，比如
1. 为什么已经执行legendSelect，依旧没有添加新曲线？
2. 为什么单击图例后图例变灰色表示取消选择，曲线没有同步取消选择？
...
这里先讲一下怎么调用echarts.js，再讲一下怎么解决图例与曲线不对应的问题。先上干货。
一、调用Echarts.js的方法
这里用比较简单的方法，就是下载echarts.min.js库。再在html文件中引用相应script
二、 怎样实现图例功能
首先在html文件中设置相应的代码块，比如这样
<body onresize="windowResize()"> <header> <ul></ul> </header> <footer id="legend"> <div id="search"></div> <ul></ul> <div class="control-tools"> <a onclick="onLegendAllClick(true)">全选</a> <a onclick="onLegendAllClick(false)">反选</a> </div> </footer> <article id="chart"></article> </body> </html>
在上方代码中，我们定义了id为legend（汉文翻译为图例）的footer模块，后续就会在这个位置插入图例。 同理，id为search（搜索）的div模块后续会插入搜索框，id为chart的article模块会插入图表。注意，HTML文件只需要给出结构框架，确定不同组件的位置，至于组件的具体内容，是JavaScript代码要填充的，而组件的格式，是CSS代码确定的。
这也就是我们常提倡的模块化编程原理。不同的文件负责不同的功能，方便代码维护。
function updateLengend() { // 图例 数据点列表 let legend = $("footer ul"); legend.empty(); let i = 0; for (let item of selectedSeries) { if (!item) continue; let $radio = $("<li/>"); $radio.attr("style", `color: ${option.color[i % colorList.length]}`); // 突出显示 let $icon = $("<a/>"); $icon.html(`<svg width="30" height="20" xmlns="http://www.w3.org/2000/svg"> <g> <title>background</title> <rect fill="none"/> </g> <g> <path id="s2" stroke-width="2" stroke="${option.color[i % colorList.length]}" fill="#000" d="m2.7568,9.6l25,0"/> <path id="s1" stroke-width="2" stroke="${option.color[i % colorList.length]}" fill="#fff" d="m20.8568,9.6a5.6,5.6 0 1 1 0,-0.0006"/> </g> </svg>`); $icon.attr("onclick", `onLegendClick('${item}', false, this)`); // 放大倍数 //$button = $("<button/>"); //$button.attr("value", "1"); //$button.attr("onclick", `onZoomClick(this)`); // 数据点名称 let $label = $("<label></label>"); $label.text(item); $label.attr("id", item); $label.attr("onclick", `onLegendClick('${item}', true, this)`); $radio.append($icon); //$radio.append($button); $radio.append($label); legend.append($radio); //alert("one Completed"); if (displaySeries.indexOf(item) == -1) { chart.dispatchAction({ type: "legendUnSelect", name: item, }) if (!$label.hasClass("dismiss")) { $label.addClass("dismiss"); } } else { chart.dispatchAction({ type: "legendSelect", name: item, }); if ($label.hasClass("dismiss")) { $label.removeClass("dismiss"); } } i++; } }
这个JavaScript代码里，我们把初始化图例的操作封装为一个函数。首先是提出HTML的footer块，命名为legend，再用clear方法清空legend的内容，然后在for循环中依次加入selectedSeries列表的内容。selectedSeries是全部图例，而displaySeries是选中的图例。如果某个系列的曲线是选中的图例，就执行chart.dispatchAction({type:"legendSelect",name:item})操作，即选中该图例。否则，取消选择该图例。
本人原先的代码没有在图例初始化就执行dispatchAction,导致后续的图例选择与曲线添加不同步。加入这一步之后，实现了同步。
