微信小程序云开发获取数据实时动态渲染Echarts折线图

最新推荐文章于 2023-06-28 17:16:37 发布

Zh丶Zz

最新推荐文章于 2023-06-28 17:16:37 发布

阅读量3.5k

点赞数 8

文章标签：前端小程序 echarts

本文链接：https://blog.csdn.net/weixin_45065747/article/details/116939634

版权

1.先去云开发控制台创建一个数据表和一条数据，数据中num为Y轴数据，time为X轴数据，都为数组

2.配置xx.json

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

3.在xx.wxml中引入 <ec-canvas> 组件

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

4.在xx.js文件最顶部先引入import * as echarts from '../../ec-canvas/echarts';

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

5.设置好图表展示的样式配置

function setOption(chart, xdata, ydata) {
  const option = {
    title: {
      text: "折线图",
      textStyle: { color: '#333', fontWeight: 'bold', fontSize: 14 }
    },
    xAxis: {
      type: 'category',
      data: xdata,      //x轴上的动态数据
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: ydata,    //y轴上的动态数据
      type: 'line',
      color: '#ffc300'
    }]
  };
  chart.setOption(option)
}

6.下面有个“echarts”就是我们第一步创建的数据库表名（echarts），还设置了60s刷新数据一次，不想要也可自行删除代码。

Page({
  data: {
    ec: {
      lazyLoad: true
    },
    timer: ''//实时刷新，所以设置了个定时器
  },
  onLoad: function (options) {
    this.getOption();
    //每隔60s刷新一次
    this.setData({                    
      timer: setInterval(()=> {
        this.getOption();
      }, 60000)
    })
  },
  onReady: function () {
    this.Component = this.selectComponent('#mychart');
  },
  onUnload: function () {
    // 清除了定时器
    clearInterval(this.data.timer)
  },
  // 初始化图表
  init_echart: function (xdata, ydata) {
    this.Component.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setOption(chart, xdata, ydata)
      this.chart = chart;
      return chart;
    });
  },
  // 给图表加上数据
  getOption: function () {
    let db = wx.cloud.database().collection('echarts')
    db.get().then(res => {
      console.log('获取数据成功', res);
      this.init_echart(res.data[0].time, res.data[0].num)
    })
    .catch(err => {
      console.log('获取数据失败', err);
    })
  },
});

7.最后就是展示。