Vue+echarts realizes stacked bar chart

<template>
  <div class="chart" ref="chartEle"></div>
</template>
<script>
  import echarts from "echarts";
  import eventBus from '@/components/event/event-bus'
  export default {
    props: {
      legendData:
        type: Array,
        default: []
      },
      xAxisData: {
        type: Array,
        default: []
      },
      seriesData: {
        type: Array,
        default: []
      }

    },

    data() {
      return {
        echartsObj: null,
      }
    },

    mounted() {
      var that = this
      eventBus.$on("window-resize", target => {
        that.echartsObj && that.echartsObj.resize()
      });
    },

    methods: {
      initCharts() {
        this.echartsObj = echarts.init(this.$refs.chartEle)
        this.setOption()
        // window.onresize = function() {
        // this.echartsObj.resize()
        // }
      },

      resizeChart() {
        this.echartsObj.resize()
      },

      setOption() {
        const that = this
        var option = {
          color: ['#2DC6C8', '#B6A2DD'],
          // tooltip: { trigger: 'item', formatter: "{a} : {c}" },
          tooltip: { },
          //Data view, line chart, restore, save display mark toolbox on the right: {
            feature:
              // dataView: {show: true, readOnly: false},
              // magicType: {show: true, type: ['line', 'bar']},
              // restore: {show: true},
              // saveAsImage: {show: true}
              magicType: {
                show: true,
                type: ["line", "bar"],
                icon:
                  line: "image:///static/images/toolbox_zhexian.png",
                  bar: "image:///static/images/toolbox_zhuzhuangtu.png"
                }
              },
              restore:
                show: true,
                icon: "image:///static/images/toolbox_shuaxin.png"
              },
              saveAsImage: {
                show: true,
                icon: "image:///static/images/toolbox_xiazai.png"
              }
            }
          },
          legend: {
            bottom: '5',
            data: this.legendData
          },
          grid: {
            top: '40'
          },
          xAxis: [
            {
              type: 'category',
              data: this.xAxisData,
              axisLine: { lineStyle: { color: '#7DABB0' }} // x-axis tick mark color}
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: { color: '#7DABB0' } // y-axis color},
              axisTick: {
                lineStyle: { color: '#7DABB0' } // y-axis scale color}
            }
          ],
          series: this.seriesData
        }
        this.echartsObj.setOption(option)
      }
    }
  }
</script>
<style scoped>
  .chart {
    height: 360px;
    width: 100%;
  }
</style>

<template>
  <div>
    <form-search @onSearch="onSearch"> </form-search>
    <div class="panel orioc-table-panel" slot="center">
      <!-- Chart -->
      <diversification-BarChart
        ref="barCharts"
        :legendData="legendData"
        :seriesData="seriesData"
        :xAxisData="xAxisData"
      ></diversification-BarChart>
      <!-- Table -->

    </div>


  </div>
</template>

<script>
  import FormSearch from '@/components/formSearch/formSearch'
  import eventBus from '@/components/event/event-bus'
  import DiversificationBarChart from '@/components/echarts/diversificationBarChart/index'
  export default {
    name: 'list',
    // Components: { FormSearch, eventBus, DiversificationBarChart },
    data() {
      return {
        legendData: [], // Legend xAxisData: [], // x-axis seriesData: []// Chart data}
    },
    mounted() {
      // Load list this.legendData = ['Automatic alarm', 'Manual alarm']
      this.xAxisData = ['2018-09-02', '2019-02-25', '2019-05-25']
      this.seriesData = [
        {
          name: 'Automatic alarm',
          type: 'bar',
          stack:'111', // stack barMaxWidth: '100', // maximum width of the bar chart data: [20, 30, 40]
        },
        {
          name: 'Manual alarm reception',
          type: 'bar',
          stack:'111', // stack barMaxWidth: '100', // maximum width of the bar chart data: [10, 50, 35]
        }
      ]
      this.$nextTick(() => {
        eventBus.$emit('window-resize')
        this.$refs.barCharts.initCharts()
      })
    },
    methods: {
      onSearch(data) {}
    }
  }
</script>

<style scoped>

</style>