Echarts 柱状图显示百分比

最新推荐文章于 2024-08-11 09:08:01 发布

饱饱~~

最新推荐文章于 2024-08-11 09:08:01 发布

阅读量1.5k

点赞数 7

文章标签： echarts

本文链接：https://blog.csdn.net/m0_58893670/article/details/135666927

版权

要求：每个数值显示具体百分比，计算方式为： effect_cnt/total_cnt

数据结构为：{ "dt": "20240110", "effect_cnt": 725, "total_cnt": 1387, "both_effect_cnt": 912, "green_cnt": 650 },

series: [
          {
            name: '特效',
            type: 'bar',
            data: this.rows.map(item => item.effect_cnt),
            label: {
              show: true,
              position: 'inside',
              formatter: function(params) {
                return params.data.value;
              }
            }
          },

打印 formatter 的 params 里面只有 “effect_cnt” 的值，如果要进行计算，需要 params 里面包含 “total_cnt”

{
            name: '特效',
            type: 'bar',
            data: this.rows.map(item => ({
              value: item.effect_cnt,
              total_cnt: item.total_cnt
            })),
            label: {
              show: true,
              position: 'top',
              formatter: function(params) {
                const value = params.data.value;
                const totalCnt = params.data.total_cnt;
                if (totalCnt === 0) {
                  return '0%';
                }
                if (isNaN(value) || isNaN(totalCnt)) {
                  return '';
                }
                const percentage = ((value / totalCnt) * 100).toFixed(2) + '%';
                return value + '次' + '\n' + percentage;
              }
            }
          },