echarts中柱状图数据堆叠的效果

echarts中柱状图数据堆叠的效果

1、最后的样式展示

2、代码拷贝

//容器盒子
<template>
  <div class="bar" :id="chartsId" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
import mapData from './mapData';

export default {
  name: 'Bar',
  // 接收从父组件传回的值
  props: {
    options: {
      type: Object,
    },
    chartsId: {
      type: String,
      default: () => {
        return 'echarts-bar';
      },
    },
  },
  data() {
    return {};
  },
  // 实时监听父组件传过来的值，进而执行drawBar方法，重绘柱状图
  watch: {
   //在这里进行深度监听
    options: {
      handler(newOptions) {
        this.drawBar(newOptions);
      },
      deep: true,
    },
  },
  mounted() {
    this.drawBar(this.options);
  },
  methods: {
    drawBar({
      barColor1 = [
        { offset: 0, color: 'RGBA(116, 236, 239, 1)' },
        { offset: 1, color: 'RGBA(116, 236, 239, 1)' }, //柱图渐变色
      ],
      barColor2 = [
        { offset: 0, color: 'RGBA(82, 144, 250, 1)' },
        { offset: 1, color: 'RGBA(82, 144, 250, 1)' }, //柱图渐变色
      ],
      // x轴所有省份的数据
      axisData = [],
      monitorData = [],
      shieldData = [],
      // 直角坐标系的位置控制
      grid = {
        left: 20,
        right: 20,
        bottom: 20,
        top: 20,
        containLabel: true,
      },
      barWidth = '',
    } = {}) {
      let barBox = echarts.init(document.getElementById(this.chartsId), null, {
        renderer: 'svg',
      });
      let option = {
        grid: grid,//网格的位置设置
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#FFF',
          },
          position: function (point, params, dom, rect, size) {
            //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
            let x = point[0]; //
            let y = point[1];
            let viewWidth = size.viewSize[0];
            let viewHeight = size.viewSize[1];
            let boxWidth = size.contentSize[0];
            let boxHeight = size.contentSize[1];
            let posX = 0; //x坐标位置
            let posY = 0; //y坐标位置
            posX = x - boxWidth / 2;
            if (y < boxHeight) {
              //上边放不开
              posY = -20;
            } else {
              //上边放得下
              posY = y - boxHeight;
            }
            return [posX, posY];
          },
          backgroundColor: ' rgba(19, 55, 74, 0.93)',
          borderColor: '#064D5B',
          padding: [12, 20],
          boxShadow: '0px 10px 32px 0px #010D0D',
          axisPointer: {
            //去掉移动的指示线
            type: 'none',
          },
          //在这里需要我们自定义鼠标移动上去的文本
          formatter: function (params, ticket, callback) {
            return `<div style="font-size: 14px;2-index:100">
            <p>${params[0].axisValueLabel}</p>
             <p style="line-height:30px;height:30px;margin-top:5px;"><span style="width: 14px;height: 14px;background: #638EF4;border-radius: 4px;margin-right:9px;display: inline-block;"></span>${params[1].seriesName}<span style="color: #7CFCFB;margin-left:18px;line-height:30px;">${params[1].value} 台</span>
            </p>
            <p style="line-height:30px;height:30px;"><span style="width: 14px;height: 14px;background: #7EF7EE;border-radius: 4px;margin-right:9px;display: inline-block;"></span>${params[0].seriesName}<span style="color: #7CFCFB;margin-left:18px;line-height:30px;">${params[0].value} 台</span>
            </p>
            <span style=" position: absolute;width: 0px;height:0px;line-height: 0px;border-top: 10px solid rgba(19, 55, 74, 0.93);border-left: 10px solid transparent;border-right: 10px solid transparent;left: 85px;bottom: -10px;display:inline-block;z-index:99"></span>
            </div>`;
          },
        },
        xAxis: {
          type: 'category',
          data: axisData,
          axisLabel: {
            rotate: 60,
            textStyle: { fontSize: 12, color: 'RGBA(118, 235, 243, 1)' },
            formatter: function (value, index) {
              for (let key in mapData) {
                if (value === mapData[key]) return key;
              }
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            // 分隔线
            show: true,
            lineStyle: {
              color: 'rgba(22, 208, 255, 0.12)',
              type: 'dashed',
            },
          },
          axisLabel: {
            color: 'RGBA(118, 235, 243, 1)',
            fontSize: 12,
          },
        },
        calculable: true,

        series: [
          {
            name: '信号屏蔽数量',
            data: shieldData,
            type: 'bar',
            barWidth: barWidth,
            stack: 'xxx',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  barColor1
                ),
              },
            },
            animationDurationUpdate: 2500,
            animationEasing: 'cubicInOut',
          },
          {
            name: '信号监测数量',
            data: monitorData,
            type: 'bar',
            barWidth: barWidth,
            stack: 'xxx',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  barColor2
                ),
              },
            },
            animationDurationUpdate: 2500,
            animationEasing: 'cubicInOut',
          },
        ],
      };
      barBox.setOption(option, true);
    },
  },
};
</script>
<style scoped></style>

堆叠图最主要的一点，就是需要在各自的对象中设置stack为相同的值，在这里我随便写了一个xxx来代替