小程序使用echarts动态更新数据--根据事件,绝对满足你

在小程序中使用echarts的格式如下,首先是初始化:

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

这个是官网的,将上面的const改成let,将chart提出到最外面范围,不在方法里面,上面就变成

let chart;
function initChart(canvas, width, height) {
chart= echarts.init(canvas, null, {
    width: width,
    height: height
  });

就变动这里,其他都不用变,用过echarts都知道先初始化,然后改数据是通过chart.setOption({}),这里面就是上面要改变的var option={}内容,动态数据就是改它,例子如下

 myChart.setOption({
      title:{
        text:list.year+"年销售",
        textStyle:{
            fontSize:13,
        }
    },
      xAxis:[
        {
            name:'月份',
            type:'category',
            boundaryGap: false,
            data:list.months
        }
    ]
    ,
    yAxis:[{
        name:'万',
        type:'value',
    }],
    series:[
        {
            name:'销售目标',
            type:'line',
             stack:'总量',
            data:list.planSale,
        },
        {
            name:'销售额度',
            type:'line',
            stack:'总量',
            data:list.soldMonths,
        }
    ]
     })
       
   })

就是那么简单动态可以是根据事件,或者是定时器等来决定,网上一堆。。乱七八糟的东西,要不是之前学习过echarts真被带偏,echarts重点:
第一 是固定容器
第二 echarts初始化,实例化,相关配置,忘记的看官网

echarts.init(canvas, null, {
   width: width,
   height: height
 });

第三 就是从实例化的echarts,就是对象改配置

おすすめ

転載: blog.csdn.net/weixin_43591127/article/details/116662749