Echarts堆叠柱状图——虚线展示

实现需求

1、实现多数据堆叠展示。
2、最右侧展示单个柱状图的合计值。
3、hover状态下展示单个柱状图的对应值。
4、Y轴分割线居中展示，展示为虚线（dashed）形式。

技术难点

1、Y周分割线居中展示。
2、右侧计算单个柱状图合计值。
3、hover状态下不展示多余数据。

难点实现重点代码及其解析

1、Y周分割线居中展示。
首先将坐标刻度线进行居中展示并隐藏。通过绘制gird分割线展示且展示样式为虚线。 关键代码如下：

yAxis: {    
    axisTick: {
      alignWithLabel: true,//坐标刻度线是否居中展示
      show: false,//隐藏坐标刻度线
    },
    //分割线
    splitLine: {
      show: true,//展示分割线
      lineStyle: {
        type: 'dashed'//展示成虚线
      }
    }
  },

2、右侧计算单个柱状图合计值。

//首先在series最后创建求和的柱形图，且data赋值为0，作为计算结果后进行
series:[
{
      name: '',
      type: 'bar',
      data: [0, 0, 0, 0, 0, 0, 0],
      color: '#bbf',
      stack: 'total',
      barWidth: 30,
      label: {
        show: true,
        position: 'right',
        color: 'black'
      }
    }
]
 
var series = option.series;//获取坐标数据配置信息
//求和方法
function getSum(params) {
  var datavalue = 0;
  for (var i = 0; i < series.length; i++) {
    datavalue += series[i].data[params.dataIndex];
  }
  return datavalue;
}
//将求和的值赋值最后展示的柱形图的展示值
series[series.length - 1].label.formatter = getSum;
 

在series中创建了最后一组柱状图，导致在hover时，会出现总和的一组数据，此时需要在展示tooltip中设置formatter进行计算展示，提出最后一组数据后进行展示。处理方法如下：

tooltip:{
    formatter: (param, ticket, callback) => {
         var str = '';
         for (const item of param) {
           item.seriesName &&
             (str +=
               item.marker + ' ' + item.seriesName + '：' + item.value + '<br>');
         }
         return str;
       }
}

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    },
    formatter: (param, ticket, callback) => {
      var str = '';
      for (const item of param) {
        item.seriesName &&
          (str +=
            item.marker + ' ' + item.seriesName + '：' + item.value + '<br>');
      }
      return str;
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: true
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
      alignWithLabel: true,
      show: false
    },
    splitLine: {
      alignWithLabel: true,
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      barWidth: 20,
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    },
    {
      name: '',
      type: 'bar',
      data: [0, 0, 0, 0, 0, 0, 0],
      color: '#bbf',
      stack: 'total',
      barWidth: 30,
      label: {
        show: true,
        position: 'right',
        color: 'black'
      }
    }
  ]
};

var series = option.series;
function getSum(params) {
  var datavalue = 0;
  for (var i = 0; i < series.length; i++) {
    datavalue += series[i].data[params.dataIndex];
  }
  return datavalue;
}
series[series.length - 1].label.formatter = getSum;