Vue+echarts realisiert gestapelte Balkendiagramme

<Vorlage>
  <div Klasse="chart" ref="chartEle"></div>
</Vorlage>
<Skript>
  E-Charts aus „E-Charts“ importieren;
  importiere eventBus aus '@/components/event/event-bus'
  Standard exportieren {
    Requisiten: {
      LegendeDaten:
        Typ: Array,
        Standard: []
      },
      xAchsendaten: {
        Typ: Array,
        Standard: []
      },
      Seriendaten: {
        Typ: Array,
        Standard: []
      }

    },

    Daten() {
      zurückkehren {
        echartsObj: null,
      }
    },

    montiert() {
      var das = dies
      eventBus.$on("Fenstergröße ändern", Ziel => {
        das.echartsObj und das.echartsObj.resize()
      });
    },

    Methoden: {
      initCharts() {
        dies.echartsObj = echarts.init(dies.$refs.chartEle)
        dies.setOption()
        // Fenster.onresize = Funktion() {
        // dies.echartsObj.resize()
        // }
      },

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

      setzeOption() {
        const das = dies
        var option = {
          Farbe: ['#2DC6C8', '#B6A2DD'],
          // Tooltip: { Auslöser: 'Element', Formatierung: "{a} : {c}" },
          Tooltip: { },
          //Datenansicht, Liniendiagramm, Wiederherstellen, Speichern Anzeige markieren Toolbox rechts: {
            Besonderheit:
              // Datenansicht: {Anzeigen: true, Nur lesen: false},
              // magicType: {show: true, Typ: ['Zeile', 'Balken']},
              // wiederherstellen: {show: true},
              // AlsBild speichern: {show: true}
              magischer Typ: {
                zeigen: wahr,
                Typ: ["Linie", "Balken"],
                Symbol:
                  Zeile: „image:///static/images/toolbox_zhexian.png“,
                  Leiste: "image:///static/images/toolbox_zhuzhuangtu.png"
                }
              },
              wiederherstellen:
                zeigen: wahr,
                Symbol: „Bild:///static/images/toolbox_shuaxin.png“
              },
              AlsBild speichern: {
                zeigen: wahr,
                Symbol: „Bild:///static/images/toolbox_xiazai.png“
              }
            }
          },
          Legende: {
            unten: '5',
            Daten: this.legendData
          },
          Netz: {
            oben: '40'
          },
          xAchse: [
            {
              Typ: "Kategorie",
              Daten: this.xAxisData,
              axisLine: { lineStyle: { color: '#7DABB0' }} // Markierungsfarbe der X-Achse}
          ],
          yAchse: [
            {
              Typ: "Wert",
              Achsenlinie: {
                lineStyle: { color: '#7DABB0' } // Farbe der y-Achse},
              AchseTick: {
                lineStyle: { color: '#7DABB0' } // Skalenfarbe der Y-Achse}
            }
          ],
          Serie: this.seriesData
        }
        this.echartsObj.setOption(Option)
      }
    }
  }
</Skript>
<Stilbereich>
  .diagramm {
    Höhe: 360px;
    Breite: 100 %;
  }
</Stil>

<Vorlage>
  <div>
    <form-search @onSearch="onSearch"> </form-search>
    <div Klasse="Panel Orioc-Table-Panel" Slot="Mitte">
      <!-- Diagramm -->
      <Diversifikations-Balkendiagramm
        ref="Balkendiagramme"
        :legendData="legendData"
        :seriesData="seriesData"
        :xAxisData="xAxisData"
      ></diversification-BarChart>
      <!-- Tabelle -->

    </div>


  </div>
</Vorlage>

<Skript>
  FormSearch aus '@/components/formSearch/formSearch' importieren
  importiere eventBus aus '@/components/event/event-bus'
  importiere DiversificationBarChart aus '@/components/echarts/diversificationBarChart/index'
  Standard exportieren {
    Namensliste',
    // Komponenten: { FormSearch, eventBus, DiversificationBarChart },
    Daten() {
      zurückkehren {
        legendData: [], // Legende xAxisData: [], // x-Achse seriesData: []// Diagrammdaten}
    },
    montiert() {
      // Liste laden this.legendData = ['Automatischer Alarm', 'Manueller Alarm']
      this.xAxisData = ['2018-09-02', '2019-02-25', '2019-05-25']
      diese.seriesData = [
        {
          Name: 'Automatischer Alarm',
          Typ: "Bar",
          stack:'111', // Stapel barMaxWidth: '100', // maximale Breite der Balkendiagrammdaten: [20, 30, 40]
        },
        {
          Name: 'Manueller Alarmempfang',
          Typ: "Bar",
          stack:'111', // Stapel barMaxWidth: '100', // maximale Breite der Balkendiagrammdaten: [10, 50, 35]
        }
      ]
      dies.$nextTick(() => {
        eventBus.$emit('Fenstergröße ändern')
        dies.$refs.barCharts.initCharts()
      })
    },
    Methoden: {
      onSearch(Daten) {}
    }
  }
</Skript>

<Stilbereich>

</Stil>