主要记录echarts中的坑，基本的使用就不详细说了，随便百度都有。。。
先是异步请求数据渲染echarts的方法，踩坑在最后！！！
第一步首先引入echarts
echarts官网没有小程序版，不过已经有人在github发布echarts的小程序版本了。。但是echarts.js的版本不是最新的，个人推荐去官网在线定制。定制版的echarts体积更小，而且小程序中用到的图表种类不会很多，而且定制非常简单，一定要去自己定制，然后替换掉他的echarts.js。
首先，下载echarts微信版 地址： https://github.com/ecomfe/echarts-for-weixin
将下载好的文件中 ec-canvas目录 放在小程序项目根目录中即可。
然后就是在json、js中引入，
异步请求数据
wxml中在wxml中一定要给echarts的容器设置高度
<view class="workLine">
<ec-canvas id="lessonChart" canvas-id="mychart-line" ec="{{ lessonLine }}"></ec-canvas>
</view>首先 建立一个全局变量（注意，放在page外面，要全局变量，方便修改），
var lessonMonthArr = [];
var lessonCountArr = [];
var lessonChart = null;在data中设置延迟加载
lessonLine: {
lazyLoad: true
}在异步请求中，去调用初始化echarts的函数
getLesson() {
app.fetch(Api.lessonRecordData, {
officeId: this.data.adminInfo.officeId,
}, "GET", res => {
var arr = res.data.data.monthData
var num = 0;
var _data = [];
var proportion = 4;
for (let i = 0; i < arr.length; i++) { //for循环是自己处理的数据
if (i % proportion == 0 && i != 0) {
_data.push(arr.slice(num, i));
num = i;
}
if ((i + 1) == arr.length) {
_data.push(arr.slice(num, (i + 1)));
}
}
this.setData({
lessonData: _data,
lessonTotal: res.data.data.total
})
//重要的是这两步， 因为如果页面加载过，全局变量中的值并不会消失，所以我先清空一下全局变量
lessonMonthArr = [];
lessonCountArr = [];
//然后去给这两个全局变量赋值
arr.forEach((item) => {
lessonMonthArr.push(item.month + "月");
lessonCountArr.push(item.count);
})
//去调用初始化函数
this.init_lessonChart()初始化函数
//课堂折线图
init_lessonChart() {
this.lessonChartComponnet = this.selectComponent('#lessonChart'); //去获取echarts 这里的id就是echarts的id
this.lessonChartComponnet.init((canvas, width, height) => {
// 初始化图表 这个lessonChart 就是之前全局变量设置过的
lessonChart = echarts.init(canvas, null, { //echarts会继承父元素的宽高
width: width,
height: height,
});
lessonChart.setOption(this.getLineOption()); //这一步是给echarts 设置数据及配置项
return lessonChart; //一定要return出去
});
},设置配置项
//这里的配置项与pc端一样
getLineOption(xData, data) {
var lineStyle = {
color: {
type: 'linear',
x: 0,
x2: 1,
colorStops: [{
offset: 0,
color: "#4a5e6b" // 0% 处的颜色
}, {
offset: 0.5,
color: '#5cd6cb' // 50% 处的颜色
},
{
offset: 1,
color: '#4a5e6b' // 100% 处的颜色
},
],
global: false // 缺省为 false
},
width: 4
}
var option = {
color: ["#73ffe4"],
tooltip: {
trigger: "axis",
position: function(pos, params, dom, rect, size) {
return [pos[0] - 35, '10%'];
}
},
grid: {
show: true,
borderColor: "transparent",
backgroundColor: bgcolor,
top: 30,
bottom: 20,
right: 0
},
textStyle: {
color: "#fff",
},
xAxis: {
type: 'category',
boundaryGap: true,
data: workMonthArr, //异步请求的数据
axisTick: {
alignWithLabel: true,
inside: true
},
axisLabel: {
align: "center",
fontSize: 10
},
axisLine: {
lineStyle: {
color: "#697082",
},
},
},
yAxis: {
x: 'center',
type: 'value',
name: "数量",
nameTextStyle: {
color: "#a4a4ae"
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: "#47516f"
}
},
axisLine: {
lineStyle: {
color: "#697082",
},
},
},
series: [{
type: 'line',
smooth: true,
data: workCountArr, //异步请求的数据
lineStyle
}]
};
return option;
},