Echarts如何以堆叠形式展示整体和部分值

59 阅读1分钟

前言

如图,堆叠图展示每天的任务量,包括已完成量、未完成量,如何想要堆叠展示形式不变,鼠标移入时展示全部任务量、已完成任务量,如何实现? image.png

思考

堆叠图是将不同部分的数据叠放到一起,每段展示不同部分的值,如需展示整体和部分值,可使用双柱状图进行配置。

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: '全部',
      type: 'bar',
      data: [440, 434, 402, 468, 480, 560, 530]
    },
    {
      name: '已完成',
      type: 'bar',
      barGap: '-100%',  // 使两个柱子重叠,模拟堆叠效果
      data: [320, 302, 301, 334, 390, 330, 320]
    },
  ]
};

实现效果如下

image.png