uniappを使用してWeChatミニプログラムでEChartsを使用する方法

<テンプレート>
	<view class="wrap">
		<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
	</ビュー>
</テンプレート>

<スクリプト>
import * as echarts from '@/common/echarts.min'; /*chart.min.js はオンラインでカスタマイズされます*/
import * as henanJson from 'echarts/map/json/province/henan.json'; /*chart.min.js はオンラインでカスタマイズされます*/
'@/components/mpvue-echarts/src/echarts.vue' から mpvueEcharts をインポートします。


エクスポートデフォルト{
	データ（） {
		戻る {
			echarts、
		};
	},
	コンポーネント:
		mpvueEcharts
	},
	オンロード() {
		
	},
	メソッド: {
		レンダリングマップ(e) {
			var mydata = [
				{ 名前: '鄭州市'、値: 100 },
				{ 名前: '洛陽市', 値: 10 },
				{ 名前: '開封市', 値: 20 },
				{ 名前: '信陽市', 値: 30 },
				{ 名前: '駐馬店市'、値: 40 },
				{ 名前: '南陽市', 値: 41 },
				{ 名前: '周口市', 値: 15 },
				{ 名前: '許昌市', 値: 25 },
				{ 名前: '平頂山市', 値: 35 },
				{ 名前: '新郷市', 値: 35 },
				{ 名前: '洛河市', 値: 35 },
				{ 名前: '商丘市'、値: 35 },
				{ 名前: '三門峡市', 値: 35 },
				{ 名前: '済源市', 値: 35 },
				{ 名前: '焦作市', 値: 35 },
				{ 名前: '安養市'、値: 35 },
				{ 名前: '鶴壁市'、値: 35 },
				{ 名前: '濮陽市', 値: 35 },
				{ 名前: '開封市'、値: 45 }
			];
			{ キャンバス、幅、高さ } = e とします。
			echarts.setCanvasCreator(() => キャンバス);
			const chart = echarts.init(canvas, null, {
				幅: 幅、
				高さ: 高さ
			});
			echarts.registerMap('henan', henanJson);
			キャンバスにチャートを設定します。
			var オプションマップ = {
				ツールチップ: {
					トリガー: 'アイテム',
					フォーマッタ: '{b}: {c}mg/m³'
				},
				// 左側の小さなナビゲーションアイコン visualMap: {
					表示:true、
					最小: 0,
					最大: 100,
					左: '右'、
					方向:'水平',
				},
				//構成プロパティシリーズ: [
					{
						タイプ: 'マップ'、
						マップタイプ: '河南',
						ラベル: {
							普通： {
								表示: 真
							},
							強調：
								テキストスタイル: {
									色: '#fff'
								}
							}
						},
						アイテムスタイル: {
							普通： {
								境界線の色: '#389BB7',
								エリアカラー: '#fff'
							},
							強調：
								エリアカラー: '#389BB7',
								境界線の幅: 0
							}
						},
						アニメーション: false、
						データ: mydata //データ }
				]
			};
			//echartsインスタンスを初期化します chart.setOption(optionMap);
			this.$refs.mapChart.setChart(チャート);
		}
	}
};
</スクリプト>

<スタイル スコープ lang="scss">
。包む {
  幅: 100%;
  高さ: 400px;
}
</スタイル>