Vue+echarts で積み上げ棒グラフを実現

<テンプレート>
  <div class="chart" ref="chartEle"></div>
</テンプレート>
<スクリプト>
  「echarts」からechartsをインポートします。
  '@/components/event/event-bus' から eventBus をインポートします。
  エクスポートデフォルト{
    小道具: {
      凡例データ:
        タイプ: 配列、
        デフォルト： []
      },
      x軸データ: {
        タイプ: 配列、
        デフォルト： []
      },
      シリーズデータ: {
        タイプ: 配列、
        デフォルト： []
      }

    },

    データ（） {
      戻る {
        echartsObj: null、
      }
    },

    マウント() {
      var that = これ
      eventBus.$on("ウィンドウのサイズ変更", ターゲット => {
        that.echartsObj && that.echartsObj.resize()
      });
    },

    メソッド: {
      initCharts() {
        this.echartsObj = echarts.init(this.$refs.chartEle)
        オプションの設定()
        // window.onresize = 関数() {
        // this.echartsObj.resize()
        // }
      },

      チャートのサイズを変更する() {
        this.echartsObj.resize()
      },

      オプションを設定する（）{
        const that = this
        var オプション = {
          色: ['#2DC6C8', '#B6A2DD'],
          // ツールチップ: { トリガー: 'item'、フォーマッタ: "{a} : {c}" },
          ツールチップ: { },
          //データビュー、折れ線グラフ、復元、保存表示マークツールボックスを右側に表示します: {
            特徴：
              // データビュー: {表示: true、読み取り専用: false},
              // マジックタイプ: {show: true, type: ['line', 'bar']},
              // 復元: {表示: true},
              // saveAsImage: {表示: true}
              魔法の種類: {
                表示: true、
                タイプ: ["line", "bar"],
                アイコン：
                  行: "image:///static/images/toolbox_zhexian.png",
                  バー: "image:///static/images/toolbox_zhuzhuangtu.png"
                }
              },
              復元する：
                表示: true、
                アイコン: "image:///static/images/toolbox_shuaxin.png"
              },
              画像として保存: {
                表示: true、
                アイコン: "image:///static/images/toolbox_xiazai.png"
              }
            }
          },
          伝説： {
            下: '5'、
            データ: this.legendData
          },
          グリッド: {
            上: '40'
          },
          x軸: [
            {
              タイプ: 'カテゴリ',
              データ: this.xAxisData、
              axisLine: { lineStyle: { color: '#7DABB0' }} // x軸の目盛りの色}
          ]、
          y軸: [
            {
              タイプ: '値',
              軸線: {
                lineStyle: { color: '#7DABB0' } // y軸の色},
              軸目盛り: {
                lineStyle: { color: '#7DABB0' } // y軸のスケールの色}
            }
          ]、
          シリーズ: this.seriesData
        }
        this.echartsObj.setOption(オプション)
      }
    }
  }
</スクリプト>
<スタイルスコープ>
  .チャート{
    高さ: 360ピクセル;
    幅: 100%;
  }
</スタイル>

<テンプレート>
  <div>
    <form-search @onSearch="onSearch"> </form-search>
    <div class="panel orioc-table-panel" slot="center">
      <!-- チャート -->
      <多様化-棒グラフ
        ref="バーチャート"
        :legendData="凡例データ"
        :seriesData="シリーズデータ"
        :xAxisData="xAxisData"
      ></多様化-BarChart>
      <!-- 表 -->

    </div>


  </div>
</テンプレート>

<スクリプト>
  '@/components/formSearch/formSearch' から FormSearch をインポートします。
  '@/components/event/event-bus' から eventBus をインポートします。
  '@/components/echarts/diversificationBarChart/index' から DiversificationBarChart をインポートします。
  エクスポートデフォルト{
    名前: 'リスト',
    // コンポーネント: { FormSearch、eventBus、DiversificationBarChart }、
    データ（） {
      戻る {
        legendData: [], // 凡例 xAxisData: [], // x軸 seriesData: []// チャートデータ}
    },
    マウント() {
      // リストを読み込む this.legendData = ['自動アラーム', '手動アラーム']
      this.xAxisData = ['2018-09-02', '2019-02-25', '2019-05-25']
      this.seriesData = [
        {
          名前:「自動アラーム」
          タイプ: 'バー'、
          stack:'111', // スタック barMaxWidth: '100', // 棒グラフデータの最大幅: [20, 30, 40]
        },
        {
          名前:「手動アラーム受信」
          タイプ: 'バー'、
          stack:'111', // スタック barMaxWidth: '100', // 棒グラフデータの最大幅: [10, 50, 35]
        }
      ]
      this.$nextTick(() => {
        eventBus.$emit('ウィンドウのサイズ変更')
        this.$refs.barCharts.initCharts()
      })
    },
    メソッド: {
      onSearch(データ) {}
    }
  }
</スクリプト>

<スタイルスコープ>

</スタイル>