小程序echarts 构建中国地图并锚定区域点击事件

小程序Echarts 构建中国地图并锚定区域点击事件

Step1 效果展示

使用的绘图框架为 Echarts for Wexin

具体API文档地址请点击 [---->](https://www.echartsjs.com/zh/tutorial.html#自定义构建 ECharts)

Step2 条件准备

1.Github上下载echarts-for-weixin 项目

2. 将组件 ec-canvans 全部导入你的小程序中，把ec-canvans 作为组件引用

3.在使用到的页面注册该组件

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 逻辑实现

3.1 引入地图数据 data.js

该数据是Canvas绘制地图的关键，可以使用json 或者 js 形式进行导入，小程序中使用js 更为方便。

代码过长，托管在Gitee data.js

3.2 组件初始化

通过 pageInstance 绑定page 内事件，进行锚定。

show... 共同构成一个地图展示组件，可以直接进行引入使用。

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.7)"
        }
      },itemStyle: {
        normal: {
          //shadowBlur: 50,//shadowColor: 'rgba(0,0.2)',borderColor: "rgba(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 是 省份 把 需要的操作在该事件内实现
    }
  }
})

小程序开发联系 QQ 1025584691