微信+ECharts小程序实现了一组参考函数的动态刷新

小程序中实时（间隔1秒等）获取的数据可以是网络数据也可以是小程序中函数生成的数据，并且数据更新频率必须同步显示。条形图仅在单击按钮时出现，直到单击按钮后才会出现。

显示效果：X轴是数据T，是一个计数。 Y轴上有两条数据（dataPV、dataSP）与X轴同步变化（这里的多个数据其实可以包装成一个大数组，但我还没学会怎么做）。

1。从ECharts官网下载echarts。您可以完整下载它或对其进行自定义。我需要折线图，所以我选择自定义下载。

下载站点：ECharts网建（apache.org），下载时选择需要的图表，不要选择工具集（工具集有将图表保存为图片等功能）。

2。将ec-canvas复制到小程序目录下，并将下载的js文件替换为固定值。

3 在 .json 中定义：

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

4 在 .wxml 中插入图表：

<view class="my-chart">
 <ec-canvas id="lazy-mychart-dom" canvas-id="lazy-mychart" ec="{{lazyEc}}"></ec-canvas>
</view>

5 在 .wxss 中定义样式：

.my-chart {
 width: 750rpx;
 height: 500rpx;
}
ec-canvas {
 width: 100%;
 height: 100%;
}

5 在 .js 中引入图表：

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

以上内容已在许多其他内容中详细介绍有不懂的地方可以参考一下。

3。在 .wxml 中添加一个按钮，然后单击该按钮以显示图表：

 <button bindtap="changeType">折线图</button>

4。全部.js代码如下（尽量标注清楚）

import * as echarts from '../../ec-canvas/echarts'
Page({
  data: {
    times: 0,
    lazyEc: {
      lazyLoad: true
 },
    dataT: [],
    dataPV: [],
    dataSP: []
 },
 onLoad(options) {
 //获取到组件
 let that = this;
 this.lazyComponent = this.selectComponent('#lazy-mychart-dom')
 setTimeout(() => {
 this.init([])
 }, 1000)
 },
 init(optionData) { //手动初始化
 this.lazyComponent.init((canvas, width, height, dpr) => {
 let chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRation: dpr
 })
 let option = getOption(optionData)  // echarts的配置信息
 chart.setOption(option)
 this.chart = chart //将图表实例绑定到this上，方便其他函数访问
 return chart
 })
 },
 //mark:点击支出收入
 changeType(e) { //确定按钮，只按一次，可以根据需要做逻辑disable掉
 var temprrT = new Array(50).fill(0);//50个数组，根据需要修改
 var temprrPV = new Array(50).fill(0);
 var temprrSP = new Array(50).fill(0);
 var times = 0;
 this.data.dataT = this.data.dataPV = this.data.dataSP = [0];//这句好像没什么用
 var i = setInterval(() => {
 times++;
 if (times >= 50) { //同上，数据个数根据需要修改
 clearInterval(i)
 } else {
 temprrT.shift()
 temprrT.push(times)
 temprrPV.shift()
 temprrPV.push(Math.random().toFixed(2))
 temprrSP.shift()
 temprrSP.push(Math.random().toFixed(2))
 console.log('数组', temprrT, temprrPV, temprrSP)
 this.setData({
          dataT: temprrT,
          dataPV: temprrPV,
          dataSP: temprrSP
 })
 }
 let option = getOption(this.data.dataT, this.data.dataPV, this.data.dataSP)
 this.chart.setOption(option)
 }, 1000);
 },
})
//mark:getOption
function getOption(dataT, dataPV, dataSP) {
 return {
    title: {
      text: '趋势图',
      left: 'center'
 },
    color: ["#37A2DA"],
    grid: {
      containLabel: true
 },
    tooltip: {
      trigger: 'axis',
 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dataT
 },
    yAxis: {
      type: 'value',
      scale: true,//自动Y轴坐标居中
      boundaryGap: ["0.1", "0.1"],//上下留白10%
      splitLine: {
        lineStyle: {
          type: 'dashed'
 }
 }
 },
    series: [
 {
        name: 'PV',
        type: 'line',
        showSymbol: false,
        smooth: true,
        color: ["#00cc00"],
        data: dataPV
 },
 {
        name: 'SP',
        type: 'line',
        showSymbol: false,
        smooth: true,
        color: ["#f08080"],
        data: dataSP
 }
    ]
 }
}