微信小程序使用Echarts实现省市地图（山东地图demo）

上篇写过在PC端使用Echarts实现省市地图效果，今天说下在小程序中如何使用echarts实现省市地图，这次就拿山东地图来说下。

1、首先还是下载Echarts在git上提供的组件，下载到本地放到项目中。如下图：

2、组件放入到项目中，在相应的json中引入组件：

{"navigationBarTitleText": "地图","usingComponents": {"ec-canvas" : "../../ec-canvas/ec-canvas"}
}

3、在wxll页面中，写个ec-canvas标签，地图和折线、柱形图等都是用canvas实现出来的。

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

4、重点部分，js文件，首先先下载各省市或者全国地图的json文件。然后进行改造并改成js文件，先拿山东地图来说，看下如何改造：

没改造前的代码如下图：

改造后的（改造后将json改成js文件）

改造好并改成js文件后，讲文件放到对应的目录下面。

5、这里开始讲如何在js中进行绘制地图。

import * as echarts from '../../ec-canvas/echarts';//引入下载好的echarts提供的组件
import geoJson from 'shandong.js'//这里就是引入上一步讲的 将json改成js文件。
const app = getApp();function initChart(canvas, width, height) {const chart = echarts.init(canvas, null, {width: width,height: height,});canvas.setChart(chart);echarts.registerMap('shandong', geoJson);const option ={title:{text: '山东省地图',top:'3%',left:'center',textStyle:{fontSize:20,fontWeight:600,color:'#222'}},tooltip:{trigger:'item',formatter: function (val) {return val.data.name + '人口数量: ' + val.data.value + '万'}},series:[{type: 'map',map:'shandong',roam:true,//开启地图缩放， 开启后在预览模式中有一点点卡，暂时还没找到解决办法geoIndex:0,label:{normal:{show:true,//显示省市标签textStyle:{color:"#222"}},emphasis:{show:true,//显示省市标签textStyle:{color:"#222"}}},itemStyle: {normal: {borderWidth: .5,//区域边框宽度borderColor: '#0550c3',//区域边框颜色areaColor:"#57cfff",//区域颜色},emphasis: {borderWidth: .95,//鼠标滑过区域，区域边框宽度borderColor: '#fff',//鼠标滑过区域，区域边框颜色areaColor:"#ff6511",//鼠标滑过区域背景色}},data: [//数据{ name: '济南市', value: 1000 },{ name: '青岛市', value: 10 },{ name: '德州市', value: 20 },{ name: '淄博市', value: 30 },{ name: '潍坊市', value: 40 },{ name: '日照市', value: 41 },{ name: '济宁市', value: 15 },{ name: '菏泽市', value: 25 },{ name: '烟台市', value: 35 },{ name: '威海市', value: 35 },{ name: '泰安市', value: 35 },{ name: '临沂市', value: 35 },{ name: '枣庄市', value: 35 },{ name: '滨州市', value: 35 },{ name: '东营市', value: 35 },{ name: '莱芜市', value: 35 },{ name: '聊城市', value: 35 }]}],}chart.setOption(option);return chart;
}Page({onShareAppMessage: function (res) {return {title: 'ECharts 可以在微信小程序中使用啦！',path: '/pages/index/index',success: function () { },fail: function () { }}},data: {ecMap: {//这里的ecMap要与wxll中的{{ecMap}}一致onInit: initChart}},onReady() {setTimeout(function () {// 获取 chart 实例的方式// console.log(chart)}, 2000);}
});

最终效果图：

以上是在小程序中实现省市地图的基础代码，有不足的地方欢迎大家指正。

微信小程序使用Echarts实现省市地图（山东地图demo）相关推荐

微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts 1. 前言最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案. 先说下图表选型的问题,如果你 ...
微信小程序使用echarts不显示的问题
前几天在微信小程序中用echarts发现不显示,主要有一下几个可能一.没配置好json,应配置如下 {"usingComponents": {"ec-canvas&qu ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...

微信小程序使用Echarts实现省市地图（山东地图demo）

没改造前的代码如下图：

改造后的（改造后将json改成js文件）

微信小程序使用Echarts实现省市地图（山东地图demo）相关推荐

最新文章

热门文章

微信小程序 使用Echarts实现省市地图（山东地图demo）

没改造前的代码如下图：

改造后的（改造后将json改成js文件）

微信小程序 使用Echarts实现省市地图（山东地图demo）相关推荐

最新文章

热门文章

微信小程序使用Echarts实现省市地图（山东地图demo）

微信小程序使用Echarts实现省市地图（山东地图demo）相关推荐