echarts 柱线图显示百分比占比+数据汇总

柱线图

代码块

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

// There should not be negative values in rawData
const rawData = [
  [1, 2, 3, 4, 5, 6, 7],
  [2, 3, 4, 5, 6, 7, 8]
];
const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}
const grid = {
  left: 100,
  right: 100,
  top: 50,
  bottom: 50
};
const series = ['数据1', '数据2'].map((name, sid) => {
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '60%',
    label: {
      show: true,
      formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
    },
    tooltip: {
      valueFormatter: function (value, index) {
        return rawData[sid][index];
      }
    },
    data: rawData[sid].map((d, did) =>
      totalData[did] <= 0 ? 0 : d / totalData[did]
    )
  };
});
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['数据1', '数据2', '数据占比']
  },
  grid,
  xAxis: [
    {
      type: 'category',
      data: ['实例1', '实例2', '实例3', '实例4', '实例5', '实例6', '实例7']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '次数',
      min: 0,
      max: 18,
      interval: 3,
      axisLabel: {
        formatter: '{value} H'
      }
    },
    {
      type: 'value',
      name: '占比',
      min: 0,
      max: 100,
      interval: 20,
      axisLabel: {
        formatter: '{value} %'
      }
    }
  ],
  series: [
    ...series,
    {
      name: '综合',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'top',
        formatter: function (p) {
          let sum = rawData[0][p.dataIndex] + rawData[1][p.dataIndex];
          return sum;
        }
      },
      tooltip: {
        show: false // 禁用 pictorialBar 系列的 tooltip
      },
      emphasis: {
        focus: 'series'
      },
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '数据占比',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + '';
        }
      },
      data: [73.0, 62.2, 83.3, 54.5, 66.3, 90.2, 50.3]
    }
  ]
};

option && myChart.setOption(option);

例图：