背景
最近看抖音有个很火的特效就是点亮地图,去过哪些地方,于是乎自己也想做一个,结合自己之前做的以家庭为单位的小程序,可以考虑做一个家庭一起点亮地图的功能。
效果图
过程
1,首先就是得去下微信小程序适配的echarts-for-weixin,这个网上很多,就不贴链接了。
下好后把ec-canvas文件夹放在小程序文件夹中,
2,然后到echart官网下载echart.js,这里个人建议定制化下载,因为小程序有限制一个文件不能超过2M,定制化一般只有几百k,
3,去下载中国地图数据的json,去阿里云地图下载
DataV.GeoAtlas地理小工具系列
4,开始写代码
页面
#这是css代码
.container {
position:absolute;
top: 10rpx;
bottom: 0;
left: 0;
right: 0;
height: 800rpx;
display: flex;
flex-direction: column;
align-items: center;
}
ec-canvas {
width: 100%;
height: 100%;
padding:300rpx,0rpx,10rpx,10rpx;
}
js代码
import * as echarts from '../../ec-canvas/echarts.min';
import geoJson from './mapData.js';
#这是自己封装请求后段接口的工具类
import {HTTP} from '../../config/http.js';
let http = new HTTP();
var chartMap = null;
function setOption(chart,linghtData) {
const option = {
title: {
subtext: '一起点亮地图',
left: 'center',
subtextStyle:{
color:'#1cd9f1'
}
},
tooltip: {
show: true,
trigger: 'item'
},
visualMap: {
show: true,
type: "piecewise",
left: 10,
bottom: "0",
align: "left",
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: 10
},
pieces: [
{ min: 3, label: '大家一起去过', color: '#EE30A7' },
{ min: 2, max: 3, label: '两个人去过', color: '#FF00FF' },
{ min: 1, max: 1, label: '一个人去过', color: '#EE799F' },
{ min: 0, max: 0, label: '还没去过', color: '#FFE6BD' }
]
},
series: [{
type: 'map',
mapType: 'china',
label: {
show: true,
fontSize: 8
},
itemStyle: {
normal: {
borderColor: '#737475',
areaColor: '#fff',
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data: linghtData
}]
};
chart.setOption(option);
};
Page({
/**
* 页面的初始数据
*/
data: {
ecMap: {
lazyLoad: true,
},
array:['黑龙江','吉林','湖南','辽宁','内蒙古','北京','天津','河北','山西','陕西','山东','江苏','宁夏','甘肃','河南','安徽','湖北','上海','浙江','福建','江西','台湾','广东','广西','香港','澳门','海南','南海诸岛','云南','贵州','四川','重庆','西藏','青海','新疆'],
index:0,
familyId:0,
target:"",
targetList:[],
type:"",
itemId:"",
active:0,
lightData:[],
},
onLoad(options) {
#加载地图
this.ecComponent = this.selectComponent('#mychart-dom-map');
this.getMapData();
},
//请求接口数据并初始化图标
getMapData() {
var that = this;
let familyId = wx.getStorageSync('familyId');
http.request({
url: '/api/target/getMapList',
method:'GET',
data:{
"familyId": familyId
},
success (res) {
if (res.code == 0) {
that.setData({
lightData: res.data,
});
that.initChart(res.data);
}
}
});
},
// 初始化图表
initChart(lightData) {
this.ecComponent.init((canvas, width, height, dpr) => {
chartMap = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr,
});
echarts.registerMap('china', geoJson);
canvas.setChart(chartMap);
setOption(chartMap,lightData);
return chartMap;
});
},
//这个方法就是保存数据调用后段接口后再刷新地图
targetLight() {
var that = this;
http.request({
url: '/api/target/saveLightMap',
method:'POST',
data:{
"familyId": familyId,
"userId":userId,
"province":province,
},
success (res) {
if (res.code == 0) {
//重新加载地图
that.getMapData();
}
}
});
},
js实现了调用接口获得数据并初始化图标,然后用户可以选择一个省份,点击(点亮地图)按钮,实现动态刷新地图
文章来源:https://www.toymoban.com/news/detail-782640.html
这是小程序码,欢迎扫码使用。文章来源地址https://www.toymoban.com/news/detail-782640.html
到了这里,关于微信小程序+echart实现点亮旅游地图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!