Echarts多个堆叠图显示目标值

228 阅读1分钟

需求如下

image.png

配置项

import * as echarts from 'echarts';

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

let total = 650;
option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['2022', '2023']
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: function (value) {
        return value.max > total ? value.max : total + 20;
      }
    }
  ],
  series: [
    {
      name: 'A',
      type: 'bar',
      stack: 'ad',
      barWidth: 100,
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        formatter: function (value) {
          return value.seriesName + ' ' + value.data;
        }
      },
      itemStyle: {
        // borderRadius: 30,
        barBorderRadius: 30
      },
      data: [120, 140]
    },
    {
      name: 'B',
      type: 'bar',
      stack: 'ad',
      barWidth: 100,
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        formatter: function (value) {
          return value.seriesName + ' ' + value.data;
        }
      },
      itemStyle: {
        // borderRadius: 30,
        barBorderRadius: 30
      },
      data: [220, 180]
    },
    {
      name: 'C',
      type: 'bar',
      stack: 'ad',
      barWidth: 100,
      emphasis: {
        focus: 'series'
      },
      markLine: {
        symbol: ['none', 'none'],
        symbolOffset: ['100%', 0],
        data: [
          // { type: 'max', name: '实际 Total' },
          [
            {
              name: '650',
              // xAxis:0,
              x: '20%', // 百分比或者数字
              yAxis: 650,
              symbol: 'none',
              lineStyle: {
                width: 2,
                // dashOffset:100,
                type: 'solid'
              }
            },
            {
              // symbolOffset:["100%",0],
              name: '标线1终点',
              // xAxis:'Jan',
              x: '40%',
              yAxis: 650,
              symbol: 'none'
            }
          ],
          [
            {
              name: '450',

              x: 480,
              yAxis: 450,
              symbol: 'none',
              lineStyle: {
                width: 2,

                type: 'solid'
              }
            },
            {
              name: '标线2终点',

              x: 680,
              yAxis: 450,
              symbol: 'none'
            }
          ]
          //   [{
          //   name: '阈值',
          //   coord:[0, 650],
          //   lineStyle:{
          //     type:'solid',
          //     color:'red'
          //   }
          // },
          // {
          //   name: '阈值',
          //   coord:[1, 650],
          //   lineStyle:{
          //     type:'solid',
          //     color:'red'
          //   }
          // }]
        ]
      },
      label: {
        show: true,
        formatter: function (value) {
          return value.seriesName + ' ' + value.data;
        }
      },
      itemStyle: {
        // borderRadius: 30,
        barBorderRadius: 30
      },
      data: [150, 190]
    }
  ]
};

option && myChart.setOption(option);