微信小程序+ECharts实现引用函数数组动态刷新

2023-06-0408:57:11APP与小程序开发Comments888 views字数 2487阅读模式

小程序中实时(间隔1秒等)获取的数据,可能是网络数据,也可能是小程序中某函数产生的数据,需要同步数据更新频率显示出来。点击按钮才显示折线图,不点击不显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

显示效果:X轴为一个数据dataT,即计数。Y轴有两个数据(dataPV, dataSP),同X轴同步变化(我这里的多个数据其实可以用一个大数组包下,但没学会)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

微信小程序+ECharts实现引用函数数组动态刷新

1,从ECharts官网下载echarts,可以全部下载,也可以定制下载,我需要折线图,选择定制下载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

下载网站:ECharts 在线构建 (apache.org),下载时选择需要的图表,不选择工具集(工具集有保存图表为图片等功能)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

2,将ec-canvas拷贝到小程序目录中,并代替定值下载的js文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

3,在.json中定义:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

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

4,在.wxml中插入图表:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

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

5,在.wxss中定义样式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

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

5,在.js中引入图表:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

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

以上在其它很多地方都有详细介绍,不明白的地方可以参考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

3,在.wxml中添加按钮,点击按钮显示图表:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

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

4,以下为.js的全部代码(尽量标注清楚了)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

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
 }
    ]
 }
}

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/44294.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/44294.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定