Vue implementiert horizontal abgeschrägtes Balkendiagramm

<Vorlage>
  <div Klasse="Verbrauch">
    <div style="Breite: 350px; Höhe: 180px" ref="Verbrauchsdiagramm" />
  </div>
</Vorlage>
<Skript>
E-Charts aus „E-Charts“ importieren
const meineForm = {
  x: 0,
  y: 0,
  Breite: 10 // Abstand}
// Zeichne die linke Seite const InclinedRoofBar = echarts.graphic.extendShape({
  Form: meineForm,
  BuildPath: Funktion (ctx, Form) {
    // Jeder, der Canvas kennt, sollte das verstehen können. Die Form wird von benutzerdefiniert übergeben: const xAxisPoint = shape.xAxisPoint
    const c0 = [Form.x, Form.y]
    const c1 = [Form.x + 14, Form.y - 10]
    const c2 = [xAchsenpunkt[0], xAchsenpunkt[1] - 10]
    const c3 = [xAchsenpunkt[0], xAchsenpunkt[1]]
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .Pfad schließen()
  }
})
const Farben = ['rgba(50, 197, 255, 0,8)', 'rgba(0, 253, 255, 0,8)', 'rgba(255, 235, 0, 0,8)']
const Farben = ['rgba(0, 145, 255, 1)', 'rgba(68, 215, 182, 1)', 'rgba(215, 170, 68, 1)']
// Drei Oberflächengrafiken registrieren echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar)
const Standardoption = {
  Tooltip: {
    zeigen: wahr,
    Auslöser: 'Achse',
    Achsenzeiger:
      Typ: "Schatten"
    }
  },
  Netz: {
    oben: 10,
    unten: 30,
    links: 10,
    rechts: 10,
    containLabel: wahr
  },
  yAchse: {
    Typ: "Kategorie",
    Daten: [],
    Achsenlinie: {
      anzeigen:false
    },
    AchseTick: {
      anzeigen:false
    },
    Achsenbezeichnung: {
      Farbe(Wert, Index) {
        Farben zurückgeben[index]
      },
      Schriftgröße: 14
    }
  },
  x-Achse:
    Typ: "Wert",
    Achsenlinie: {
      anzeigen:false
    },
    Mindestwert: 0,
    geteilte Zeile: {
      anzeigen:false
    },
    AchseTick: {
      anzeigen:false
    },
    Achsenbezeichnung: {
      anzeigen:false
    },
    Grenzlücke: ['20 %', '20 %']
  },
  Serie: [
    {
      Typ: "benutzerdefiniert",
      Name: '',
      Artikelstil: {
        Farbe: 'rgba(44, 197, 253, 1)'
      },
      renderItem: (params, api) => {
       const Standort = api.Koord([api.Wert(0), api.Wert(1)])
        const xlocation = api.coord([0, api.value(1)])
        zurückkehren {
          Typ: 'Schrägdachträger',
          Form:
            API,
            xWert: api.Wert(0),
            yWert: api.value(1),
            x: Standort[0],
            y: Standort[1] + meineForm.Breite,
            xAchsenpunkt: [xlocation[0], xlocation[1] + meineForm.width]
          },
          Stil: {
            füllen: neue echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                Versatz: 0,
                Farbe: Farben[Params.DataIndex]
              },
              {
                Versatz: 1,
                Farbe: Farben[Params.DataIndex]
              }
            ])
          }
        }
      },
      Daten: []
    },
    {
      Typ: "Bar",
      Etikett: {
        normal: {
          zeigen: wahr,
          Position: 'rechts',
          Schriftgröße: 14,
          Versatz: [15, 0]
        }
      },
      Hintergrund anzeigen: false,
      Balkenbreite: 14,
      Hintergrundstil: {
        Farbe: 'rgba(50, 197, 255, 0.1)'
      },
      Artikelstil: {
        Farbe: 'transparent'
      },
      Tooltip: {
        anzeigen:false
      },
      Daten: []
    }
  ]
}
Standard exportieren {
  Daten() {
    zurückkehren {
      meinChart: null
    }
  },
  montiert() {
    dies.meinChart = echarts.init(dies.$refs.ConsumptionChart)
  },
  Methoden: {
    getOption(seriesData) {
      Konstante Option = Standardoption
      const { yAxis, Serie } = Option
      // Prozessdaten yAxis.data = ['low', 'middle', 'high']
      Serie[0].Daten = SerienDaten
      Serie[1].Daten = SerienDaten.Map((Element, Index) => Objekt.Zuweisung(Element, { Bezeichnung: { Farbe: Farben[Index] } }))
      this.myChart.setOption(Option)
    }
  }
}
</Skript>