echarts 堆叠柱状图 点击图例label动态显示总和

1. 问题呈现

场景描述:上图是一个实现的堆叠柱状图,测试发现点击图例时,存在以下问题:

1)因为label放在最后一类用formatter函数处理作为数据总和展示,所以当取消最后一类对应的图例时,它的label也会一起隐藏,页面上数据总和消失。

css 复制代码
series: [
  {...},
  {...},
  {
    type: 'bar',
    data: lowCount,
    name: '低危',
    stack: '总和',
    itemStyle: { color: '#91cc75' },
    label: {
      show: true,
      position: 'top',
      color: '#57606f',
      fontWeight: 'bold',
      formatter: function(params) {
        return dataValueList[params.dataIndex]; // dataValueList 固定的每列总和数组
      }
    }
  }
]

2)因为数据总和不是动态计算的,所以当取消有数据的图例时,左侧刻度轴和柱状图发生变化,但页面上展示的是每列全部数据总和,而不是剩余图例的列数据总和。

2. 实现动态显示

思路 :绑定echats的图例的legendselectchanged事件,每次图例change都重新计算数据的总和。

kotlin 复制代码
const option = { ...... };

// 获取配置中的series数组
var series = option["series"];
// 第一次使用
var fun = function (params) {
  var datavalue = 0;
  for (var i = 0; i < series.length; i++) { 
    datavalue += series[i].data[params.dataIndex];
  }
  // 返回总数
  return datavalue; 
}
// 赋值最后一项的formatter
series[series.length - 1]["label"]["formatter"] = fun;

myChart.setOption(option);

除了动态计算每一列数据总和,还需要注意其它更改。因为上述问题中取消最后一类图例时导致label消失,所以初始需要给每一类对象都加上label,控制label的显隐来在效果上实现需求。

1)series数组中的每一项都要添加label。默认给最上层的数据label的show为true,其他为false(如果没有初始值,后面点击图例时label更新不上)。

2)通过legendselectchanged事件,可以监听到图例变化时已勾选的图例list,利用已勾选的图例,判断哪一类数据需要展示label,哪些不展示label。

3)legendselectchanged事件处理数据之后,重新setOption,更新视图。

ini 复制代码
// 监听图例点击事件
myChart.on('legendselectchanged', function(obj) {
  // 获取点击的对象
  console.log('obj.selected', obj);
  var selObj = obj.selected;
  var selArr = [];
  for (var key in selObj) {
    if (selObj[key]) {
      for (var i = 0, l = series.length; i < l; i++) {
        var changename = series[i]['name'];
        if (changename == key) {
          selArr.push(i);
        }
      }
    }
  }
  console.log('selObj----selArr', selObj, selArr);
  
  // 动态计算剩余图例的列数据总和
  var fun = function(params) {
    var datavalue = 0;
    // 与name数组对比,相等则相加
    for (let i = 0; i < selArr.length; i++) {
      for (let j = 0; j < series.length; j++) {
        if (selArr[i] == j) {
          datavalue += series[j].data[params.dataIndex];
        }
      }
    }
    return datavalue;
  };

  // 先把每一项的label置为 fales
  for (let j = 0; j < series.length; j++) {
    series[j]['label']['show'] = false;
  }
  // 动态选取最上层那一项展示label,其它不展示,解决只有最后一项有label取消了label消失问题
  for (let k = series.length - 1; k >= 0; k--) {
    var name = series[k]['name'];
    console.log('----name', name);
    if (obj['selected'][name]) {
      series[k]['label']['formatter'] = fun;
      series[k]['label']['show'] = true;
      break;
    }
  }
  // this.$nextTick(() => {
  //   myChart.setOption(option);
  // });
  myChart.setOption(option);
});

实现效果展示:

3. 学习地址

www.jianshu.com/p/275747429...
blog.csdn.net/agua001/art...

相关推荐
GIS之路8 分钟前
GeoTools 结合 OpenLayers 实现空间查询
前端
轻语呢喃8 分钟前
每日LeetCode:合并两个有序数组
javascript·算法
陳有味_ChenUvi9 分钟前
使用 pnpm 优雅搭建 Monorepo 仓库
前端·npm·前端工程化
旷世奇才李先生11 分钟前
XML DOM 安装使用教程
xml·前端·chrome
程序员秘密基地18 分钟前
基于html,css,vue,vscode,vs2022,asp.net,aspnet,.net,c#,mysql数据库,在线健身,俱乐部管理系统
前端·vue.js·后端·mysql·asp.net
Mintopia21 分钟前
Three.js 画布纹理:像素世界的魔法编织术
前端·javascript·three.js
天天摸鱼的java工程师21 分钟前
当我成为面试官,我才知道当年那些面试官其实并不是在难为我,而是在考察我面对问题的拆解能力
前端·后端·面试
袁煦丞24 分钟前
泰拉瑞亚远程联机魔法:cpolar内网穿透实验室第617个成功挑战
前端·程序员·远程工作
玲小珑28 分钟前
Next.js 教程系列(十二)API Routes:构建轻量级后端服务
前端·next.js
JinSo33 分钟前
EasyEditor AI 聊天助手:让低代码开发更简单
前端·javascript·github