Detaillierte Verwendung von Echarts in vue2 vue3

npm installiere echarts --save

// E-Charts importieren
E-Charts aus „E-Charts“ importieren
Vue.prototype.$echarts = echarts 

<div id="meinChart" :style="{width: '300px', height: '300px'}"></div>

//Grundlegende Vorlage einführen let echarts = require('echarts/lib/echarts')

//Balkendiagrammkomponente einführen require('echarts/lib/chart/bar')

//Tooltip- und Titelkomponenten einführen require('echarts/lib/component/tooltip')
erfordern('echarts/lib/komponente/titel')

Standard exportieren {
  Name: 'Hallo',
  Daten() {
    zurückkehren {
      msg: „Willkommen bei Ihrer Vue.js-App“
    }
  },
  montiert() {
    dies.drawLine();
  },
  Methoden: {
    zeichneLinie() {
      // Basierend auf dem vorbereiteten DOM, initialisieren Sie die echarts-Instanz let myChart = echarts.init(document.getElementById('myChart'))
      // Diagrammtitel zeichnen: {
        Text: 'Liniendiagramm stapeln'
    },
    Tooltip: {
        Auslöser: ‚Achse‘
    },
    Legende: {
        Daten: ['E-Mail-Marketing', 'Affiliate-Werbung', 'Video-Werbung', 'Direktzugriff', 'Suchmaschine']
    },
    Netz: {
        links: '3%',
        rechts: '4%',
        unten: '3%',
        containLabel: wahr
    },
    Werkzeugkasten:
        Besonderheit:
            AlsBild speichern: {}
        }
    },
    x-Achse:
        Typ: "Kategorie",
        boundageGap: falsch,
        Daten: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag']
    },
    yAchse: {
        Typ: "Wert"
    },
    Serie: [
        {
            Name: "E-Mail-Marketing",
            Typ: "Linie",
            Stapel: 'Gesamtbetrag',
            Daten: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            Name: „Alliance Advertising“,
            Typ: "Linie",
            Stapel: 'Gesamtbetrag',
            Daten: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            Name: „Videoanzeige“,
            Typ: "Linie",
            Stapel: 'Gesamtbetrag',
            Daten: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            Name: 'Direktzugriff',
            Typ: "Linie",
            Stapel: 'Gesamtbetrag',
            Daten: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            Name: 'Suchmaschine',
            Typ: "Linie",
            Stapel: 'Gesamtbetrag',
            Daten: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
    }
  }
}

importiere * als E-Charts von „E-Charts“
importiere { provide } von 'vue'
 
Standard exportieren {
  Name: "App",
  aufstellen(){
    bereitstellen('echarts',echarts) //bereitstellen
  },
  Komponenten:
  }
}

exportieren { 
 EChartsFullOption als EChartsOption, 
 verbinden, 
 trennen, 
 entsorgen,
 getInstanceByDom, 
 getInstanceById, 
 Karte abrufen, 
 init,
 registerLocale, 
 Karte registrieren, 
 Thema registrieren 
 };

<div id="home-page-traffic_chart" style="Breite: 600px; Höhe: 280px">

Standard exportieren {
  Name: 'Datenseite',
  aufstellen () {
    const trafficData = ref({})
    const echarts = inject('echarts')
    beimMounted(() => {
      const myChart = echarts.init(document.getElementById('home-page-traffic_chart'))
      // Zeichnen Sie das Diagramm myChart.setOption({
        Titel:
          Text: „Heutige Anrufstatistik“
        },
        Tooltip: {
          Auslöser: 'Achse',
          Achsenzeiger:
            Typ: "Schatten"
          }
        },
        Netz: {
          links: '3%',
          rechts: '4%',
          unten: '3%',
          containLabel: wahr
        },
        xAchse: [
          {
            Typ: "Kategorie",
            Daten: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
            AchseTick: {
              alignWithLabel: wahr
            }
          }
        ],
        yAchse: [
          {
            Typ: "Wert"
          }
        ],
        Serie: [
          {
            Name: 'Direktzugriff',
            Typ: "Bar",
            Balkenbreite: '60%',
            Daten: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      })
      Fenster.onresize = Funktion () {
        myChart.resize()
      }
    })
    zurückkehren {
    }
  }

}