前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >质量看板开发实践(五):给echarts图例添加数值

质量看板开发实践(五):给echarts图例添加数值

原创
作者头像
冰霜
发布2022-05-01 16:22:58
1.8K0
发布2022-05-01 16:22:58
举报

echarts默认的图例只显示数据的name,不会显示value,如下饼图的图例

我希望把每个图例对应的value显示出来,如下

echarts中有个配置参数可以实现这个功能:formatter

官方文档:https://echarts.apache.org/zh/option.html#legend.formatter

如果给饼图图例添加这个功能,代码逻辑如下

代码语言:javascript
复制
legend: {
          type: 'scroll',  //设置图例可滚动
          // orient: 'vertical',
          top: 'bottom',
          formatter: function (name) {  //图例后添加数值
            let data = option.series[0].data;
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                tarValue = data[i].value;
              }
            }
            return name + ": " + tarValue;
          }
        },

注释:

1、let data = option.series[0].data; 取series中的数据 2、循环遍历 data ,因为data中每个元素都是一个键值对,所以用每组键值对的name来和图例name比较,如果相等,则获取到对应的值 3、最后把图例name和value拼接返回出去

如果给折线图图例添加这个功能,代码逻辑如下

代码语言:javascript
复制
legend: {
          top: '8%',
          left: '10%',
          formatter: function (name) {  
            let data = option.series[0].data;  // 第1组数据
            let data2 = option.series[1].data;  // 第2组数据

            let name1 = option.series[0].name;  // 第1组数据的name
            let name2 = option.series[1].name;  // 第2组数据的name

            let tarValue;  // 定义一个最终结果变量
            let total1 = 0;  // 定义一个变量,接收第1组数据的和
            let total2 = 0;  // 定义一个变量,接收第2组数据的和

            for (let i = 0; i < data.length; i++) {
              total1 += data[i];
              total2 += data2[i];

              if (name === name1) {
                // 如果模版变量name=name1,就把第1组数据的和total1赋给tarValue
                tarValue = total1;
              }
              else {
                // 如果模版变量name=name2,就把第1组数据的和total2赋给tarValue
                tarValue = total2;
              }

            }
            return name + ": " + tarValue;
          }
        },

因为折线图我有2组数据,所以需要获取2组数据中的值并赋给对应图例,详情见代码中的注释

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档