微信小程序使用echarts显示全国地图

首先可以看一下echarts官方的实例

也可以直接使用我参照了官方实例的方法：

1、下载echarts小程序组件并放置到具体项目

下载地址

将项目拉到本地之后，找到文件中的 ec-canvas 文件夹，并将其整个复制到你的小程序项目中
我新建了一个component文件夹放置这个组件

2、下载全国地图

链接

打开的网站可以查询全国的所有省市区，暂未验证是否为最新国标库。

搜索你想要的地图节点，选择 JSON API(包含子域)，我这里以全国地图为例

将文本框内的链接复制并在新窗口打开，因为这个文件原本为json格式，我们在小程序项目的文件目录下新建一个 mapData.js ,将页面中的所有内容复制到这个js文件中并将其公开（module.exports = 页面上复制的内容）。

注意，这里需要的是页面中的所有内容，地图的api数据比较大，复制成功后请检查以下是否复制完全。

3、需求页面使用组件

修改需要使用的页面的json文件，这里引入组件地址需要使用你的ec-canvas地址

{
  "usingComponents": {
    "ec-canvas": "../../../component/ec-canvas/ec-canvas"
  }
}

在js文件中引入 mapData.js 地图api和 ec-canvas 中的 echarts.js；

import * as echarts from '../../component/ec-canvas/echarts';
import geoJson from '../../utils/mapData';

在page外定义初始化方法 initChart 并在data中声明需要的参数 ec

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  echarts.registerMap('china', geoJson);

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    visualMap: {
      type:'continuous',
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      show:false
    },
    series: [{
      type: 'map',
      mapType: 'china',
      label: {
        normal: {
          show: false //在省市区是否显示省市区名称
        },
        emphasis: {
          textStyle: {
            color: '#333'
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#389BB7',
          areaColor: '#fff',
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
      animation: false,
      data: [ //这里一般是后台返回数据
        { name: '广东省', value: 10 },
        { name: '山东省', value: 20 },
        { name: '江苏省', value: 30 },
        { name: '河南省', value: 40 },
        { name: '上海市', value: 41 },
        { name: '河北省', value: 15 },
        { name: '浙江省', value: 25 },
        { name: '平顶山市', value: 35 },
        { name: '新乡市', value: 35 },
        { name: '漯河市', value: 35 },
        { name: '商丘市', value: 35 },
        { name: '三门峡市', value: 35 },
        { name: '济源市', value: 35 },
        { name: '焦作市', value: 35 },
        { name: '安阳市', value: 35 },
        { name: '鹤壁市', value: 35 },
        { name: '濮阳市', value: 35 },
        { name: '开封市', value: 45 }
      ]

    }],

  };

  chart.setOption(option);

  return chart;
}
Page({
	data:{
			ec: {
			      onInit: initChart
			    }
		}
})

在页面wxml文件中需要部分c+v以下内容

<view class="container">
    <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
</view>

这里需要定义container的长宽
全部完成后的效果

点击会显示单个省市的数据与名称

echart官方说的是小程序支持echarts官网的几乎所有图例，但是不支持以下单个属性：

------------------------更新-----------------------------------------
如果你使用的是后台动态数据，按照上述的方法可能会出现数据没有动态更新的问题，这是因为我们目前的 initChart 方法是处于页面之外的，而方法内用于展示的数据 data 也并没有包含再页面监控的范围内，要想使用后台返回的数据

不要视图改变初始方法 initChart 和他的参数

请先把 initChart 方法移入到页面结构内，也就是 Page({}) 结构之内，动态赋值给 data 中的变量 ec，且由于数据量还算比较多，尽量将赋值操作放在获取并 setdata 地址列表的回调之中

let Slef = this;
app.post('url').then(res=>{
	this.setData({
		Provi:res.data
	},()=>{
	//这里是setData的回调
	 Slef.setData({ec:{onInit: Slef.initChart}})
	})
})

另外，如果出现偶而能加载出数据偶尔加载不出的情况，请再ec-canvas元素上加上if判断
wx:if=’{{ec}}’ 即可