echart实现图例legend绑定数据
2019-12-28 本文已影响0人
你好赵大宝
echart为我们提供了简单的实现图例的接口,同时还可以进行许多动画操作,但是因为echart将图例封装的太好,导致我们不能进行想要的许多操作,比如数据绑定,实现:
图例:数据
原因
图例legend传入series的name,不能传入其他参数。
多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。
解决
将要显示的图例名称与绑定的数据拼接成一个字符串,用数组形式显示在series.name处。
var stationData = [];
//省略为stationData传值代码
var legendData = [];
for (var i = 0; i < this.stationData.length; i++) {
var station = {
name:this.stationData[i].name +
" " +
this.stationData[i].coords.length,
icon: this.stationData[i].symbol
};
legendData.push(station);
}
//省略其他代码
for(var i = 0; i < legendData.length; i++){
series.push({
type: "lines",
name: legendData[i].name
//省略其他代码
});
}
如上可以实现多个图例与数据绑定显示的效果。
样例
图例一 5个
图例二 6个
图例三 20个