vue+echarts realisiert den Flusseffekt der China-Karte (detaillierte Schritte)
|
@vue+echarts realisiert den Flusseffekt der China-Karte #Schauen wir uns die Renderings an
Schritte: Führen Sie den Befehl aus : npm run echarts -s und drücken Sie die Eingabetaste
Wenn Sie diese Eingabeaufforderung sehen, war die Installation erfolgreich. PS: Wenn das Netzwerk nicht gut ist, wird empfohlen, den cnpm Taobao-Spiegel zu verwenden (globaler Terminalausführungsbefehl: npm i -g cnpm --registry=https://registry.npm.taobao.org)
china.js herunterladen Link: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q Extraktionscode: gjz4 Einführung E-Charts aus „echarts/lib/echarts“ importieren; importiere '@/map/china.js'; Schreiben Sie einen Echarts-Container zum Binden von Ref <div Klasse="Wrapper"> <div Klasse = "map-container" Stil = "Breite: 100 %; Höhe: 100 %" ref = "myEchart" ></div> </div> Option konfigurieren (erforderliche Kommentare sind markiert)
<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>Initialisieren Sie einfach echarts dies.myEchart = echarts.init(dies.$refs.myEchart); dies.myEchart.setOption(option); Dies ist das Ende dieses Artikels über vue+echarts, um den Flusseffekt einer China-Karte zu erzielen. Weitere relevante Inhalte zu vue+echarts China-Karten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Grafisches Tutorial zur Installation und Konfiguration von CentOS 7
>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7
![MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]](/upload/images/67cada719e1e2.webp)
Artikel empfehlen
Probleme und Lösungen bei der Verwendung der jsx-Syntax in React-vscode
Problembeschreibung Nach der Installation des Plu...
CocosCreator Skelettanimation Drachenknochen
CocosCreator Version 2.3.4 Drachenknochenanimatio...
Docker-Port-Mapping und externe Unzugänglichkeitsprobleme
Der Docker-Container stellt Dienste bereit und la...
uni-app implementiert NFC-Lesefunktion
In diesem Artikel wird der spezifische Code der U...
VS2019 stellt eine Verbindung zur MySQL8.0-Datenbank her – Tutorial mit Bildern und Text
1. Bereiten Sie zunächst VS2019 und die MySQL-Dat...
Einführung in vierzehn Fälle von SQL-Datenbank
Datenblatt /* Navicat SQLite-Datenübertragung Que...
Tutorial zur Installation der dekomprimierten Version von mysql-8.0.15-winx64 und drei Möglichkeiten zum Beenden
1. Von der offiziellen Website herunterladen und ...
CSS-Beispielcode zur Implementierung von Schiebetüren
Durch die sogenannte Sliding Door-Technologie läs...
Was tun, wenn Sie Ihr Passwort in MySQL 5.7.17 vergessen?
1. Skip-Grant-Tables zur Datei my.ini hinzufügen ...
So installieren Sie Nginx in CentOS7 und konfigurieren den automatischen Start
1. Laden Sie das Installationspaket von der offiz...
So verwenden Sie html2canvas, um HTML-Code in Bilder umzuwandeln
Konvertieren Sie Code in ein Bild mit html2canvas...
Eine kurze Analyse zum Festlegen des Anfangswerts des Linux-Roots
Ubuntu erlaubt standardmäßig keine Root-Anmeldung...
Verschachtelte Verwendungsoperation für MySQL-Aggregatfunktionen
Zweck: Verschachtelte Verwendung von MySQL-Aggreg...
So fragen Sie JSON in der Datenbank in MySQL 5.6 und darunter ab
Beim Speichern von Daten in MySQL werden manchmal...
Das Problem und die Lösung bei der Verwendung von Docker-Speicher und dem Verursachen von Exit, bei dem das Hochladen von Dateien auf den Server fehlschlägt
1. Problembeschreibung Der im Docker-Container in...