echart多样实现

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个

上一篇下一篇

猜你喜欢

热点阅读