參考文檔： 《微信小程序使用echarts顯示全國(guó)地圖》《如何在微信小程序開(kāi)發(fā)中使用echarts以及踩坑記錄(最全教程)》
一耻涛、效果圖
甘肅.png
二仿野、實(shí)現(xiàn)
1、下載echarts插件
-
echarts-for-weixin項(xiàng)目提供了一個(gè)小程序組件宫患，用這種方式可以方便地使用ECharts。 -
echarts-for-weixin下載地址：https://github.com/ecomfe/echarts-for-weixin - 下載壓縮包解壓后如下圖：
- 將
ec-canvas文件夾放置小程序的項(xiàng)目目錄下（ components或pages下 均可，根據(jù)個(gè)人習(xí)慣）
- github 網(wǎng)頁(yè)下載時(shí)，可以看到
ec-canvas的版本號(hào)為 5.3.3 版本（定制圖表時(shí)需要版本一致贮勃，若不定制可忽略）
2、定制圖形苏章，生成 echarts.min.js 文件
ec-canvas目錄中的 echarts.js有些大（包含了所有圖表），小程序后期上線對(duì)文件大小有要求奏瞬，所以建議進(jìn)行定制可減少文件大小占比枫绅。
- 進(jìn)入echarts官網(wǎng)
- 點(diǎn)擊下載
- 點(diǎn)擊在線定制
-
選擇版本（必須和前面下載的
ec-canvas中的echarts.js版本保持一致） -
選擇需要定制的圖表（我需要的是地圖
map和視覺(jué)映射visualMap），其它保持默認(rèn)
- 其它選項(xiàng)包保持默認(rèn)硼端，點(diǎn)擊下載并淋。
- 下載完成后，把項(xiàng)目中
ec-canvas目錄中的echarts.js文件替換為下載的文件：echarts.min.js珍昨；
- 注意：
ec-canvas.js的import引入的是原來(lái)的echarts.js文件县耽，需要自己改成剛才下載的文件句喷，如下圖所示
3、小程序中使用
（1）下載甘肅地圖
- 下載地址：https://datav.aliyun.com/portal/school/atlas/area_selector
- 搜索想要的地圖節(jié)點(diǎn)兔毙，選擇
JSON API(包含子域)唾琼，我下載的是甘肅省 -
復(fù)制鏈接并在新窗口打開(kāi)，這個(gè)文件原本為json格式澎剥，我們?cè)谛〕绦蝽?xiàng)目的文件目錄下新建一個(gè) mapData.js ,將頁(yè)面中的所有內(nèi)容復(fù)制到這個(gè)js文件中并將其公開(kāi)（
module.exports = 頁(yè)面上復(fù)制的內(nèi)容）锡溯。
（2）使用
analysis.json文件中引入ec-canvas組件
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas",
},
在analysis.js文件中引入 mapData.js 和 ec-canvas 中的 echarts.js；
import * as echartsAll from '../../ec-canvas/echarts.min'
import geoJson from './mapData';
在頁(yè)面analysis.wxml文件
<view class="chatdt">
<ec-canvas-all id="mychart-dom-area" canvas-id="mychart-area" ec="{{ dtMap }}"></ec-canvas-all>
</view>
在頁(yè)面analysis.wxss文件
.chatdt {
width: 750rpx;
height: 750rpx;
margin: 0 auto;
}
在analysis.js文件
let defaultDtObj = {
tooltip: {
show: false,
},
visualMap: {
type: 'continuous',
inRange: {
color: '#7ecac6', //地圖用一種顏色顯示哑姚，不同程度的話祭饭，寫(xiě)成數(shù)組形式的顏色
},
show: false
},
series: [{
type: 'map',
mapType: 'gansu',
left: 10,
right: 10,
label: {
normal: {
show: true, //在省市區(qū)是否顯示省市區(qū)名稱
formatter: '\n{c}',
fontSize: 10,
lineHeight: 13,
},
},
itemStyle: {
borderColor: '#ffffff',
emphasis: {
areaColor: '#6aa4ce',
borderWidth: 0
},
},
animation: false,
selectedMode: false,
data: [
{ name: '蘭州', value: 0 },
{ name: '平?jīng)?, value: 0 },
{ name: '張掖', value: 0 },
{ name: '酒泉', value: 0 },
{ name: '白銀', value: 0 },
{ name: '慶陽(yáng)', value: 0 },
{ name: '嘉峪關(guān)', value: 0 },
{ name: '武威', value: 0 },
{ name: '臨夏', value: 0 },
{ name: '定西', value: 0 },
{ name: '天水', value: 0 },
{ name: '隴南', value: 0 },
{ name: '甘南', value: 0 },
{ name: '金昌', value: 0 },
],
}]
}
Page({
data: {
dtMap: {
onInit: function (canvas, width, height, dpr) {
dtChart = echartsAll.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(dtChart);
echartsAll.registerMap('gansu', geoJson);
dtChart.setOption(getDtOption());
return dtChart;
}
},
},
getDtData() {
let obj1 = { ...defaultDtObj }
obj1.series[0].data = [
{ name: '蘭州', value: 10 },
{ name: '平?jīng)?, value: 20 },
{ name: '張掖', value: 30 },
{ name: '酒泉', value: 40 },
{ name: '白銀', value: 41 },
{ name: '慶陽(yáng)', value: 15 },
{ name: '嘉峪關(guān)', value: 10 },
{ name: '武威', value: 20 },
{ name: '臨夏', value: 30 },
{ name: '定西', value: 40 },
{ name: '天水', value: 41 },
{ name: '隴南', value: 15 },
{ name: '甘南', value: 15 },
{ name: '金昌', value: 15 },
]
dtChart.setOption(obj1)
},
onReady() {
this.getDtData()
}
})
function getDtOption() {
return defaultDtObj
}
