一、效果圖
??主要在微信小程序中模仿頭條的國內(nèi)疫情數(shù)據(jù)詳情界面，點擊頁面按鈕可以動態(tài)切換“現(xiàn)有確診”和“累計確診”數(shù)據(jù)，先上效果圖。
 現(xiàn)有確診
|
 累計確診
|
|---|
二、微信中引入Echarts
??為了兼容小程序 Canvas，echarts官方提供了一個小程序的組件，用這種方式可以方便地使用 ECharts。
（1）、下載 GitHub 上的 ecomfe/echarts-for-weixin 項目。
（2）、ec-canvas 是官方提供的組件，其他文件是如何使用該組件的示例。
（3）、ec-canvas 目錄下有一個 echarts.js，默認會在每次 echarts-for-weixin 項目發(fā)版的時候替換成最新版的 ECharts。如有必要，可以自行從 ECharts 項目中下載最新發(fā)布版，或者從官網(wǎng)自定義構(gòu)建以減小文件大小。
官網(wǎng)地址
github地址
https://github.com/ecomfe/echarts-for-weixin
小程序demo地址
https://github.com/ecomfe/echarts-examples
三、具體實現(xiàn)步驟
1、新建一個微信小程序項目，詳情見微信公眾平臺官方文檔。然后將ecomfe/echarts-for-weixin中的ec-canvas文件夾拷貝到我們建立的小程序項目中，如圖所示：
 ec-canvas
|
 自己項目結(jié)構(gòu)
|
|---|
2、建立放組件的文件夾components，然后里面建立chinamap組件，并在組件中加入echarts提供的中國地圖數(shù)據(jù)china.js,如圖所示：
3、獲取地圖數(shù)據(jù)china.js
??通過官方提供的地圖demo中mapData.js地圖數(shù)據(jù)，發(fā)現(xiàn)地圖數(shù)據(jù)js其實為直接exports出來一串json字符串，經(jīng)分析，該段json字符串即為echarts提供的各個地區(qū)的echarts中地圖的json數(shù)據(jù)，如圖所示為我改造得來的china.js：
tips（網(wǎng)上獲取的地圖數(shù)據(jù)往往不是最新的，下面是我覺得比較方便的一個方法）:
??建立一個vue項目，然后npm i echarts安裝echarts的依賴，在依賴node_modules文件夾中找echarts文件，其中的map中就有全國各地的地圖數(shù)據(jù)json，如圖所示：
??建立china.js，里面直module.exports導出中國地圖的json的字符串即可。
module.exports = {地圖數(shù)據(jù)json字符串}
4、小程序頁面json、wxml和wxss中的代碼
chinmap.json
??因建立的是組件，需設(shè)置component為true。
{
"component": true, //因建立的是組件，需設(shè)置component為true
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
chinmap.wxml
??需設(shè)置外層的view包裹<ec-canvas>組件，同時設(shè)置<ec-canvas>組件的id，其中 ec 是一個我們在 chinmap.js 中定義的對象，它使得圖表能夠在頁面加載后被初始化并設(shè)置。
<view class="container-map">
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
</view>
chinmap.wxss
??ec-cavas的寬高需要設(shè)置，看自己的要求可以適當修改樣式。
.container-map {
height: 700rpx;
width: 100%;
margin-top: 40rpx;
}
ec-canvas {
width: 100%;
height: 100%;
}
5、小程序chinamap.js
引入echarts和地圖數(shù)據(jù)
import * as echarts from '../../ec-canvas/echarts';
import geoJson from './china.js';
data和properties設(shè)置
Component({
data: {
ec: {
lazyLoad: true //設(shè)置圖表懶加載
}
},
properties: {
dataList : { // 地圖中展示的數(shù)據(jù)
type: Array,
value: []
},
dataPoint: { // 為地圖某個位置標點，本例中來實現(xiàn)，地圖中某個省份清零后，為其省份插上小紅旗
type: Array,
value: []
}
},
)}
methods中設(shè)置
Component({
methods: {
// 設(shè)置圖表所需的option
setOption(chart, dataList, dataPoint) {
const option = {
tooltip : {
trigger: 'item',
formatter: function(e, t, n) {
return '地區(qū)：' + e.data.name + '\n確診：' + e.data.value
},
textStyle:{
align:'left'
}
},
title: {
text: '中國疫情地圖',
subtext: '*數(shù)據(jù)為假數(shù)據(jù)，僅供學習演示使用',
textStyle: {
color: '#000',
fontSize: 15
},
x: 'center'
},
visualMap: {
// type: 'piecewise',
min: 0,
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 8
},
textGap: 5,
left: 10,
bottom: 5,
showLabel: !0,
text: ['高', '低'],
pieces: [{
gt: 100,
label: '> 100 人',
color: '#7f1100',
symbol: 'roundRect'
}, {
gte: 10,
lte: 100,
label: '10 - 100 人',
color: '#ff5428'
}, {
gte: 1,
lt: 10,
label: '1 - 9 人',
color: '#ff8c71'
}, {
value: 0,
label: '0 人',
color: 'rgb(248, 248, 248)',
symbol: 'roundRect'
}
],
show: !0
},
series: [{
type: 'map',
map: 'china',
label: {
normal: {
show: true,
fontSize: 8
},
emphasis: {
textStyle: {
color: '#000'
}
}
},
itemStyle: {
normal: {
borderColor: '#000',
areaColor: '#fff',
borderWidth: .2
},
emphasis: {
areaColor: '#fff',
borderWidth: 0.2
}
},
animation: false,
markPoint: { //標記點
symbol: 'path://M852.8 365c-71.6 11.8-188.4 15-266-132.2-83.2-158.2-217.6-163-296.2-148.6-38.2 7-66.8 39-66.8 70l0 393.2c22.6 8.6 46.8-0.4 53-1.6 1.6-0.4 3-0.6 4.8-1 50-11 102.8-16.2 233.6 46.6 164 78.6 307.6-66.2 363.2-167 4-7 17.4-40.4 17.4-72.4C876.4 360 852.8 365 852.8 365z M176 64 144 64c-8.8 0-16 7.2-16 16l0 864c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16L192 80C192 71.2 184.8 64 176 64z',
symbolSize: 6, //圖形大小
label: {
normal: {
formatter: function(params) {
console.log(params);
return params.name;
},
show: false,
},
emphasis: {
show: false,
}
},
data: dataPoint
},
data: dataList
}],
};
chart.setOption(option);
},
// 初始化圖表
init_one(dataList, dataPoint) { //初始化圖表
this.oneComponent.init((canvas, width, height, dpr) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
echarts.registerMap('china', geoJson);
this.setOption(chart, dataList, dataPoint) //賦值給echart圖表
chart.dispatchAction({
type: 'showTip',
seriesIndex:0, // 顯示第幾個series
dataIndex: 28 // 顯示第幾個數(shù)據(jù)
})
this.chart = chart
return chart
});
},
//初始化圖表封裝了一層
getOneOption(){
this.init_one(this.data.dataList, this.data.dataPoint)
},
}
)}
組件生命函數(shù)中的設(shè)置
lifetimes: {
attached: function() {
// 在組件實例進入頁面節(jié)點樹時執(zhí)行
// 獲取echarts組件，并賦值給變量，然后初始化圖表
this.oneComponent = this.selectComponent('#mychart-dom-area');
this.getOneOption();
},
detached: function() {
// 在組件實例被從頁面節(jié)點樹移除時執(zhí)行
},
}
四、頁面中使用自定義echarts地圖組件，并可以動態(tài)賦值
??頁面中使用地圖組件，需先在頁面json中引入自定義echarts地圖組件。
"usingComponents": {
"chinamap" : "/components/chinamap/chinamap"
},
??頁面的wxml中使用自定義echarts地圖組件，dataList和dataPoint為需要的數(shù)據(jù)，同時需設(shè)置組件id。
<chinamap dataList="{{dataList}}" dataPoint="{{dataPoint}}" id="mapComponent" />
頁面js中
data: {
dataPoint: [{"name":"南海諸島","coord":[130,22],"value":0},{"name":"西藏","coord":[89.132212,32.110361],"value":0}],
dataList: [
{ name: '南海諸島', value: 0 },
{ name: '北京', value: 54 },
{ name: '天津', value: 13 },
{ name: '上海', value: 40 },
{ name: '重慶', value: 75 },
{ name: '河北', value: 13 },
{ name: '河南', value: 83 },
{ name: '云南', value: 11 },
{ name: '遼寧', value: 19 },
{ name: '黑龍江', value: 15 },
{ name: '湖南', value: 69 },
{ name: '安徽', value: 60 },
{ name: '山東', value: 39 },
{ name: '新疆', value: 2 },
{ name: '江蘇', value: 31 },
{ name: '浙江', value: 104 },
{ name: '江西', value: 36 },
{ name: '湖北', value: 1052 },
{ name: '廣西', value: 33 },
{ name: '甘肅', value: 7 },
{ name: '山西', value: 9 },
{ name: '內(nèi)蒙古', value: 7 },
{ name: '陜西', value: 22 },
{ name: '吉林', value: 4 },
{ name: '福建', value: 18 },
{ name: '貴州', value: 5 },
{ name: '廣東', value: 98 },
{ name: '青海', value: 1 },
{ name: '西藏', value: 0 },
{ name: '四川', value: 44 },
{ name: '寧夏', value: 4 },
{ name: '海南', value: 22 },
{ name: '臺灣', value: 3 },
{ name: '香港', value: 5 },
{ name: '澳門', value: 5 }
]
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
//獲取自定義地圖組件的實例，如果頁面有點擊函數(shù)或者互聯(lián)網(wǎng)請求，即可使用 this.mapComponent調(diào)用自定義echarts地圖組件中定義的出事化函數(shù)（this.mapComponent.getOneOption()）
this.mapComponent = this.selectComponent('#mapComponent')
},
/**
* 假設(shè)頁面有點擊按鈕，改變地圖數(shù)據(jù)，對地圖所需數(shù)據(jù)進行更新，然后調(diào)用this.mapComponent.getOneOption()重新初始化echarts地圖即可動態(tài)賦值。
*/
hisBtnClickMap() {
this.setData({
btnClickIndex : 1,
dataPoint: [{"name":"南海諸島","coord":[130,22],"value":0},{"name":"西藏","coord":[89.132212,32.110361],"value":0}],
dataList: [
{ name: '南海諸島', value: 0 },
{ name: '北京', value: 0 },
{ name: '天津', value: 13 },
{ name: '上海', value: 40 },
{ name: '重慶', value: 75 },
{ name: '河北', value: 13 },
{ name: '河南', value: 830 },
{ name: '云南', value: 11 },
{ name: '遼寧', value: 19 },
{ name: '黑龍江', value: 15 },
{ name: '湖南', value: 6900 },
{ name: '安徽', value: 60 },
{ name: '山東', value: 39 },
{ name: '新疆', value: 200 },
{ name: '江蘇', value: 31 },
{ name: '浙江', value: 104 },
{ name: '江西', value: 36 },
{ name: '湖北', value: 12052 },
{ name: '廣西', value: 33 },
{ name: '甘肅', value: 7 },
{ name: '山西', value: 9 },
{ name: '內(nèi)蒙古', value: 7 },
{ name: '陜西', value: 22 },
{ name: '吉林', value: 4 },
{ name: '福建', value: 18 },
{ name: '貴州', value: 5 },
{ name: '廣東', value: 98 },
{ name: '青海', value: 0 },
{ name: '西藏', value: 33 },
{ name: '四川', value: 44 },
{ name: '寧夏', value: 4 },
{ name: '海南', value: 220 },
{ name: '臺灣', value: 300 },
{ name: '香港', value: 500 },
{ name: '澳門', value: 500}
]
})
this.mapComponent.getOneOption()
}
以上為全部代碼，至此完結(jié)。
