美文网首页echart多样实现
echart实现图例legend绑定数据

echart实现图例legend绑定数据

作者: 你好赵大宝 | 来源:发表于2019-12-28 14:35 被阅读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个

    相关文章

      网友评论

        本文标题:echart实现图例legend绑定数据

        本文链接:https://www.haomeiwen.com/subject/lxjsoctx.html