小程序Echarts 构建中国地图并锚定区域点击事件
Step1 效果展示
使用的绘图框架为 Echarts for Wexin
具体API文档地址请点击 [---->](https://www.echartsjs.com/zh/tutorial.html#自定义构建 ECharts)
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 是 省份 把 需要的操作在该事件内实现
}
}
})
小程序开发联系 QQ 1025584691