本文例項為大家分享了+echarts實現堆疊柱狀圖的具體程式碼，供大家參考，具體內容如下

echarts-子元件

<template>
  <div class="chart" ref="chartEle"></div>
</template>
&lhttp://www.cppcns.comt;script>
  import echarts from "echarts";
  import eventBus from '@/components/event/event-bus'
  export default {
    props: {
      legendData: {
        type: Array,default: []
      },xAxisData: {
        type: Array,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: {  },//右側資料檢視、折線圖、還原、儲存顯示標誌
          toolbox: {
            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/imag
 
es/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軸刻度線顏色
            }
          ],yAxis: [
            {
              type: 'value',axisLine: {
                lineStyle: { color: '#7DABB0' } // y軸座標軸顏色
              },axisTick: {
                lineStyle: { color: '#7DABB0' } // y軸座標刻度顏色
              }
            }
          ],series: this.seriesData
        }
        this.echartsObj.setOption(option)
      }
    }
  }
</script>
<style scoped>
  .chart {
    height: 360px;
    width: 100%;
  }
</style>

echarts父元件

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

    </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: [],// 圖例
        xAxisData: [],// x軸
        seriesData: []// 圖資料
      }
    },mounted() {
      // 載入列表
      this.legendData = ['自動接警','人工接警']
      this.xAxisData = ['2018-09-02','2019-02-25','2019-05-http://www.cppcns.com
 
25']
      this.seriesData = [
        {
          name: '自動接警',type: 'bawww.cppcns.comr',stack:'111',//堆疊
          barMaxWidth: '100',//柱狀圖最大寬度
          data: [20,30,40]
        },{
          name: '人工接警',type: 'bar',//柱狀圖最大寬度
          data: [10,50,35]
        }
      ]
      this.$nextTick(() => {
        eventBus.$emit('window-resize')
        this.$refs.barCharts.initCharts()
      })
    },methods: {
      onSearch(data) {}
    }
  }
</script>

<style scoped>

</style>

效果圖

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。