微信小程序利用Echarts组件实现实时动态曲线

前言

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。因此，ECharts团队和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。

参考链接

结合ECharts官方提供的文档，也是很重要的，这里给出官方提供的文档，以便后续需要深究时候可以获取到最新的开发建议
链接: 在微信小程序中使用 ECharts
为了不赘述大家在网上已经搜索到的相关博客，这里先引用出两篇很实用的博客（里面可能也存在些许问题，但是可以结合一下评论找到解决）
1.小程序中引入 Echarts 并给出了其简单的使用方法
链接: 微信小程序——Echarts使用（保姆式教程）
2.曲线动态实时刷新
链接: 微信小程序实现Echarts图的动态实时刷新

最终实现代码

结合上面的三个参考链接，如何在自己项目中嵌入Echarts组件，就不再赘述了，直接先上演示（没能上传动图，但实际上这个曲线是动态实时显示的，而不是刷新显示），然后提供代码。

.js

代码中关于引用的 echarts 路径需要根据自己的位置进行更改

import * as echarts from '../../ec-canvas/echarts';const app = getApp();let cc = 0;//横坐标序数累加let xAxisArray = new Array();//横坐标let yAxisArray = new Array();//纵坐标let timer;//定时刷新，页面退出后关闭定时器//曲线设置function setOption(chart, xdata, ydata) {  const option = {    title: {      text: '实时声功率计曲线(开发中)',      left: 'center',      textStyle: {        color: '#333',        fontWeight: 'bold',        fontSize: 20      },    },    grid: {      containLabel: true    },    tooltip: {      show: true,      trigger: 'axis'    },    xAxis: {      type: 'category',      boundaryGap: false,      data: xdata, //x轴上的动态数据      // show: false    },    yAxis: {      x: 'center',      type: 'value',      splitLine: {        lineStyle: {          type: 'dashed'        }      }      // show: false    },    series: [{      name: '声功率值',      type: 'line',      smooth: true,      data: ydata, //y轴上的动态数据    }],  };  chart.setOption(option)}Page({  data: {    ec: {      lazyLoad: true    },  },  /**   * 生命周期函数--监听页面加载   */  onLoad(options) {    //初始化曲线    this.init_echart()    //每隔60s刷新一次    timer = setInterval(() => {      this.getOption();    }, 200)  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady() {  },  /**   * 生命周期函数--监听页面显示   */  onShow() {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload() {    clearInterval(timer)//注销定时器  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom() {  },  // 初始化图表，放在 onLoad() 中(主要是为了得到 myChart )  init_echart: function () {    this.Component = this.selectComponent('#mychart');    this.Component.init((canvas, width, height) => {      const chart = echarts.init(canvas, null, {        width: width,        height: height      });      this.myChart = chart;//这里直接将初始化的图标传递到参数 myChart 中      return chart;    })  },  // 给图表加上数据  getOption: function () {    cc++;    var random = Math.random()*(30+0.2)-0.2;//产生一个[-0.2,30]的随机数    if (xAxisArray.length >= 30) {      xAxisArray.shift(); //如果数据超过了需要解析的最大值，则清除前面的数据，以保留最新的数值      yAxisArray.shift();    }    xAxisArray.push(cc); //将值保存在队列最后    yAxisArray.push(random);    //利用 myChart 直接绘制曲线    setOption(this.myChart, xAxisArray, yAxisArray)  },});

.json

代码中关于引用的 echarts 路径需要根据自己的位置进行更改

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

.wxml

<view class="container">  <ec-canvas id="mychart" canvas-id="mychart-multi" ec="{{ ec }}"></ec-canvas></view>

.wxss

ec-canvas {  width: 100%;  height: 100%;}.container {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  box-sizing: border-box;} 

欢迎大家留言相互讨论 O(∩_∩)O~~