Applet Echarts build China map and click on area events anchor

Applet Echarts build China map and click on area events anchor

Step1 results show

Drawing frame is used Echarts for Wexin

Address specific API documentation Click ---->

Step2 ready condition

Download the 1.Github echarts-for-Weixin project

1. The assembly ec-canvans Import all your applet, the ec-canvans as component references

3. Use to register the component in the page

show.json

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

show.wxml

<view class="box" >
 <ec-canvas id="mychart-dom-map" canvas-id="mychart-map" ec="{{ ec }}"></ec-canvas>
</view>

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;
}

Step3 logic implementation

3.1 introduces map data data.js

The data is the key to Canvas to draw the map, you can use the form js json or import, applet js more convenient to use.

The code is too long, hosted Gitee data.js

3.2 component initialization

By pageInstance binding page within the event, anchoring.

show ... constitute a map display components, it can be directly introduced into use.

show.js

import * as echarts from '../../../ec-canvas/echarts.js';
import geoJson from 'data.js';
let chart = null;
let dataList = [{ name: 'china' }];
let pageInstance = {}
// 2、进行初始化数据
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: !1,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1.23,
      top: 120,
      label: {
        normal: {
          show: !0,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)"
        }
      },
      itemStyle: {
        normal: {
          //shadowBlur: 50,
          //shadowColor: 'rgba(0, 0, 0, 0.2)',
          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 是 省份 把 需要的操作在该事件内实现
    }
  }
})