微信小程序获取数据接口动态渲染Echarts折线图

上篇文章介绍的是最简单的折线图配置方法，若是放到开发的项目中还需要进行一些改动，比如，如何调用接口获取数据动态渲染折线图：

为了更好的体验项目开发中调取接口获得数据渲染折线图，我让朋友给我开发了接口模拟了一些假数据部署到服务器上，因为加了时间筛选功能，所以只模拟了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