Echarts 柱状图显示百分比

发布时间:2024年01月18日

要求:每个数值显示具体百分比,计算方式为:?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;
              }
            }
          },
文章来源:https://blog.csdn.net/m0_58893670/article/details/135666927
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。