上篇文章介绍的是最简单的折线图配置方法，若是放到开发的项目中还需要进行一些改动，比如，如何调用接口获取数据动态渲染折线图：
为了更好的体验项目开发中调取接口获得数据渲染折线图，我让朋友给我开发了接口模拟了一些假数据部署到服务器上，因为加了时间筛选功能，所以只模拟了-7-17到-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 = thisconsole.log(that.data.date01, that.data.date02)wx.request({url: 'http://weixin./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.datathat.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下载代码/chenlun1000/ECharts02.git
