So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp

<Vorlage>
	<Klasse anzeigen="wrap" >
		<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
	</Ansicht>
</Vorlage>

<Skript>
importiere * als echarts von '@/common/echarts.min'; /*chart.min.js wird online angepasst*/
importiere * als henanJson von 'echarts/map/json/province/henan.json'; /*chart.min.js wird online angepasst*/
importiere mpvueEcharts aus „@/components/mpvue-echarts/src/echarts.vue“;


Standard exportieren {
	Daten() {
		zurückkehren {
			E-Charts,
		};
	},
	Komponenten:
		mpvueEcharts
	},
	beim Laden() {
		
	},
	Methoden: {
		renderMap(e) {
			var meineDaten = [
				{ Name: 'Stadt Zhengzhou', Wert: 100 },
				{ Name: 'Stadt Luoyang', Wert: 10 },
				{ Name: 'Kaifeng City', Wert: 20 },
				{ Name: 'Stadt Xinyang', Wert: 30 },
				{ Name: 'Zhumadian City', Wert: 40 },
				{ Name: 'Nanyang City', Wert: 41 },
				{ Name: 'Stadt Zhoukou', Wert: 15 },
				{ Name: 'Stadt Xuchang', Wert: 25 },
				{ Name: 'Stadt Pingdingshan', Wert: 35 },
				{ Name: 'Stadt Xinxiang', Wert: 35 },
				{ Name: 'Stadt Luohe', Wert: 35 },
				{ Name: 'Shangqiu City', Wert: 35 },
				{ Name: 'Stadt Sanmenxia', Wert: 35 },
				{ Name: 'Stadt Jiyuan', Wert: 35 },
				{ Name: 'Stadt Jiaozuo', Wert: 35 },
				{ Name: 'Stadt Anyang', Wert: 35 },
				{ Name: 'Hebi City', Wert: 35 },
				{ Name: 'Stadt Puyang', Wert: 35 },
				{ Name: 'Kaifeng City', Wert: 45 }
			];
			lass { Leinwand, Breite, Höhe } = e;
			echarts.setCanvasCreator(() => Leinwand);
			const chart = echarts.init(canvas, null, {
				Breite: Breite,
				Höhe: Höhe
			});
			echarts.registerMap('henan', henanJson);
			canvas.setChart(Diagramm);
			var optionMap = {
				Tooltip: {
					Auslöser: 'Artikel',
					Formatierer: '{b}: {c}mg/m³'
				},
				//Kleines Navigationssymbol links visualMap: {
					anzeigen:wahr,
					Mindestwert: 0,
					max: 100,
					links rechts',
					ausrichten:'horizontal',
				},
				//Konfigurationseigenschaftenreihe: [
					{
						Typ: "Karte",
						Kartentyp: "henan",
						Etikett: {
							normal: {
								zeigen: wahr
							},
							Schwerpunkt:
								Textstil: {
									Farbe: '#fff'
								}
							}
						},
						Artikelstil: {
							normal: {
								Rahmenfarbe: '#389BB7',
								Bereichsfarbe: '#fff'
							},
							Schwerpunkt:
								Bereichsfarbe: '#389BB7',
								Rahmenbreite: 0
							}
						},
						Animation: falsch,
						Daten: meineDaten //Daten }
				]
			};
			//E-Charts-Instanz initialisieren chart.setOption(optionMap);
			dies.$refs.mapChart.setChart(Diagramm);
		}
	}
};
</Skript>

<style scoped lang="scss">
.wickeln {
  Breite: 100 %;
  Höhe: 400px;
}
</Stil>