So verwenden Sie Balkendiagramme in Vue und ändern die Konfiguration selbst

 <!-- E-Charts importieren -->
 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

Vue.prototype.$echarts = fenster.echarts
// Verwenden Sie this.$echarts direkt bei der Verwendung

<Vorlage>
 <div Klasse="com-container">
  <div class="com-chart" ref="sellerRef"></div>
 </div>
</Vorlage>

Standard exportieren {
 Daten () {
  zurückkehren {
   // Initialisiertes Diagramm chartInstance: null,
   allDate: null, //Vom Server zurückgegebene Daten}
 },
}
```js
##### 5. Logik in Methoden ```js
Methoden: {
  // Echarts-Objekt initialisieren initEchart(){
    // Holen Sie sich das DOM-Objekt this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
  },
  // Daten vom Server abrufen async getData(){
    const {data:res} = warte hierauf.$http.get('seller')
    dies.allDate = res
    // Die Datenstruktur der Rückgabe ist Name, Händler, Wert // Sortiere die zurückgegebenen Daten von klein nach groß Sortiermethode this.allDate.sort((a, b) => {
    gibt a.Wert - b.Wert zurück
   })
    // Rufen Sie die Methode zum Aktualisieren der Ansicht this.updateChart() auf.
  },
  // Das Diagramm aktualisieren updateChart(){
  // Daten der Kategorieachse der Y-Achse const sellerNames = this.allDate.map(item=>{
    // Passen Sie return item.name Ihren Bedürfnissen an
  })
  //Daten der x-Achse Werteachse const sellerValues ​​= this.allDate.map(item=>{
    Artikelwert zurückgeben
  })
     const option = {
    x-Achse:
     Typ: "Wert"
    },
    yAchse: {
     Typ: "Kategorie",
     // Die Koordinatenachse der Y-Achse verwendet den durchquerten Namen
     Daten: Verkäufernamen
    },
    Serie: [
     {
      // Typ ist Balkendiagrammtyp: 'Balken',
      // Die Daten der X-Achse müssen im Datentyp Serie als Durchlaufwert festgelegt werden
      Daten: Verkäuferwerte
     }
    ]
  }
  // Rendere Optio-Daten in DOM-Objekt this.chartInstance.setOption(option)
},

 // Das Laden des DOM ist abgeschlossen. Rufen Sie gemountet () auf. {
  dies.initChart()
  dies.getData()
 },

 <!-- Einführung in das Thema -->
 <script src="./static/lib/theme/chalk.js"></script>

   diese.chartInstance = diese.$echarts.init(diese.$refs.sellerRef, 'Kreide')

   const option = {
    Titel:
     Text: '| Verkaufsstatistiken der Händler',
     Textstil: {
      Schriftgröße: 66
     },
     links: 20,
     oben: 20
    },
    // Achsenkonfigurationsraster: {
     oben: '20%',
     links: '3%',
     rechts: '6%',
     unten: '3%',
     // Die Distanz beinhaltet den Achsentext containLabel: true
    },
    x-Achse:
     Typ: "Wert"
    },
    yAchse: {
     Typ: "Kategorie",
     // Die Koordinatenachse der Y-Achse verwendet den durchquerten Namen
     Daten: Verkäufernamen
    },
    Serie: [
     {
      // Typ ist Balkendiagrammtyp: 'Balken',
      // Die Daten der X-Achse müssen im Datentyp Serie als Durchlaufwert festgelegt werden
      Daten: Verkäuferwerte,
      // Spaltenbreite barWidth: 66,
      // Spaltentext zeigt standardmäßig keine Beschriftung an: {
       zeigen: wahr,
       // Der Text wird an der richtigen Position angezeigt: 'right',
       Textstil: {
        // Die Farbe ist weiß Farbe: 'weiß'
       }
      },
      //Jedes Element in der Spalte „itemStyle“ steuern: {
       // Kontrolliere den Eckradius des barBorderRadius: [0, 33, 33, 0],
       // Linearer Farbverlauf // Unterschiedliche Prozentsätze für Farbwerte angeben color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
         // 0 Prozent Stiloffset: 0,
         Farbe: '#5052EE'
        },
        {
         // 100 % Versatz: 1,
         Farbe: '#AB6EE5'
        }
       ])
      }
     }
    ],
    Tooltip: {
     Auslöser: 'Achse',
     Achsenzeiger:
      Typ: „Linie“, // Standard ist eine gerade Linie, optional: „Linie“ | „Schatten“
      z: 0, // Hintergrundebene lineStyle: {
       Breite: 66, // Hintergrundbreite Farbe: '#2D3443' // Hintergrundfarbe}
     }
    }
   }
   ```