首先可以看一下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}}’ 即可