微信小程序使用echarts动态生成图表

关注

原创最新推荐文章于 2026-03-05 00:07:44 发布 549 阅读 AI 写同款· GEO 优化 ›

有没有在使用echarts的时候有遇到困难呢~

问题：小程序图标生成可以根据节点和时间的选择动态生成对应的图表。可是，数据改变的时候，图表还是一动不动。上网扒拉了很多都没有能够解决我的问题。
这篇博文给了我启发：https://www.cnblogs.com/chenwolong/p/15625564.html，监听数据的变化，再重新初始化，解决问题。
记录记录，以免忘记。
在这里插入图片描述

//获取像素比
const getPixelRatio = () => {
  let pixelRatio = 0
  wx.getSystemInfo({
    success: function (res) {
      pixelRatio = res.pixelRatio
    },
    fail: function () {
      pixelRatio = 0
    }
  })
  return pixelRatio
}

let dpr = getPixelRatio()

function initRadar(canvas, width, height,data) {

  chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr
  });

  canvas.setChart(chart);
  //温湿度
  data.value2.reverse();
  var  option = {
      title: {
      text: data.name+'温湿度曲线图',
      left: 'center',
      textStyle:{  //主标题文字样式
        color: '',  //主标题颜色
        fontStyle: 'normal',  //主标题字体风格 normal默认，italic斜体，oblique斜体
        fontWeight:'normal',  //主标题文字粗细， normal正常，bold加粗，bolder加粗，lighter变细
        fontFamily: 'san-serif',  //主标题文字字体，默认微软雅黑
        fontSize:14  //主标题字体大小 默认18px
      }
      },
      legend: {
        data: ["温度", "湿度",'THI'],
        left: 'center',
        y:'top',
        x:'center',
        top:'10%',
        z:0,
      },
      grid: {
        left:'3%',
        top:'35%',
        right: '2%',
        bottom: '5%',
        containLabel: true
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.createtime,
      },
      yAxis: [{
        name: "温度",
        x: 'center',
        type: 'value',
        axisLabel: {
          formatter: '{value} ' + data.unit
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },{
        name: "湿度/THI",
        x: 'center',
        type: 'value',
        axisLabel: {
          formatter: '{value} ' + data.unit2
        }
      }],
      series: [ {
        name: "温度",
        type: 'line',
        showSymbol: false,
        smooth: true,
        data: data.value
      },{
        name: "湿度",
        type: 'line',
        showSymbol: false,
        smooth: true,
        yAxisIndex: 1,
        data: data.value2
      }
      ,{
        name: "THI",
        type: 'line',
        showSymbol: false,
        smooth: true,
        yAxisIndex: 1,
        data: data.thi
      }]
    };

  chart.setOption(option);
  return chart;
}

在这里插入图片描述

ec-canvas.js 改造。
![(https://img-blog.csdnimg.cn/ed0737c9c19b4e9bb9af5c7efe58c8af.png)