Das Balkendiagramm von Vue + Echart realisiert Statistiken zu Epidemiedaten

npm installiere echarts --save

Vue von „vue“ importieren
importiere echarts von 'echarts' //Hier muss darauf hingewiesen werden, dass möglicherweise ein Fehler auftritt. Sie können die folgende Methode verwenden: Vue.prototype.$echarts = echarts

Vue von „vue“ importieren
importiere * als echarts von 'echarts' //Hier liegt der Unterschied: Vue.prototype.$echarts = echarts

 Plugins: ['~plugins/echarts']
 //Ich habe nur geschrieben, um dies hinzuzufügen, das bedeutet nicht, dass es hier nur dies gibt//Sie können auch die Form '@/plugins/echarts' verwenden, sie sind fast gleich

<Vorlage>
  <div id="echarts">
    <div id="meinChart"></div> 
  </div>
</Vorlage>
<Skripttyp="text/javascript">
Standard exportieren {
  Name: "Echarts",
  Daten() {
    zurückkehren {};
  },
  Methoden: {
      echartsInit() { //Definieren Sie eine Methode zum Erstellen eines Diagramms let myChart = this.$echarts.init(document.getElementById("myChart"));
      
      myChart.setOption({
        Titel:
          Text: „Balkendiagramm von echarts zur Darstellung von Epidemiestatistiken“,
          Textausrichtung: "auto",
          links: 'Mitte'
        },
        Tooltip: {},
        // Provinz (horizontale Achse)
        x-Achse:
          Daten: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
          //Daten: this.areaName, //Dies sind die endgültigen Daten, die angeben, dass Sie den Test starten können, ohne diesen Typ zu verwenden: „Kategorie“,
          Achsenbezeichnung: {
            rotate: -45, // Um ​​30 Grad drehen, sonst wird die horizontale Achse nicht vollständig angezeigt show: true, // Diese Codezeile steuert, ob der Text auf der x-Achse angezeigt wird},
        },
        yAchse: {},
        // Bestätigte Nummernserie: [
          {
            Name: „Gesamtzahl der bestätigten Fälle“,
            Typ: "Bar",
            //data: this.areaConfirm, //Dies sind die endgültigen Daten, die angeben, dass Sie den Test ohne diese Daten starten können: [120, 200, 150, 80, 70, 110, 130],
          },
        ],
      });
    },
  }
  //mounted wird aufgerufen, nachdem die Vorlage in HTML gerendert wurde, normalerweise nachdem die Initialisierungsseite abgeschlossen ist // und dann werden einige notwendige Operationen am HTML-DOM-Knoten durchgeführt mounted() {
  	dies.echartsInit();
  },
  }
</Skript>
<Stilbereich>
	#meinChart {
	  Breite: 100 %;
	  Höhe: 300px;
	  Rand links: automatisch;
	  Rand rechts: automatisch;
	}
</Stil>

npm installiere axios @nuxtjs/axios @nuxtjs/proxy

modul.exporte = {
//Ich zeige die hinzuzufügenden Teile, nicht alle Module: ["@nuxtjs/axios"],

  Achsen:
    Proxy: wahr
  },

  Proxy: {
    '/api/': {
    Ziel: 'https://view.inews.qq.com', //Diese Website ist Open Source und kann den Datenpfad anfordern. Neu schreiben: {
    '^/api/': '/',
    changeOrigin: true
    }
   }
  },
}

    getData() {
      dies.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => {
        //console.log(JSON.parse(data.data.replace('\\"', "'")));
        dieser.Bereich = JSON.parse(
          Daten.Daten.Ersetzen('\\"', "'")
        ).areaTree[0].children;
        // Gebietsname this.areaName = this.area.map((o) => {
          gibt o.name zurück;
        });
        //Gesamtzahl der bestätigten Fälle this.areaConfirm = this.area.map((o) => {
          Rückgabewert o.total.confirm;
        });
        Konsole.log(diesen.Bereich bestätigen);
        // Aktuelle Anzahl bestätigter Fälle hh Es scheint, dass ich es am Ende nicht verwendet habe. Wenn Sie es brauchen, können Sie darauf verweisen this.areaNowConfirm = this.area.map((o) => {
          Rückgabewert o.total.nowConfirm;
        });
        dies.echartsInit();
      });
    },

<Vorlage>
  <div id="echarts">
    <div id="meinChart"></div>
  </div>
</Vorlage>
<Skripttyp="text/javascript">
Standard exportieren {
  Name: "Echarts",
  Daten() {
    zurückkehren {
      Bereich: [],
      Bereichsname: [],
      Bereich bestätigen: [],
      BereichJetztBestätigen: [],
    };
  },
  
  Methoden: {
    getData() {
      dies.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({ data }) => {
        Konsole.log(JSON.parse(data.data.replace('\\"', "'")));
        dieser.Bereich = JSON.parse(
          Daten.Daten.Ersetzen('\\"', "'")
        ).areaTree[0].children;
        // Gebietsname this.areaName = this.area.map((o) => {
          gibt o.name zurück;
        });
        //Gesamtzahl der bestätigten Fälle this.areaConfirm = this.area.map((o) => {
          Rückgabewert o.total.confirm;
        });
        Konsole.log(diesen.Bereich bestätigen);
        // Aktuell bestätigte Fälle this.areaNowConfirm = this.area.map((o) => {
          Rückgabewert o.total.nowConfirm;
        });
        dies.echartsInit();
      });
    },
    echartsInit() {
      Lassen Sie myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        Titel:
          Text: „Balkendiagramm von echarts zur Darstellung von Epidemiestatistiken“,
          Textausrichtung: "auto",
          links: 'Mitte'
        },
        Tooltip: {},
        // Provinz xAchse: {
          Daten: this.areaName,
          Typ: "Kategorie",
          Achsenbezeichnung: {
            rotate: -45, // Um ​​30 Grad drehen show: true, // Diese Codezeile steuert, ob der Text auf der x-Achse angezeigt wird},
        },
        yAchse: {},
        // Bestätigte Nummernserie: [
          {
            Name: „Gesamtzahl der bestätigten Fälle“,
            Typ: "Bar",
            Daten: this.areaConfirm,
          },
        ],
      });
    },
  },
  montiert() {
    dies.getData();
    dies.echartsInit();
  },
};
</Skript>
<Stilbereich>
#meinChart {
  Breite: 100 %;
  Höhe: 300px;
  Rand links: automatisch;
  Rand rechts: automatisch;
}
</Stil>