看个效果图先
首先在需要插入图例的HTML中嵌入 "main" style="height:400px">
接着引入echarts.js
最后在加入图例生成JS -------- 请在文章最底部查看
原版的图例生成JS可以去echarts官网找，上面这段JS是我改动后的。原版图例生成的JS中K线数据是固定写死的，这肯定是不行，而且只有一种K线（5分钟K）。
实际项目中有5分钟K，15分钟K,30分钟K,60分钟K以及日K。所以改动第一步肯定是要去后端控制器提取数据，当然返回的数据格式肯定要和官网中给出的数据格式一样的。在控制器
中我返回的JSON格式的数据，这在JS中肯定是不能直接拿来用的，需要转换成二维数组。function json_array(data){}就是把对应的JSON对象转换为二维数组，这样
就可以用来替换原来的固定数据啦。
接下来第二个问题就是一下子显示5种K线，图例肯定会非常乱。所以我默认就只显示5分钟K，在此设置
legend: { //图例控件，点击图例控制哪些系列不现实
selected: {
'k_5':true,
'k_15':false,
'k_30':false,
'k_60':false,
'k_day':false,
},
data: ['k_5','k_15','k_30','k_60','k_day', 'MA5', 'MA10', 'MA20', 'MA30']
},
点击对应的K线小图标肯定要显示对应的K线啦，这里需要用到echarts的图例交互事件，本人在项目中用到的是 legendselectchanged 事件
对应JS在此
myChart.on('legendselectchanged', function(obj) {
var selected_1 = {};
var selected = obj.selected;
var legend = obj.name;
if(selected[legend]){
for(var key in selected){
if(key == legend){
selected_1[key] = true;
}else{
selected_1[key] = false;
selected_1['MA5'] = true;
selected_1['MA10'] = true;
selected_1['MA20'] = true;
selected_1['MA30'] = true;
}
}
option.legend.selected = selected_1;
if(legend == 'k_5'){
data_common = data0;
}
if(legend == 'k_15'){
data_common = data_1;
}
if(legend == 'k_30'){
data_common = data_2;
}
if(legend == 'k_60'){
data_common = data_3;
}
if(legend == 'k_day'){
data_common = data_4;
}
myChart.setOption(option);
}
});
这段JS的目的是将点击对应K线小图标高亮显示或灰暗显示，同时其他未被点击小图标灰暗显示。同时填充对应K线数据。
echarts中的图例交互事件有很多，例如：
1） legendselectchanged : 切换图例选中状态后的事件 (注：图例组件用户切换图例开关会触发该事件,不管你有没有选择，点击了就触发)
2）legendselected：例组件用legendSelect 图例选中后的事件，即点击显示该图例时，触发就生效。
3）legendunselected： legendUnSelect 图例取消选中后的事件。
4）datazoom：数据区域缩放后的事件。缩放视觉映射组件。
5）datarangeselected：selectDataRange 视觉映射组件中，range 值改变后触发的事件。
6）timelinechanged：timelineChange 时间轴中的时间点改变后的事件。
7）timelineplaychanged：timelinePlayChange 时间轴中播放状态的切换事件。
8）restore： restore 重置 option 事件。
9）dataviewchanged：工具栏中数据视图的修改事件。
10）magictypechanged：工具栏中动态类型切换的切换事件。
11）geoselectchanged：geo 中地图区域切换选中状态的事件（用户点击选中会触发该事件。）。
12）geoselected：geo 中地图区域选中后的事件（使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 geoselectchanged））。
13）geounselected：geo 中地图区域取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 geoselectchanged）。
14）pieselectchanged：series-pie 中饼图扇形切换选中状态的事件，用户点击选中会触发该事件。
15）pieselected：series-pie 中饼图扇形选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 pieselectchanged）。
16）pieunselected：series-pie 中饼图扇形取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 pieselectchanged）。
17）mapselectchanged： series-map 中地图区域切换选中状态的事件，用户点击选中会触发该事件。
18）mapselected：series-map 中地图区域选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 mapselectchanged）。
19）mapunselected：series-map 中地图区域取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 mapselectchanged）。
20）axisareaselected：平行坐标轴 (Parallel) 范围选取事件，
感兴趣的老铁们可以去研究研究。
文末插入改动之后的图例生成JS