微信小程序实现Echarts图的动态实时刷新

在微信小程序绘制折线图时，选择Echarts。官网如下：https://echarts.apache.org/zh/index.html
效果如下：（由于为截取动态图，只有实时图片结果）

微信小程序中的应用，就看在微信小程序中使用Echarts。
主要就是拷贝 ec-canvas 目录到新建的小程序项目下，然后做相应的调整。

github链接如下：https://github.com/ecomfe/echarts-for-weixin

然后正式开始在小程序中使用Echarts。我的需求是绘制温度随时间变化的折线图，温度和时间从服务器中获取，因为数据是实时刷新的，我们是10秒刷新一次数据，因此我想让折线图也动态实时刷新，于是设置刷新时间，不断刷新从服务起取数据，进而不断重新绘制图形，达到实时刷新的效果。

1.引入Echarts

（1）将ec-canvas文件拷贝下来放到你自己的项目中：

（2）在你需要使用Echarts的页面的json文件中引入Echarts

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

2.使用Echarts

在需要显示图表的页面的wxml中使用Echarts。

<view class="containera">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

在wxss设置宽度和高度

ec-canvas {
  width: 100%;
  height: 100%;
}

注：如果页面有多张图表时，要调整高度。

3.js页面设置Echarts以及动态刷新

现在是最重要的js交互代码。
（1）先引入：如官网所述，找到对应的文件夹。

import * as echarts from '../../ec-canvas/echarts';

（2）设置图的格式。这里我使用的是折线图。

我这里是想要画温度随时间变化的折线图。x轴数据和y轴数据是从服务器中取出来的。

function line_set(chart, xdata, ydata) { //xdata, ydata分别表示x轴数据和y轴数据
  var option = {
  // 设置图的title、xAxis、yAxis
    title: {
      text: '温度随时间变化图',
      left: 'center'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      name:'日期',
      axisLabel: {  //因为日期太长，显示不全，于是让横坐标斜着显示出来
        interval:0,  
        rotate:40  
     } ,
      type: 'category',
      boundaryGap: false,
      data: xdata,  //xdata是服务器读取的数据
    },
    yAxis: {
      name:'温度/℃',
      x: 'center',
      type: 'value',
      splitNumber:5,
      min: 30,
      max: 40,
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
  
    },
    series: [{
      name: '温度',
      type: 'line',
      smooth: true,
      data: ydata  // ydata也是服务器取出来的数据
    }]
  };
  chart.setOption(option);
}

设置page中的数据：

data设置图表的ec，以及动态刷新的时间间隔

data: {
   
    ec: {
      lazyLoad: true
    },
    timer:''
  },

onload函数设置调用的函数，以及设置动态刷新的函数

onLoad: function (options) {
    var _this = this;
    this.getOption();
    this.setData({                    //每隔10s刷新一次
      timer: setInterval(function () {
        _this.getOption();
    }, 10000)
    })
  },

对应的wxml中的ec-canvas id

onReady: function () {
    this.oneComponent = this.selectComponent('#mychart-dom-bar'); 
  },

初始化图表：

init_chart: function (xdata, ydata) {           //初始化图表
    this.oneComponent.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
        });
        line_set(chart, xdata, ydata)
        this.chart = chart;
        return chart;
    });
},

从服务器接口中读取数据：

getOption: function () {        
  var _this = this;
  wx.request({
      url: 'https://*******/',    //你请求数据的接口地址
      method: 'GET',
      header: {
          "Content-Type": "application/json"
      },
      success: function (res) {
        console.log(res);
        _this.setData({      
          //将接口返回的数据data赋值给data
          data:res.data,     
        })
        //将读取的数据直接存储到list中，可以直接使用
        var temperature=[];
        var date=[];
        for (var i = 0; i < res.data.length; ++i) {
            temperature[i]=res.data[i].temperature;
            date[i]=res.data[i].date;
         }
        _this.init_chart(date,temperature)             
     },      
  })  
},

完整代码如下：

import * as echarts from '../../ec-canvas/echarts';


function line_set(chart, xdata, ydata) {

  var option = {
    title: {
      text: '温度随时间变化图',
      left: 'center'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      name:'日期',
      axisLabel: {  
        interval:0,  
        rotate:40  
     } ,
      type: 'category',
      boundaryGap: false,
      data: xdata,
      // show: false
    },
    yAxis: {
      name:'温度/℃',
      x: 'center',
      type: 'value',
      splitNumber:5,
      min: 30,
      max: 40,
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '温度',
      type: 'line',
      smooth: true,
      data: ydata
    }]
  };
  chart.setOption(option);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    ec: {
      lazyLoad: true
    },
    timer:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    this.getOption();
    this.setData({                    //每隔10s刷新一次
      timer: setInterval(function () {
        _this.getOption();
    }, 10000)
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.oneComponent = this.selectComponent('#mychart-dom-bar');
 
  },
  onUnload: function () {
    clearInterval(this.data.timer)
},
  init_chart: function (xdata, ydata) {           //初始化第一个图表
    this.oneComponent.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
        });
        line_set(chart, xdata, ydata)
        this.chart = chart;
        return chart;
    });
},
getOption: function () {        
  var _this = this;
  wx.request({
      url: 'https://******/',    //你请求数据的接口地址
      method: 'GET',
      header: {
          "Content-Type": "application/json"
      },
      success: function (res) {
        console.log(res);
        _this.setData({      
          //将接口返回的数据data赋值给data
          data:res.data,     
        })
        var temperature=[];
        var date=[];
        for (var i = 0; i < res.data.length; ++i) {
            temperature[i]=res.data[i].temperature;
            date[i]=res.data[i].date;
         }
        _this.init_chart(date,temperature)           
      },   
  })  
},

这样就实现了实时动态刷新的效果，每隔10s重新画图。

希望对看到这篇博客的人有帮助。