Echarts 柱状图显示百分比

以下是生成的 option 

option = {
  yAxis: { name: '金额(元)', type: 'value' },
  xAxis: { type: 'category' },
  legend: {},
  series: [
    {
      stack: 'x',
      name: '早餐',
      label: {
        normal: {
          show: true,
          position: 'insideRight',
          // 格式化显示
          formatter: function (params) {
            let aa = params.seriesName + 'per';
            return params.data[aa];
          }
        }
      },
      type: 'bar'
    },
    {
      stack: 'x',
      name: '午餐',
      label: {
        normal: {
          show: true,
          position: 'insideRight',
          formatter: function (params) {
            let aa = params.seriesName + 'per';
            return params.data[aa];
          }
        }
      },
      type: 'bar'
    },
    {
      stack: 'x',
      name: '晚餐',
      label: {
        normal: {
          show: true,
          position: 'insideRight',
          formatter: function (params) {
            let aa = params.seriesName + 'per';
            return params.data[aa];
          }
        }
      },
      type: 'bar'
    }
  ],
  tooltip: {},
  title: { text: '每月销售数据' },
  // 使用数据集设置数据
  dataset: {
    source: [
      {
        product: '01',
        晚餐per: '20.64%',
        午餐: 88752.57,
        早餐per: '0.07%',
        晚餐: 23098.21,
        早餐: 73.0,
        午餐per: '79.30%'
      },
      {
        product: '02',
        晚餐per: '24.45%',
        午餐: 121701.86,
        早餐per: '0.31%',
        晚餐: 39547.61,
        早餐: 504.02,
        午餐per: '75.24%'
      },
      {
        product: '03',
        晚餐per: '29.46%',
        午餐: 159766.78,
        早餐per: '0.26%',
        晚餐: 66962.8,
        早餐: 590.0,
        午餐per: '70.28%'
      },
      {
        product: '04',
        晚餐per: '27.38%',
        午餐: 148685.83,
        早餐per: '0.07%',
        晚餐: 56110.05,
        早餐: 149.15,
        午餐per: '72.55%'
      },
      {
        product: '05',
        晚餐per: '25.80%',
        午餐: 160834.78,
        早餐per: '0.57%',
        晚餐: 56350.46,
        早餐: 1236.01,
        午餐per: '73.64%'
      },
      {
        product: '06',
        晚餐per: '23.86%',
        午餐: 158644.58,
        早餐per: '0.00%',
        晚餐: 49719.0,
        早餐: 0.5,
        午餐per: '76.14%'
      },
      {
        product: '07',
        晚餐per: '19.59%',
        午餐: 82146.2,
        早餐per: '0.07%',
        晚餐: 20031.44,
        早餐: 74.0,
        午餐per: '80.34%'
      },
      {
        product: '08',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      },
      {
        product: '09',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      },
      {
        product: '10',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      },
      {
        product: '11',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      },
      {
        product: '12',
        晚餐per: '0%',
        午餐: '0.00',
        早餐per: '0%',
        晚餐: '0.00',
        早餐: '0.00',
        午餐per: '0%'
      }
    ],
    dimensions: ['product', '早餐', '午餐', '晚餐']
  }
};

生成的柱状图如下

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值