使用EchartsforWeixin小程序实现中国地图及区域点击事件

使用Echarts for Weixin 小程序实现中国地图及区域点击事件

1. 效果展示

本文使用了Echarts for Weixin作为绘图框架，具体API文档请参见官方文档。

2. 条件准备

1. 从GitHub下载echarts-for-weixin项目。

1. 将ec-canvas组件全部导入到你的小程序中，并将其作为组件引用。
2. 在需要使用该组件的页面中注册该组件。show.json

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

   show.wxml
   show.wxss

   .box {
       width:100%;
       height:100%;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
   } 
   #mychart-dom-map {
   position: relative;
   width: 100%;
   padding-top: 20rpx;
   height: 720rpx;
   }

3. 逻辑实现

3.1 引入地图数据

地图数据是绘制地图的关键，可以使用JSON或JS格式导入，小程序中使用JS更为方便。代码较长，托管在Gitee data.js。

3.2 组件初始化

通过pageInstance绑定页面内事件，进行锚定。show.js

import * as echarts from '../../../ec-canvas/echarts.js';
import geoJson from 'data.js';
let chart = null;
let dataList = [{ name: 'china' }];
let pageInstance = {}

// 初始化数据
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart); // 容器初始化
  echarts.registerMap('china', geoJson); // 地图数据注册
  var option = {
    tooltip: {
      triggerOn: 'click',
      formatter: function (e, t, n) {
        pageInstance.BindEvent(e);
        return e.name
      }
    }, // 点击响应事件
    geo: {
      map: 'china',
      roam: false,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1.23,
      top: 120,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)'
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        emphasis: {
          areaColor: '#f2d5ad',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          borderWidth: 0
        }
      }
    }, // 地图颜色等配置
    series: [{
      name: '来源信息',
      type: 'map',
      geoIndex: 0,
      data: dataList
    }] // 对应点击事件响应
  };
  chart.setOption(option); // 返回初始化结果
  return chart;
}

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  properties: {},
  data: {
    ec: {
      onInit: initChart
    }
  },
  lifetimes: {
    created: function () {
      pageInstance = this;
    }
  },
  methods: {
    BindEvent(e) {
      // 点击事件锚定
      // e.name 是省份，可以在该事件内实现所需操作
    }
  }
})