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

Kindear

发布于 2020-03-18 16:23:32

2.8K2

发布于 2020-03-18 16:23:32

文章被收录于专栏：算法与数据结构算法与数据结构

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

Step1 效果展示

使用的绘图框架为 Echarts for Wexin

具体API文档地址请点击 ---->

Step2 条件准备

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

将组件 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,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 是 省份 把 需要的操作在该事件内实现
    }
  }
})

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-03-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序