微信小程序+echart

一、加载echart特定区域地图

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

组件下载地址

将代码拉取到本地，复制 ec-canvas 文件夹到小程序项目中（可在项目最外层创建component文件夹，后期如有其他组件引入，也可放入该文件夹下）

2、下载特定区域地图——JSON数据

地图数据下载地址

将山西省的JSON数据在浏览器中打开，CTRL+A，CTRL+C复制到js文件中，可在需要加载地图的页面文件夹下新建shanxi.js文件，使用module.exports = 页面上复制的内容将数据导出。

3、需求页面使用组件

修改需要使用地图页面的json文件，引入组件地址

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

修改需要使用地图页面的js文件，将echarts组件及导出的JSON数据引入

import * as echarts from '../../component/ec-canvas/echarts';
import sxData from './shanxi';

4、在页面wxml文件添加canvas地图容器

<view class="map-content"><ec-canvas id="mychart-dom-map" canvas-id="mychart-map" ec="{{ ecMap }}" force-use-old-canvas="true"></ec-canvas>
</view>

样式根据需要自行调整
force-use-old-canvas="true"是为了解决echarts在滑动屏幕时不跟随scroll滑动

图表不跟随父元素及页面滑动
（1）增加force-use-old-canvas="true"属性
（2）看是否在 config里设置了config = {“disableScroll”:true}，如果设置了需去掉
（3）看是否给外层标签定义了height：100%的属性或者overflow相关属性，如果设置了需去掉
（4）检查canvas的所有父级元素是否设置了height：100%，overflow相关属性(visible除外)，以及position相关的属性(relative,static除外)，如果设置了需去掉

5、定义初始化方法 initChart 并在data中声明参数 ecMap

var dataGeo = []; //散点图数据，可在请求接口成功后赋值
// 定义初始化方法 initChart
function initChart(canvas, width, height) {chart = echarts.init(canvas, null, {width: width,height: height});canvas.setChart(chart);echarts.registerMap('sx', sxData);var mapOption = {geo: {map: "sx",// roam: true, //拖拽及缩放zoom: 1.1,silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件top: 20,bottom: 20,scaleLimit: {//滚轮缩放的极限控制min: 0.5,max: 20,},label: {normal: {show: true,fontSize: "10",color: "rgba(0,0,0,0.7)",},},itemStyle: {normal: {areaColor:"#E6F3FF", // 地图填充颜色borderColor: "#1E9EFF", //边线颜色},emphasis: {areaColor: "#C9E2FC", //高亮状态(鼠标移入后)颜色},},},series: [{name: '项目散点图',type: 'scatter', //散点图coordinateSystem: 'geo',showAllSymbol: true,// 点颜色设置itemStyle: {color: '#FFC730'},symbolSize: 8,  // 散点的大小data: dataGeo, //一般为接口返回数据}],};chart.setOption(mapOption);return chart;}
Page({data:{ecMap: {onInit: initChart }}
})

6、其他

（1）如需添加事件，如点击事件（可在initChart初始化时添加）

chart.on('click',function(params){console.log(params)// TODO 需要执行的方法
});

（2）地图容器内添加按钮，可在mapOption中新增graphic属性

graphic: [{type: 'group',right: 20,top: 5,children: [{type: 'rect', //矩形外框left: 'center',top: 'middle',shape: {width: 60,height: 30,},style: {fill: '#1E9EFF',}},{type: 'text', //框内文字z: 100,left: 'center',top: 'middle',style: {fill: '#fff',text: ['框内文字'],font: '10px Microsoft YaHei'}}],}
]

如需添加事件：

graphic[0]..onclick = ()=>{// TODO点击后需要执行的方法
}

（3）控制台报echarts颜色识别报错非法颜色: none
旧版本 canvas 中会出现该报错
解决办法——在 echarts 的 ec-canvas 目录下找到 wx-canvas.js 文件，在该文件的 _initStyle 方法中加入如下代码：

var styles = ["fillStyle", "strokeStyle", "globalAlpha", "textAlign", "textBaseAlign", "shadow", "lineWidth", "lineCap", "lineJoin", "lineDash", "miterLimit", "fontSize",];
styles.forEach((style) => {Object.defineProperty(ctx, style, {set: (value) => {if ((style !== "fillStyle" && style !== "strokeStyle") ||(value !== "none" && value !== null)) {ctx["set" + style.charAt(0).toUpperCase() + style.slice(1)](value);}},});
});

二、加载echart柱状图折线图

引入及样式同上，不再赘述，不同之处仅在mapOption配置

1、柱状图

option = {type: 'column',animation: true,height: 180, // 高度，单位为pxdataZoom: [{   // 这个dataZoom组件，默认控制x轴，该参数用来控制图表滑动，数据展示较多时使用。type: 'inside', // 设置为inside则不显示滑块，表示内置start: 0,      // 左边在 0% 的位置。end: 40         // 右边在 40% 的位置。}],legend: {data: ['图例1', '图例2'], // 对应图例即折线数textStyle: {// 图例文字样式fontSize: 10,},itemWidth: 15, // 每个图例宽度},xAxis: [{type: 'category', disableGrid: true,axisLabel: {formatter: function (value) {//x轴的文字改为竖版显示var str = value.split("");return str.join("\n");}},axisTick: {show: false, // 是否显示坐标轴刻度},data: ['小店区','迎泽区','杏花岭区','尖草坪区','万柏林区','晋源区','清徐县','阳曲县','娄烦县','古交市'], // x轴值}],yAxis:[ {type: 'value',interval: 20,  //y轴间隔min: 0,max: 100,name: '（个）', //y轴单位}],series: [{name: '图例1', //需要与图例中的data对应，否则不能正确显示type: 'bar',data: [23.2, 25.6, 76.7, 95.6, 62.2, 32.6, 20.0, 85, 45, 93], // 需要与x轴值数量一致},{name: '图例2',type: 'bar',data: [26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 95, 35, 63],}]}

2、折线图

option = {type: 'column',animation: true,height: 180, // 高度，单位为pxextra: {column: {width: 20, // 柱状图每项的图形宽度，单位为px},},dataZoom: [{   // 这个dataZoom组件，默认控制x轴，用于数据过多时滑动展示type: 'inside', start: 0,      // 左边在 0% 的位置。end: 50         // 右边在 50% 的位置。}],legend: {data: ['图例1', '图例2'],textStyle: {// 图例文字样式fontSize: 10,},itemWidth: 35,},xAxis: [{type: 'category',disableGrid: true,axisLabel: {interval: 0,formatter: function (value) {// 月前添加换行，使月份竖排展示return value.split("月").join("\n月");}},axisTick: {show: false, // 是否显示坐标轴刻度},data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],}],yAxis:[ {type: 'value',interval: 200,min: 0,max: 999,name: '（个）',}],series: [{name: '图例1', type: 'line',symbol: 'circle', //不设置折线拐点为空心点，设置后为实心点data: [120, 132, 101, 134, 90, 230, 210, 85, 45, 93, 800, 680],},{name: '图例2',type: 'line',symbol: 'circle',data: [680, 120, 132, 550, 134, 430, 230, 820, 85, 450, 930, 800 ],}]}

改变折线点和折线的颜色

series: [{name: "温度",//鼠标放在折线点上显示的名称type: "line",//折线图symbol: 'circle',//折线点设置为实心点symbolSize: 4,   //折线点的大小itemStyle: {normal: {color: "#386db3",//折线点的颜色lineStyle: {color: "#386db3"//折线的颜色}}},
]

3、显示不全问题

（1）坐标轴数据超出显示范围（数值超过999的时候会显示不全）
添加grid配置：

grid:{left:'18',containLabel:true,
}

官方文档
（2）坐标轴刻度标签显示不全，比如1-12月只隔一个月才显示月份刻度
添加axisLabel配置：

axisLabel: {interval: 0,
}

官方文档

三、微信小程序跳转页面问题

1、跳转至tabBar（菜单页）页面，并关闭其他所有非 tabBar页面

wx.switchTab({url: '路径' // 同app.json中配置的tabBar路径
})

2、跳转至其他页面（非tabBar页面)，该方法会关闭当前页面，左上角不会有返回按钮。

wx.redirectTo({url: '../'      //url默认为本页面
})

3、此方法不会关闭当前页面，且页面最多层叠10层（非tabBar页面)

wx.navigateTo({url: '路径'
})

注： switchTab 只能跳转到带有 tabBar 的页面，不能跳转到不带 tabBar的页面，跳转不带 tabBar的页面用 redirectTo 或者 navigateTo。

四、实现小程序image图片根据宽度自适应

在对应wxss设置image宽度，如width:50%

<image src="图片地址" mode="widthFix" show-menu-by-longpress>

show-menu-by-longpress可实现长按保存并分享，存在版本兼容的问题
在JS文件中添加如下代码，可查看是否支持使用该属性，该属性要求小程序的最低基础库版本号是2.7.0

wx.canIUse('image.show-menu-by-longpress')

五、小程序中的事件

使用bind在WXML组件中绑定事件，使用data-*绑定事件参数：

<button id="btn" data-dj="WeChat" bindtap="test"> Click</button>

.js文件中添加事件方法

Page({test: function(e) {console.log(e)}
})

id为btn的按钮被点击后，事件处理函数test会被执行，点击按钮时将会传入event