Vue+ECharts realisiert das Zeichnen einer China-Karte sowie die automatische Drehung und Hervorhebung von Provinzen

<Vorlage>
  <div Klasse="echart">
    <div Klasse="Inhalt">
      <div id="map_cn"></div>
    </div>
  </div>
</Vorlage>
 
<Skript>
  E-Charts aus „E-Charts“ importieren;
  import 'echarts/map/js/china.js' //Dieser Schritt muss eingeführt werden export default {
    Daten() {
      zurückkehren {
        //Daten in der Karte dataList: [
          {
            Name: „Inseln im Südchinesischen Meer“,
            Wert: 25,
          },
          {
            Name: "Peking",
            Wert: 71,
          },
          {
            Name: "Tianjin",
            Wert: 52,
          },
          {
            Name: "Shanghai",
            Wert: 14,
          },
          {
            Name: "Chongqing",
            Wert: 50,
          },
          {
            Name: "Hebei",
            Wert: 20,
          },
          {
            Name: "Henan",
            Wert: 30,
          },
          {
            Name: "Yunnan",
            Wert: 55,
          },
          {
            Name: "Liaoning",
            Wert: 50,
          },
          {
            Name: "Heilongjiang",
            Wert: 40,
          },
          {
            Name: "Hunan",
            Wert: 6,
          },
          {
            Name: "Anhui",
            Wert: 96,
          },
          {
            Name: "Shandong",
            Wert: 75,
          },
          {
            Name: "Xinjiang",
            Wert: 45,
          },
          {
            Name: "Jiangsu",
            Wert: 15,
          },
          {
            Name: "Zhejiang",
            Wert: 8,
          },
          {
            Name: "Jiangxi",
            Wert: 78,
          },
          {
            Name: "Hubei",
            Wert: 78,
          },
          {
            Name: "Guangxi",
            Wert: 36,
          },
          {
            Name: "Gansu",
            Wert: 25,
          },
          {
            Name: "Shanxi",
            Wert: 140,
          },
          {
            Name: "Innere Mongolei",
            Wert: 85,
          },
          {
            Name: "Shaanxi",
            Wert: 85,
          },
          {
            Name: "Jilin",
            Wert: 74,
          },
          {
            Name: "Fujian",
            Wert: 20,
          },
          {
            Name: "Guizhou",
            Wert: 74,
          },
          {
            Name: "Guangdong",
            Wert: 47,
          },
          {
            Name: "Qinghai",
            Wert: 45,
          },
          {
            Name: "Tibet",
            Wert: 41,
          },
          {
            Name: "Sichuan",
            Wert: 3,
          },
          {
            Name: "Ningxia",
            Wert: 7,
          },
          {
            Name: "Hainan",
            Wert: 7,
          },
          {
            Name: "Taiwan",
            Wert: 200,
          },
          {
            Name: "Hongkong",
            Wert: 2,
          },
          {
            Name: "Macau",
            Wert: 5,
          }
        ],
        //Geben Sie die Konfigurationselemente und Datenoptionen des Diagramms an: {
          //Titelkomponente title: {
            zeigen: wahr,
            Text: „Anzahl der Touristenattraktionen (bewertet) in jeder Provinz des Landes“,
            Untertext: „Stand: Dezember 2021“,
            links: "Mitte",
            oben: 16,
          },
          //Tooltip der Eingabeaufforderungskomponente: {
            zeigen: wahr,
            //Triggertyp: Datenelement-Grafiktrigger Trigger: 'item',
            Polsterung: 10,
            Rahmenbreite: 1,
            Rahmenfarbe: '#409eff',
            Hintergrundfarbe: 'rgba(255,255,255,0.4)',
            Textstil: {
              Farbe: '#000000',
              Schriftgröße: 12
            },
            //Formatierungsprogramm für Eingabeaufforderungsinhalte: (e) => {
              lass Daten = e.Daten;
              //Hier wird die Anzahl der Attraktionen jedes Levels als zufällige Ganzzahl zwischen 0 und 10 ausgedrückt data.five = Math.random() * 10 | 0;
              Daten.vier = Math.random() * 10 | 0;
              Daten.drei = Math.random() * 10 | 0;
              daten.zwei = Math.random() * 10 | 0;
              Daten.eins = Math.random() * 10 | 0;
              //Anzahl der Attraktionen – die Summe der fünf Ebenen data.number = data.five + data.four + data.three + data.two + data.one;
              // Zeichenfolgenvorlage let context = `
               <div>
                   <p style="Zeilenhöhe: 30px; Schriftstärke: 600">${data.name}</p>
                   <p><span>Anzahl der Attraktionen: </span><span>${data.number}</span></p>
                   <p><span>Stufe 5A: </span><span>${data.five}</span></p>
                   <p><span>4A-Ebene: </span><span>${data.four}</span></p>
                   <p><span>Stufe 3A: </span><span>${data.three}</span></p>
                   <p><span>Ebene 2A: </span><span>${data.two}</span></p>
                   <p><span>Ebene 1A: </span><span>${data.one}</span></p>
               </div>
            `;
              Kontext zurückgeben;
            }
          },
          //Visuelle Mapping-Komponente (untere linke Ecke)
          visuelle Karte:
            zeigen: wahr,
            links: 26,
            unten: 40,
            showLabel: wahr,
            // Ob der Ziehpunkt angezeigt werden soll (der Ziehpunkt kann gezogen werden, um den ausgewählten Bereich anzupassen)
            berechenbar: falsch,
            //Ob beim Ziehen in Echtzeit aktualisiert werden soll: true,
            ausrichten: 'links',
            //Die durch die einzelnen Farbstücke dargestellten Bereiche: [
              {
                gte: 100,
                Bezeichnung: "> 100",
                Farbe: "#FDB669"
              },
              {
                gte: 50,
                lt: 99,
                Bezeichnung: "50 - 99",
                Farbe: "#FECA7B"
              },
              {
                gte: 30,
                lt: 49,
                Bezeichnung: "30 - 49",
                Farbe: "#FEE191"
              },
              {
                gte: 10,
                lt: 29,
                Bezeichnung: "10 - 29",
                Farbe: "#FFF0A8"
              },
              {
                lt: 9,
                Bezeichnung: '< 10',
                Farbe: "#FFFFBF"
              }
            ]
          },
          //Geographisches Koordinatensystem Komponente geo: {
            //Kartenname registriert mit registerMap map: "china",
            //Ob Mauszoom und Schwenken aktiviert werden sollen: true,
            //Aktuelles perspektivisches Zoomverhältnis Zoom: 1,
            //Roller-Zoom-Limit-Steuerung scaleLimit: {
              min: 1, //mindestens 1 mal max: 3 //maximal 3 mal},
            //Der Abstand zwischen der Kartenkomponente und der Containeroberseite: 90,
            links: 'Mitte',
            //Textbeschriftung auf der Grafikbeschriftung: {
              zeigen: wahr,
              Schriftgröße: "11"
            },
            //Polygonaler Grafikstil des Kartenbereichs itemStyle: {
              Rahmenfarbe: "rgba(0, 0, 0, 0,2)",
              Schattenfarbe: 'rgba(0, 0, 0, 0,2)',
              Schattenunschärfe: 10,
              //Polygon- und Beschriftungsstile im hervorgehobenen Zustand (nachdem die Maus hineinbewegt wurde) Hervorhebung: {
                Bereichsfarbe: "#f98333",
                SchattenOffsetX: 2,
                SchattenOffsetY: 2,
              },
            }
          },
          Serie: [
            {
              Typ: "Karte",
              wandern: wahr,
              GeoIndex: 0,
              Daten: '',
              Etikett: {
                zeigen: wahr,
              }
            }
          ]
        },
      };
    },
 
    Methoden: {
      //Definiere die Methode draw_map um die Karte von China zu zeichnen draw_map() {
        Lassen Sie myChart = this.$echarts.init(document.getElementById('map_cn'));
        //Karussellanzeige hervorheben var hourIndex = 0;
        var KarussellZeit = null;
        //setInterval() kann eine Funktion oder einen Ausdruck in einer Schleife alle angegebenen Millisekunden aufrufen, bis clearInterval ihn löscht. //Nach der Verwendung der setInterval-Methode müssen Sie anstelle der Schreibfunktion eine Pfeilfunktion verwenden, da die Daten in data sonst später nicht in der Methode aufgerufen werden können. //carouselTime = setInterval(function(){ //Falsche Schreibweise carouselTime = setInterval(() => {
          //dispatchAction echarts API: Diagrammverhalten auslösen myChart.dispatchAction({
            Typ: "downplay", //downplay löscht die hervorgehobene Datengrafik seriesIndex: 0
          });
          meinChart.dispatchAction({
            Typ: "Highlight", //die angegebene Datengrafik hervorheben seriesIndex: 0, //Serienindex
            dataIndex: hourIndex //Datenindex
          });
          meinChart.dispatchAction({
            Typ: "showTip", //showTip zeigt die Eingabeaufforderungsbox an seriesIndex: 0,
            Datenindex: Stundenindex
          });
          StundenIndex++;
          //Nachdem Sie bis zu den letzten Daten im Array durchgelaufen sind, führen Sie eine weitere Schleife aus, wenn (Stundenindex > this.dataList.length) {
            StundenIndex = 0;
          }
        }, 3000);
        //Stoppe das Karussell, wenn die Maus in die Komponente bewegt wirdmyChart.on("mousemove", (e) => {
          clearInterval(carouselTime); //Schleife löschen myChart.dispatchAction({
            Typ: "herunterspielen",
            SerienIndex: 0,
          });
          meinChart.dispatchAction({
            Typ: "Hervorhebung",
            SerienIndex: 0,
            Datenindex: e.Datenindex
          });
          meinChart.dispatchAction({
            Typ: "showTip",
            SerienIndex: 0,
            Datenindex: e.Datenindex
          });
        });
        //Karussell fortsetzen, wenn die Maus aus der Komponente herausbewegt wirdmyChart.on("mouseout", () => {
          KarussellZeit = setzeIntervall(() => {
            meinChart.dispatchAction({
              Typ: "herunterspielen",
              SerienIndex: 0,
 
            });
            meinChart.dispatchAction({
              Typ: "Hervorhebung",
              SerienIndex: 0,
              Datenindex: Stundenindex
            });
            meinChart.dispatchAction({
              Typ: "showTip",
              SerienIndex: 0,
              Datenindex: Stundenindex
            });
            StundenIndex++;
            if (Stundenindex > diese.Datenliste.Länge) {
              StundenIndex = 0;
            }
          }, 3000);
        });
 
        //Karte anzeigen myChart.setOption(this.option);
      },
 
      //Echart-Konfiguration ändern setEchartOption() {
        diese.Option.Serie[0].Data = diese.Datenliste;
      },
    },
    erstellt() {
      dies.setEchartOption();
    },
    montiert() {
      dies.$nextTick(() => {
        dies.draw_map();
      });
    }
  };
</Skript>
 
<style scoped lang="weniger">
  .echart {
    Breite: 100 %;
 
    .Inhalt {
      Breite: 95,8 %;
      Höhe: 100px;
      Rand: automatisch;
 
      #map_cn {
        Breite: 65 %;
        Höhe: 7rem;
        Hintergrundfarbe: #eaeaea;
        Rand: automatisch;
      }
    }
  }
</Stil>