vue+vuex+axios+echarts畫一個動态更新的中國地圖

1.按需求引入與中國地圖相關的Echarts圖表群組。

2.引入中國地圖JS檔案，會自動注冊地圖；也可以通過axios方式引入json檔案，需要手動注冊<code>echarts.registerMap('china', chinaJson.data)</code>。

3.準備一個有固定寬高的DOM容器并在mounted裡面初始化一個echarts執行個體。

DOM容器

初始化echarts執行個體

4.設定初始化的空白地圖，這裡需要設定很多echarts參數，參考ECharts配置項手冊。

1.在ChinaMap.js中引入vuex和axios。

2.設定必要的變量。

3.在actions中抓取背景資料并更新地圖。

此時<code>npm run dev</code>已經可以看到中國地圖上閃閃的黃色小點點。 若想改變她使動态展示，可以在index.vue中mounted下面加上：

在ChinaMap.js中actions的mutations中fetchHeatChinaRealData修改：

1.别忘了在main.js裡面引入Vuex。

2.案例代碼

GitHub

vue+vuex+axios+echarts畫一個動态更新的中國地圖

GitHub:mazeyqian

Blog:blog.mazey.net