微信小程序+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, // 高度，单位为px
dataZoom: [
{ // 这个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, // 高度，单位为px
extra: {
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
六、echarts图表的x轴和y轴配置
xAxis与yAxis中有很多配置项，以xAxis进行详解，yAxis参考xAxis即可
nameTextStyle：坐标轴名称的文字样式
axisLine：坐标轴轴线相关设置。
axisTick：坐标轴刻度相关设置。
axisLabel：坐标轴刻度标签的相关设置。
splitLine：坐标轴在 grid 区域中的分隔线设置。
splitArea ：坐标轴在 grid 区域中的分隔区域，默认不显示。
xAxis与yAxis中的配置项，也会含有很多属性。
xAxis: {
id: '',
show: true, //是否显示x轴
gridIndex: 0, //轴所在grid索引，默认位于第一个grid
alignTicks: false, //在多个轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效
position: 'top', //轴的位置（top/bottom）
offset: 0, //轴相对于默认位置的偏移，在相同的position上有多个轴时有用
type: 'category', //坐标轴类型，值category/value，与y轴呼应，若x轴配置category则y轴配置value
name: '', //坐标轴名称
nameLocation: 'end', //坐标轴名称显示位置，可选值start/middle[或者center]/end
nameTextStyle: {}, //一般样式也很少直接修改且内容过多
nameGap: 15, //坐标轴名称与轴线间距离
nameRotate: 10, //坐标轴名字旋转，角度值
inverse: false, //是否是反向坐标轴
boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略，也可以使用布尔值，true居中
min: '', //刻度最小值
max: '', //刻度最大值
scale: false, //只在数值轴中type: 'value'有效, 设置min和max后无效。是否是脱离 0 值比例。设置成true后坐标刻度不会强制包含零刻度。在双数值轴的散点图中较有用
splitNumber: 5, //坐标轴的分割段数（预估值）
minInterval: 0, //自动计算坐标轴最小间隔，例：设置成1，刻度没有小数
maxInterval: '', //自动计算坐标轴最大间隔
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '5', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, //坐标轴刻度的长度
lineStyle: {
color: '#FFF', //刻度线的颜色
width: 10, //坐标轴刻度线宽
type: 'solid', //坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisLabel: {
show: true, //是否显示刻度标签
interval: '0', //坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
inside: true, //刻度标签是否朝内，默认朝外
rotate: 90, //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
margin: 10, //刻度标签与轴线之间的距离
// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
color: '#FFF', // 刻度标签文字的颜色
fontStyle: 'normal', // 字体的风格（normal无样式；italic斜体；oblique倾斜字体）
fontWeight: 'normal', // 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
fontSize: '20', //文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（left/center/right）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（top/middle/bottom)
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
},
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
color: ['#ccc'], //color分隔线颜色，可设置单个颜色，也可设置颜色数组，分隔线会按数组中颜色顺序依次循环设置颜色
width: 3, // 分隔线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
splitArea: {
show: true, // 是否显示分隔区域
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
opacity: 1, // 图形透明度。支持从0到1的数字，为0时不绘制该图形
},
},
data: {
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（normal无样式；italic斜体；oblique倾斜字体）
fontWeight: 'normal', //字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（left/center/right）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（top/middle/bottom）
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
}
}
}
9486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
