前言：
之前因為疫情，看到有許多做疫情動態的小程序，自己也跟着做了一個
總的來說，不難，就是有接口，拿到數據之后，就進行展現就好
不過其中比較難的，就是疫情地圖部分，使用的是Echarts的可視化地圖
先上張圖，這里只講這個map組件（數據滯后，不要當真）
我使用的時候遇到很多坑，而且看文檔和博客，對在小程序中使用Echarts的一些介紹比較少
所以我做出來了，就想詳細寫一寫
不過因為有事一直耽擱了，過得時間有點長了，我主要是想說一些需要注意的點，具體完整代碼可看我github連接
正文：
首先，建議還是自己上官網看看 Echarts
其實基本的使用就已經交代清楚了，可以自己先嘗試
對於第一次使用的小白，我建議的步驟就是：
1. 先在下載 GitHub 上的 ecomfe/echarts-for-weixin 項目
2. 找到你想用的圖表，看它提供的代碼，大概知道怎么使用的
3. 將示例中的ec-canvas文件夾拷貝到你的小程序項目中的components文件夾下
4. 它提供的示例是每個圖表是一個page，但是顯然我們自己實際開發是作為一個component，所以新建一個component，靈活拷貝你想做的圖表的相關內容即可
以上沒有任何技術含量，CV解決，對於初次使用，這樣簡單粗暴的方式，至少能保證你的引入是沒有問題的，而且也好排除錯在哪
如果看到圖表正常顯示，恭喜你會使用Echarts了，是恭喜你完成了第一步
之后就是根據我們自己的需求，進行修改了。
更具體的修改使用，我將以我做的疫情地圖為例，用的是map這一組件
我先介紹幾個的主體部分，然后介紹修改
首先，在index.json的useingComponents中引入ec-canvas組件
"usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" }
其次，在index.wxml中使用組件
<view class="mapWrap" hidden="{{isLoadingMap}}"> <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}" class="map" bindlongpress='saveImg'></ec-canvas> </view>
- id是為了js中獲取到該實例使用的，命名不一定，規范即可
- class是為了樣式設置使用的，一般是在wxss中設置圖表的寬高
- bindlongpress就是長按事件，我這里做的就是長按地圖保存該地圖圖片，后會詳述
至於ec，就是關鍵了
如果你拷貝時沒有出錯，可以看到組件中的data中有個屬性，ec
它的值是一個配置對象，其中有一個配置為初始化圖表的，onInit為鍵，配置對象的鍵名是不能修改；initChart為值，是我們要定義的初始化函數。
ec: {
onInit: initChart
}
ec將傳會給ec-canvas組件，根據其不同的配置進行不同的處理，具體可看源碼
總之在這里傳initChart函數，就是會在組件created生命周期進行初始化圖表
我們要根據自己需求展現圖表，最主要的就是在修改initChart這個函數了
如果只是靜態數據，就按下面的寫法即可
function initChart(canvas, width, height, dpr) { // 1.固定寫法不用管 const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); // 2.注冊地圖 echarts.registerMap('henan', geoJson); // 3.設置option const option = {...} chart.setOption(option); // 4. 返回echarts return chart; }
主要修改的就是步驟2和3
修改步驟2：
我做的是中國疫情地圖，所以需要引入的是中國地圖，是一個js文件，是對各個省份的一些配置信息。
從網上看到別的博主提供的文件，鏈接下載，放入你的小程序組件文件夾下，可以不修改，import引入，然后修改步驟二
import geoJson from './china' // 注冊地圖 echarts.registerMap('china',geoJson)
修改步驟3：
其實挺關鍵的，這是圖表的一個配置項，配置你所希望展現的一切
但是內容太多了，例如有配置 tooltip（提示框組件）、visualMap（視覺映射組件）、toolbox（工具欄）、series（系列列表）... ...
這里就不詳述了，文檔很多也很全的。用過Echarts的很快就會用了，就算沒用過的，對着文檔耐心改改就知道了，
不過還是有一些需要注意的
series中
type: 'map', //類型是地圖，用於地理數據可視化 mapType: 'china', //注冊的地圖 data //數據源
其中的data，若是靜態數據，寫好引入就好了，到這里基本一個中國疫情地圖就做完了。
但是通常情況下，data都是動態的，我們基本上都是發送請求獲取到的
所以上面的寫法就帶來了一個問題：前面講到intiChart會在created就觸發了，如果是異步獲取數據，往往initChart調用后，其中setOption中的data還沒有獲取到
這就會只顯示了個地圖，但是地圖沒有數據，同時也會報錯
所以我們要考慮的就是異步加載組件，當時在網上沒看到相關參考后，我就去看了源碼，自己琢磨了
但是后來發現，它提供的示例中就有異步加載的示例，看着示例很快就知道怎么改了
這就給我一個教訓，一定要好好看它的示例，不過吧，雖然花了不少時間，但是看了源碼是更好理解它為什么這么用了
廢話說太多了，接下來講講我是怎么使用異步組件的
首先，關鍵在ec，不再是配置onInit了，而是設置lazyload為true，這就可以異步加載組件了，之后可以動態進行初始化
ec: { // 將lazyLoad設為true后，就可手動初始化了 lazyLoad:true }
定義 初始化Echart的函數，之前我們在component外部定義的，這會可以把其放在methods中，可訪問到this
和上面的initChart差不多，為以下5步
initChart(){ // 1.首先獲取組件,可在父組件里調用 this.selectComponent ，獲取子組件的實例對象。 const ecComponent = this.selectComponent('#mychart-dom-area'); ecComponent.init((canvas, width, height, dpr) =>{ // 2.這個不用管，固定寫法 const chart = echarts.init(canvas, null, { width:width, height:height, devicePixelRatio: dpr // new }); canvas.setChart(chart); // 3.注冊地圖 echarts.registerMap('china',geoJson) // 4.設置option this.setOption(chart); // 5.最后一定要返回chart return chart; }) },
區別在於多了第1步，和第4步中data不再是靜態資源了，而是需要向后台獲取的：
第1步，通過之前定義的id，獲取到該echart組件實例，通過調用該實例的init方法初始化
第4步是我另外定義的一個函數調用，主要是為看着更清楚些，不想在initChart這個函數中寫太多，主要為
setOption(chart){ // 1.provinceData是父組件從后台獲取，然后傳給這個map組件中的 // 要進行一些處理，name和china.js中對應，value就是要呈現的值，這里就是當前確診人數 const data = this.data.provinceData.map((item,index) => { return { name:item.provinceShortName, value:item.currentConfirmedCount } }) // 2.地圖內容配置 const option = { // 提示框組件 tooltip: {...}, // 視覺映射組件 visualMap: {...}, // 工具欄 toolbox: {...}, // 系列列表。每個系列通過 type 決定自己的圖表類型 series: [{ top:0, type: 'map', //類型是地圖，用於地理數據可視化 mapType: 'china', //注冊的地圖 // 標簽(標簽位置在china.js文件中的properties中的cp修改) label: {...}, itemStyle: {...}, animation: false, data }], };
// 調用函數傳入的chart的setOption方法，將該option設置 chart.setOption(option); },
option中的一些配置項為...，是我省略沒粘貼上，完整的看我的github上都有
接下來就是要在合適的時機調用 initChart 方法就可
在這里是父組件異步獲取數據后，傳給map組件的，所以合適的時機就在map組件獲取到provinceData后
所以就在map的屬性列表properties中，該provinceData配置一個observer，開啟監聽，當獲取到數據的時候就調用initChart函數
properties: { provinceData:{ type:Array, observer(news){ if(news.length){ this.initChart() } } } },
這就完成了中國疫情地圖啦~
除此之外，還可自己多多拓展功能啊
我這里就拓展了個，長按保存圖片功能，就是前面說的 bindlongpress 事件
saveImg(){ wx.showModal({ title: '保存地圖到相冊', content:"確認保存", confirmText:'保存', success:(res)=>{ if (res.confirm) { const ecComponent = this.selectComponent('#mychart-dom-bar'); // 先保存圖片到臨時的本地文件，然后存入系統相冊 ecComponent.canvasToTempFilePath({ success: res => { console.log("tempFilePath:", res.tempFilePath) // 存入系統相冊 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath || '', success: res => { console.log("success", res) }, fail: res => { console.log("fail", res) } }) }, fail: res => console.log(res) }) } } }) } },