|
上篇文章介绍的是最简单的折线图配置方法，若是放到开发的项目中还需要进行一些改动，比如，如何调用接口获取数据动态渲染折线图：
为了更好的体验项目开发中调取接口获得数据渲染折线图，我让朋友给我开发了接口模拟了一些假数据部署到服务器上，因为加了时间筛选功能，所以只模拟了2019-7-17到2019-7-23这7天内的数据，其余时间段数据为0，如果进行测试的话，就选这个时间段筛选就行。
项目准备：
1、拷贝 ec-canvas 目录到项目根目录下，对于该文件内的echarts.js文件，可以使用最新版本项目中自带的，也可以去官网下载自定义构建的（自定义构建的目的就是缩小文件，针对性的下载自己需要的数据图表，注意自定义下载下来的文件名为echarts.min.js，重新引入到ec-canvas 目录中的时候需要修改为echarts.js，不然会有报错）；
2、配置index.json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
},
"navigationBarTitleText": "更多数据"
}
3、在index.wxml中引入 <ec-canvas> 组件
<view class="container">
<ec-canvas id="mychart" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
4、重点来了，在js文件中开始写函数了
js文件最顶部先引入import * as echarts from '../../ec-canvas/echarts';
//data中配置
ec: {
lazyLoad: true
}
onLoad页面初始化创建组件，调用初始化echarts函数：
onLoad: function () {
this.echartsComponnet = this.selectComponent('#mychart');
this.init_echarts()
},
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
width: width,
height: height
});
Chart.setOption(this.getOption());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return Chart;
});
},
// 获取数据
getOption: function () {
var that = this
// 前台配置折线线条表示属性
// 使用for in 遍历对象拿出name,并配置icon和textStyle，最后放入新建的legendList数组中
var legendList = []
for (var i in that.data.series) {
var obj = {
name: that.data.series[i].name,
icon: 'circle',
textStyle: {
color: '#000000',
}
}
legendList.push(obj)
that.data.series[i].data.reverse()
}
var option = {
// 折线图线条的颜色
color: ["#37A2DA", "#67E0E3"],
// 折线图的线条代表意义
legend: {
itemWidth: 5, //小圆点的宽度
itemGap: 25,
selectedModel: 'single', //折线可多选
inactiveColor: '#87CEEB',
data: legendList,
bottom: 0,
left: 30,
z: 100
},
// 刻度
grid: {
containLabel: true
},
// 悬浮图标
tooltip: {
show: true,
trigger: 'axis',
position: function (pos, params, dom, rect, size) {
var obj = {
top: 60
};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: that.data.ascissaData.reverse()
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: { //y轴坐标是否显示
show: false
},
axisTick: { //y轴刻度小标是否显示
show: false
}
},
series: that.data.series
}
return option
},
// 点击查询按钮调用接口获取折线图数据
getChartData: function () {
var that = this
console.log(that.data.date01, that.data.date02)
wx.request({
url: 'http://weixin.frp.kaigejava.com/salary/getSalaryByDate',
data: {
start: that.data.date01,
end: that.data.date02,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
// 'Authorization': 'Bearer ' + wx.getStorageSync('token')
},
success: function (res) {
console.log(res);
var data = res.data.data
that.setData({
series: data.series,
ascissaData: data.ascissaData //默认横坐标
})
that.init_echarts()
}
})
},
最后是日期选择器：
// 日期选择器
bindDateChange01: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date01: e.detail.value
})
},
bindDateChange02: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date02: e.detail.value
})
},
为了更好的体验demo的实现效果，欢迎来我的git下载代码https://github.com/chenlun1000/ECharts02.git
| 
转播
