微信小程序使用echarts显示全国地图

首先可以看一下echarts官方的实例

也可以直接使用我参照了官方实例的方法：

1、下载echarts小程序组件并放置到具体项目

下载地址

将项目拉到本地之后，找到文件中的 ec-canvas 文件夹，并将其整个复制到你的小程序项目中
我新建了一个component文件夹放置这个组件

2、下载全国地图

链接

打开的网站可以查询全国的所有省市区，暂未验证是否为最新国标库。

搜索你想要的地图节点，选择 JSON API(包含子域)，我这里以全国地图为例

将文本框内的链接复制并在新窗口打开，因为这个文件原本为json格式，我们在小程序项目的文件目录下新建一个 mapData.js ,将页面中的所有内容复制到这个js文件中并将其公开（module.exports = 页面上复制的内容）。

注意，这里需要的是页面中的所有内容，地图的api数据比较大，复制成功后请检查以下是否复制完全。

3、需求页面使用组件

修改需要使用的页面的json文件，这里引入组件地址需要使用你的ec-canvas地址

{"usingComponents": {"ec-canvas": "../../../component/ec-canvas/ec-canvas"}
}

在js文件中引入 mapData.js 地图api和 ec-canvas 中的 echarts.js；

import * as echarts from '../../component/ec-canvas/echarts';
import geoJson from '../../utils/mapData';

在page外定义初始化方法 initChart 并在data中声明需要的参数 ec

function initChart(canvas, width, height, dpr) {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});canvas.setChart(chart);echarts.registerMap('china', geoJson);const option = {tooltip: {trigger: 'item',formatter: '{b}: {c}'},visualMap: {type:'continuous',min: 0,max: 100,left: 'left',top: 'bottom',show:false},series: [{type: 'map',mapType: 'china',label: {normal: {show: false //在省市区是否显示省市区名称},emphasis: {textStyle: {color: '#333'}}},itemStyle: {normal: {borderColor: '#389BB7',areaColor: '#fff',},emphasis: {areaColor: '#389BB7',borderWidth: 0}},animation: false,data: [ //这里一般是后台返回数据{ 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 },{ name: '濮阳市', value: 35 },{ name: '开封市', value: 45 }]}],};chart.setOption(option);return chart;
}
Page({data:{ec: {onInit: initChart}}
})

在页面wxml文件中需要部分c+v以下内容

<view class="container"><ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
</view>

这里需要定义container的长宽
全部完成后的效果

点击会显示单个省市的数据与名称

echart官方说的是小程序支持echarts官网的几乎所有图例，但是不支持以下单个属性：

------------------------更新-----------------------------------------
如果你使用的是后台动态数据，按照上述的方法可能会出现数据没有动态更新的问题，这是因为我们目前的 initChart 方法是处于页面之外的，而方法内用于展示的数据 data 也并没有包含再页面监控的范围内，要想使用后台返回的数据

不要视图改变初始方法 initChart 和他的参数

请先把 initChart 方法移入到页面结构内，也就是 Page({}) 结构之内，动态赋值给 data 中的变量 ec，且由于数据量还算比较多，尽量将赋值操作放在获取并 setdata 地址列表的回调之中

let Slef = this;
app.post('url').then(res=>{this.setData({Provi:res.data},()=>{//这里是setData的回调Slef.setData({ec:{onInit: Slef.initChart}})})
})

另外，如果出现偶而能加载出数据偶尔加载不出的情况，请再ec-canvas元素上加上if判断
wx:if=’{{ec}}’ 即可

微信小程序使用echarts显示全国地图相关推荐

微信小程序使用Echarts实现省市地图（山东地图demo）
上篇写过在PC端使用Echarts实现省市地图效果,今天说下在小程序中如何使用echarts实现省市地图,这次就拿山东地图来说下. 1.首先还是下载Echarts在git上提供的组件,下载到本地放到 ...
微信小程序用echarts引入中国地图
下载下载GitHub 上的 ecomfe/echarts-for-weixin 项目链接: ecomfe/echarts-for-weixin. 导入下载好后解压,打开微信开发者工具,新建一个项 ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序使用echarts不显示的问题
前几天在微信小程序中用echarts发现不显示,主要有一下几个可能一.没配置好json,应配置如下 {"usingComponents": {"ec-canvas&qu ...
腾讯小程序php,微信小程序实现使用腾讯地图SDK步骤详细介绍
这篇文章微信小程序实现使用腾讯地图SDK步骤详细介绍的相关资料,需要的朋友可以参考下微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来 ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...
微信小程序使用Echarts绘制K线图与双曲线图以及实现tab切换
在微信小程序中使用Echarts需要下载相应的文件,可在这下载ec-canvas,该github里也有很多很好的例子,可自行调试学习. 本例子的目录结构: 微信小程序使用Echarts的步骤在需要引 ...
微信小程序点播插件_微信小程序 wxParse插件显示视频问题
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...

微信小程序使用echarts显示全国地图

微信小程序使用echarts显示全国地图相关推荐

最新文章

热门文章