vue+echarts realisiert den Flusseffekt der China-Karte (detaillierte Schritte)

E-Charts aus „echarts/lib/echarts“ importieren;
importiere '@/map/china.js';

<div Klasse="Wrapper">
 <div Klasse = "map-container" Stil = "Breite: 100 %; Höhe: 100 %" ref = "myEchart" ></div>
</div>

<Skript>
Lassen Sie echarts = erfordern ("echarts");
importiere "echarts/lib/component/markLine";
montiert(){
 let Daten = [
 			{ "name": "Peking", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
 			"Name": "Tianjin",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "248"
 		}, { "name": "Hebei", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
 			"Name": "Shanxi",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "250"
 		}, { "name": "Innere Mongolei", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
 			"Name": "Liaoning",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "252"
 		}, { "Name": "Jilin", "Datenanzahl": [0, 0, 0, 0, 0, 0, 0], "ID": "253" }, {
 			"Name": "Heilongjiang",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "254"
 		}, { "Name": "Shanghai", "Datenanzahl": [0, 1, 0, 0, 0, 0, 0], "ID": "255" }, {
 			"Name": "Jiangsu",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "256"
 		}, { "name": "Daten", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
 			"Name": "Anhui",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "258"
 		}, { "Name": "Fujian", "Datenanzahl": [0, 0, 0, 0, 0, 0, 0], "ID": "259" }, {
 			"Name": "Jiangxi",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "260"
 		}, { "Name": "Shandong", "Datenanzahl": [14235, 820, 0, 35, 0, 0, 4], "ID": "261" }, {
 			"Name": "Henan",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "262"
 		}, { "name": "Hubei", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
 			"Name": "Hunan",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "264"
 		}, { "Name": "Guangdong", "Datenanzahl": [0, 0, 0, 0, 0, 0, 0], "ID": "265" }, {
 			"Name": "Guangxi",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "266"
 		}, { "Name": "Hainan", "Datenanzahl": [0, 0, 0, 0, 0, 0, 0], "ID": "267" }, {
 			"Name": "Chongqing",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "268"
 		}, { "Name": "Sichuan", "Datenanzahl": [0, 0, 0, 0, 0, 0, 0], "ID": "269" }, {
 			"Name": "Guizhou",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "270"
 		}, { "Name": "Yunnan", "Datenanzahl": [0, 0, 0, 0, 0, 0, 0], "ID": "271" }, {
 			"Name": "Tibet",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "272"
 		}, { "name": "Nein", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
 			"Name": "Gansu",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "274"
 		}, { "Name": "Qinghai", "Datenanzahl": [0, 0, 0, 0, 0, 0, 0], "ID": "275" }, {
 			"Name": "Ningxia",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "276"
 		}, { "Name": "Xinjiang", "Datenanzahl": [0, 0, 0, 0, 0, 0, 0], "ID": "277" }, {
 			"Name": "Taiwan",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "278"
 		}, { "name": "Hongkong", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
 			"Name": "Macau",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "280"
 }]
 let chinaGeoCoordMap = {
 					'Heilongjiang': [127.9688, 45.368,1],
 					'Innere Mongolei': [110.3467, 41.4899,1],
 					'Jilin': [125.8154, 44.2584,1],
 					'Peking': [116.4551, 40.2539,2],
 					'Liaoning': [123.1238, 42.1216,1],
 					'Hebei': [114.4995, 38.1006,1],
 					'Tianjin': [117.4219, 39.4189,1],
 					'Shanxi': [112.3352, 37.9413,1],
 					'Shaanxi': [109.1162, 34.2004,1],
 					'Gansu': [103.5901, 36.3043,1],
 					'Ningxia': [106.3586, 38.1775,1],
 					'Qinghai': [101.4038, 36.8207,1],
 					'Xinjiang': [87.9236, 43.5883,1],
 					'Tibet': [91.11, 29.97,1],
 					'Sichuan': [103.9526, 30.7617,1],
 					'Chongqing': [108.384366, 30.439702,1],
 					'Shandong': [117.1582, 36.8701,1],
 					'Henan': [113.4668, 34.6234,1],
 					'Jiangsu': [118.8062, 31.9208,1],
 					'Anhui': [117.29, 32.0581,1],
 					'Hubei': [114.3896, 30.6628,1],
 					'Zhejiang': [119.5313, 29.8773,1],
 					'Fujian': [119.4543, 25.9222,1],
 					'Jiangxi': [116.0046, 28.6633,1],
 					'Hunan': [113.0823, 28.2568,1],
 					'Guizhou': [106.6992, 26.7682,1],
 					'Yunnan': [102.9199, 25.4663,1],
 					'Guangdong': [113.12244, 23.009505,1],
 					'Guangxi': [108.479, 23.1152,1],
 					'Hainan': [110.3893, 19.8516,1],
 					'Shanghai': [121.4648, 31.2891,1],
 					'Taiwan': [120.991676054688, 24.7801149726563,1],
 					'Macau': [113.33, 22.11,1],
 					'Hongkong': [114.15, 22.15,1]
 }
 für (lass i=0;i<data.length;i++){
 			var da = chinaGeoCoordMap[data[i].name];
 			chinaGeoCoordMap[Daten[i].Name]=[...da,...Daten[i].DatenAnzahl];
 }
 let chinaDatas = [
 			[{
 			Name: "Peking",
 			Wert: 2
 			}], [{
 			Name: 'Heilongjiang',
 			Wert: 1
 			}], [{
 			Name: "Innere Mongolei",
 			Wert: 1
 			}], [{
 			Name: 'Jilin',
 			Wert: 1
 			}], [{
 			Name: 'Liaoning',
 			Wert: 1
 			}], [{
 			Name: 'Hebei',
 			Wert: 1
 			}], [{
 			Name: 'Tianjin',
 			Wert: 1
 			}], [{
 			Name: 'Shanxi',
 			Wert: 1
 			}], [{
 			Name: "Shaanxi",
 			Wert: 1
 			}], [{
 			Name: 'Gansu',
 			Wert: 1
 			}], [{
 			Name: 'Ningxia',
 			Wert: 1
 			}], [{
 			Name: 'Qinghai',
 			Wert: 1
 			}], [{
 			Name: „Xinjiang“,
 			Wert: 1
 			}], [{
 			Name: "Tibet",
 			Wert: 1
 			}], [{
 			Name: "Sichuan",
 			Wert: 1
 			}], [{
 			Name: "Chongqing",
 			Wert: 1
 			}], [{
 			Name: "Shandong",
 			Wert: 1
 			}], [{
 			Name: "Henan",
 			Wert: 1
 			}], [{
 			Name: 'Jiangsu',
 			Wert: 1
 			}], [{
 			Name: 'Anhui',
 			Wert: 1
 			}], [{
 			Name: 'Hubei',
 			Wert: 1
 			}], [{
 			Name: 'Zhejiang',
 			Wert: 1
 			}], [{
 			Name: "Fujian",
 			Wert: 1
 			}], [{
 			Name: 'Jiangxi',
 			Wert: 1
 			}], [{
 			Name: 'Hunan',
 			Wert: 1
 			}], [{
 			Name: 'Guizhou',
 			Wert: 1
 			}], [{
 			Name: "Guangdong",
 			Wert: 1
 			}], [{
 			Name: "Guangxi",
 			Wert: 1
 			}], [{
 			Name: "Yunnan",
 			Wert: 1
 			}], [{
 			Name: "Hainan",
 			Wert: 1
 			}], [{
 			Name: 'Shanghai',
 			Wert: 1
 			}], [{
 			Name: "Taiwan",
 			Wert: 1
 			}], [{
 			Name: 'Macao',
 			Wert: 1
 			}], [{
 			Name: 'Hong Kong',
 			Wert: 1
 			}]
 ]
 let convertData = Funktion (Daten) {
 			var res = [];
 			für (var i = 0; i < Datenlänge; i++) {
 			var Datenelement = Daten[i];
 			var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
 			var toCoord = [117.1582, 36.8701];
 			wenn (vonKoord && bisKoord) {
 				res.push([{
 				Koordinate: vonKoordinate,
 				Wert: dataItem[0].value
 				}, {
 				Koordinate: zuKoordinate,
 				}]);
 			}
 			}
 			Rückgabewert;
 };
 lass SerieA = []
 SerieA.push(
 	{
 	Typ: 'Linien',
 	z-Ebene: 1,
 	Wirkung:
 		zeigen: wahr,
 		period: 4, //Pfeil zeigt auf Geschwindigkeit, je kleiner der Wert, desto höher die Geschwindigkeit trailLength: 0.3, //Spezialeffekt-Spurlänge [0,1] je größer der Wert, desto länger die Spur symbol: ‚Pin‘, //Pfeil-Symbol symbolSize: 8, //Symbolgröße color: ‚#2a6fd9‘
 	},
 	Linienstil:
 		normal: {
 		Farbe: '#003262',
 		width: 1, // Breite der Weglinie opacity: .9, // Transparenz der Weglinie curveness: .3 // Geradlinigkeit der Weglinie }
 	},
 	Daten: convertData(chinaDatas)
 	},
 	{
 	Typ: 'effectScatter',
 	Koordinatensystem: "geo",
 	z-Ebene: 2,
 	rippleEffect: { // Welleneffekt period: 2, // Animationszeit, je kleiner der Wert, desto höher die Geschwindigkeit brushType: 'fill', // Wellenzeichenmethode stroke, fill
 		Maßstab: 6, // Maximale Grenze des Wellenrings, je größer der Wert, desto größer die Wellenfarbe: „#003262“ // Die Farbe der Wellen, die Standardeinstellung ist die Farbe der verstreuten Punkte.
 	},
 	Etikett: {
 		normal: {
 		zeigen: wahr,
 		Farbe: '#283c64',
 		Position: „oben“, // Anzeigeposition Offset: [0, 0], // Offset-Einstellung Formatierer: Funktion (Parameter) { // Kreis-Anzeigetext Return Params.Data.Name
 		},
 		Schriftgröße: 13
 		},
 		Schwerpunkt:
 		anzeigen:false
 		}
 	},
 	Symbol: 'Kreis',
 	symbolSize: Funktion (Wert) {
 		return 1 + val[2] * 5 // Ringgröße },
 	Artikelstil: {
 	 Farbe: "#2a6fd9",
   Schattenunschärfe: 4,
   Schattenfarbe: "#2a6fd9",
 	},
 	Daten: chinaDatas.map(Funktion (Datenelement) {
 		zurückkehren {
 		Name: dataItem[0].name,
 		Wert: chinaGeoCoordMap[dataItem[0].name],
 		Artikelstil: {
 			 Farbe: "#2a6fd9",
   Schattenunschärfe: 4,
   Schattenfarbe: "#2a6fd9",
 		}
 		}
 	})
 	},
 	//Angriffspunkt {
 	Typ: "Scatter",
 	Koordinatensystem: "geo",
 	z-Ebene: 2,
 	Etikett: {
 		normal: {
 		anzeigen: falsch,
 		Position: 'rechts',
 		Farbe: 'rot',
 		Formatierer: "{b}",
 		Textstil: {
 			Farbe: "rot"
 		}
 		},
 		Schwerpunkt:
 		zeigen: wahr,
 		Farbe: "rot"
 		}
 	},
 	Symbol: 'Stecknadel',
 	Symbolgröße: 0,
 	Daten: [{
 		Name: "Shandong",
 		Wert: chinaGeoCoordMap['山东'].concat([10]),
 	}],
 	}
 );

 let-Option = {
 	Tooltip: {
 		zeigen: wahr,
 		Auslöser: 'Artikel',
 		Hintergrundfarbe: '#2e65fd',
 		Rahmenfarbe: '#FFFFCC',
 		Anzeigeverzögerung: 0,
 		Ausblenden der Verzögerung: 0,
 		eingebbar: true,
 		Übergangsdauer: 0,
 		extraCssText: 'z-index:100',
 		Formatierer: Funktion (Parameter, Ticket, Rückruf) {
 			console.log(Parameter)
 			// Erweitern Sie den anzuzeigenden Inhalt entsprechend dem Geschäft var res = ''
 			Variablenname = Parametername
 			var Wert1 = Params.Wert[Params.SeriesIndex + 3] || 0
 			var Wert2 = Params.Wert[Params.SeriesIndex + 4] || 0
 			var Wert3 = Params.Wert[Params.SeriesIndex + 5] || 0
 			var Wert4 = Params.Wert[Params.SeriesIndex + 6] || 0
 			var Wert5 = Params.Wert[Params.SeriesIndex + 7] || 0
 			var Wert6 = Params.Wert[Params.SeriesIndex + 8] || 0
 			var Wert7 = Params.Wert[Params.SeriesIndex + 9] || 0
 			res = "<span style='color:#fff'>" + Name + '</span>' +
 					'<br/>' +
 					'<i class="icon icon-xuesheng"></i> Schüler:' + Wert1+
 					'<br/>' +
 					'<i class="icon icon-laoshi_huaban"></i> Lehrer:'+value2+
 					'<br/>' +
 					'<i class="icon icon-baoanxiehui"></i> Verband der Jugendunternehmer:'+value3+
 					'<br/>' +
 					'<i class="icon icon-rencaizhengce"></i> Junge Unternehmer:'+value4+
 					'<br/>' +
 					'<i class="icon icon-investmentinstitutions"></i> Top 10 Branchen:'+value5+
 					'<br/>' +
 					'<i class="icon icon-caozuoyaoqingjiabin"></i> Gipfelgäste:'+value6+
 					'<br/>' +
 					'<i class="icon icon-rencai"></i> Hochkarätige Talente:'+value7
 			Rückgabewert
 		}
 	},
 	  Regionen:
   //Das Südchinesische Meer verstecken {
   Name: „Inseln im Südchinesischen Meer“,
   Artikelstil: {
    normal: {
    Rahmenfarbe: "rot",
    borderWidth: 20, //Stelle die Deckkraft des äußeren Rahmens ein: 0, //Wenn sie 0 ist, wird die Grafik nicht gezeichnet},
   },
   Etikett: {
    anzeigen: false, // Text ausblenden},
   },
 	 ],
  Hintergrundfarbe: "rgba(0, 0, 0, 0.1)",
 	geo: {
 	Karte: 'China',
 	Zoom: 1,2,
 	Etikett: {
 		normal: {
 		Farbe: '#1e2d4c'
 		},
 		Schwerpunkt:
 		anzeigen:false
 		}
 	},
 	roam: false, // Gibt an, ob eine Skalierung zulässig ist itemStyle: {
   normal: {
   //Setze die Rahmenfarbe des Kartenrahmens: "#003262",
   borderWidth: 11, // Äußeren Rand festlegen},
   Schwerpunkt:
   Bereichsfarbe: "#003262",
   Schattenfarbe: "#003262",
   },
  },
 	Artikelstil: {
 		normal: {
 		color: '', // Kartenhintergrundfarbe borderColor: '#5ea8ff', // Provinz- und Gemeindegrenzlinie 00fcff 516a89
 		Rahmenbreite: 1
 		},
 		Schwerpunkt:
 			Farbe: '#81acff' // schwebender Hintergrund }
 	}
 	},
 	Serie: Serie A
 }
 }
 </Skript>

dies.myEchart = echarts.init(dies.$refs.myEchart);
dies.myEchart.setOption(option);