Echarts柱状堆叠图加目标值

127 阅读1分钟

需求如下

image.png

配置项

import * as echarts from 'echarts';

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

option = {
  tooltip: {
    trigger: 'axis'
  },
  // legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['2022'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: function (value) {
        return value.max > 650 ? value.max + 20 : 650;
      },
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: 'A',
      type: 'bar',
      stack: 'ad',
      barWidth: 100,
      label: {
        show: true,
        formatter: function (value) {
          return value.seriesName + ' ' + value.data;
        }
      },
      data: [120]
    },
    {
      name: 'B',
      type: 'bar',
      stack: 'ad',
      barWidth: 100,
      label: {
        show: true,
        formatter: function (value) {
          return value.seriesName + ' ' + value.data;
        }
      },
      data: [220]
    },
    {
      name: 'C',
      type: 'bar',
      stack: 'ad',
      barWidth: 100,
      markLine: {
        symbol: ['none', 'none'],
        data: [
          {
            type: 'max',
            name: '实际 Total',
            label: {
              position: 'insideEndBottom'
            }
          },
          {
            name: '阈值',
            yAxis: 650,
            lineStyle: {
              type: 'solid'
            },
            label: {
              position: 'insideEndBottom'
            }
          }
        ]
      },
      label: {
        show: true,
        formatter: function (value) {
          return value.seriesName + ' ' + value.data;
        }
      },
      data: [150]
    }
  ]
};

option && myChart.setOption(option);