如何在微信小程序中使用echarts绘制地图(微信小程序制作疫情数据地图)
作者:互联网
如上图所示的地图怎么样去制作呢?我们现在开始
- 首先我们先去把该需要的组件文件下载下来 ec-canvas 下载 以及maoData.json数据下载出来
放到我们的程序目录下 并将 mapData.js也放到文件目录中。
放好之后呢我们需要把ec-canvas引入到我们的页面 index/index.json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
接下来wxml页面里写入组件
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
然后我们来看对应的js改如何去写,引入必要的echarts 和 对应的geoJson 数据
// index.js
import * as echarts from '../../ec-canvas/echarts';
import geoJson from './mapData.js';
在data里创建ec 变量
data: {
ec: {}
},
写入地图方法
// 加载全国疫情地图
initChart: function () {
this.oneComponent.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
echarts.registerMap('china', geoJson);
const option = {
tooltip: {
show: false,
trigger: 'item'
},
visualMap: {
show: true,
type: "piecewise",
left: 10,
bottom: "0",
align: "left",
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: 10
},
pieces: [
{ min: 1000, label: '1000人以上', color: '#ED514E' },
{ min: 100, max: 999, label: '100-999人', color: '#FF8F66' },
{ min: 10, max: 99, label: '10-99人', color: '#FFB769' },
{ min: 1, max: 9, label: '1-9人', color: '#FFE6BD' }
]
},
series: [{
type: 'map',
mapType: 'china',
label: {
show: true,
fontSize: 8
},
itemStyle: {
normal: {
borderColor: '#eaeaea',
areaColor: '#fff',
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data: this.data.data
}]
};
chart.setOption(option);
return chart;
});
},
获取数据方法 这里我封装了请求
//加载数据
loadData: function () {
var vm = this
wx.$api.getOnsInfo().then(res => {
const data = JSON.parse(res.data);
console.log(data)
const areaTree = data['areaTree']
const china = areaTree[0]
const provinces = china['children']
const provincesData = provinces.map(item => {
return {
name: item.name,
value: item.total.confirm
}
})
const detail = provinces.map(item => {
return {
area: item.name,
...item.total
}
})
vm.setData({ data: provincesData, tableData: detail, })
vm.initChart()
})
},
接口地址:
getOnsInfo() { return request.get("https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&t=" + Date.now()); }
希望对大家有所帮助吧
标签:canvas,绘制地图,微信,程序,ec,item,const,data,echarts 来源: https://blog.csdn.net/qq_43438095/article/details/114010968