微信小程序如何给Echarts加载动态数据?

在微信小程序开发中如何给Echarts加载动态数据?从云服务器中读取数据并缓存,定义全局变量,然后在series中加载此数据即可。

import * as echarts from '../ec-canvas/echarts';       
...
//定义全局变量newdata,用于存储数据
var newdata=[];
Page(
  {
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦!',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
    // 查询所有数据
  onLoad: function (options) {
        //查询语句
     
     })
  
    newdata=[res[0].one,res[0].two,res[0].three,res[0].four,res[0].five]
   //将获取到的信息存到缓存中
    wx.setStorage({
      key: 'newdata',
      data: res
    })
    try {
      wx.setStorageSync('newdata', res)
    } catch (e) {
    }
  })
  },
    
  data: {
    ec: {
      onInit: initChart
    }
  },
  onReady() { 
  },
  echartInit(e) {
    initChart(e.detail.canvas, e.detail.width, e.detail.height);
  }
});
function initChart(canvas, width, height) {
  var that=this;
  const chart = echarts.init(canvas, null, {
    width:width,
    height:height,
  });
  canvas.setChart(chart);
 //以下为图示代码
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} 
{b} : {c} ({d}%)", rich:{} //保证在手机端显示正常 }, color: ['#c23531', '#2f4554','#91c7ae', '#61a0a8', '#d48265', ], // 图例组件lengend legend: { //样式设置 }, series: [ { //测试数据 data: [ { value:newdata[0], name: '字段一' }, { value:newdata[1], name: '字段二' }, { value:newdata[2], name: '字段三' }, { value:newdata[3], name: '字段四' }, { value:newdata[4], name: '字段五' }, ], ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, fontsize:12, fontFamily:'Microsoft YaHei', //字体样式 shadowColor: 'rgba(0, 0, 0, 0.5)' } }, itemStyle: { normal: { label: { show: true, formatter: '{d}%', rich:{} //保证在手机端显示正常 } }, labelLine: { show: true} } } ] }; chart.setOption(option); return chart; }

 

你可能感兴趣的:(微信小程序)