如上图所示的地图怎么样去制作呢？我们现在开始
首先我们先去把该需要的组件文件下载下来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.jsimport * 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 = thiswx.$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./g2/getOnsInfo?name=disease_h5&t=" + Date.now()); }
希望对大家有所帮助吧
