微信小程序使用echarts动态获取数据

狸狸1009

已于 2022-04-11 15:11:19 修改

阅读量6k

点赞数 9

分类专栏：微信小程序文章标签：微信小程序

于 2022-04-11 15:05:42 首次发布

本文链接：https://blog.csdn.net/dongyang1124/article/details/124099117

版权

本文介绍如何在微信小程序中使用ECharts动态获取并绑定数据。通过改造官方pie示例，详细讲解了index.js、index.json、index.wxml和index.wxss四个文件的编写过程，强调了在ec-canvas外需包裹标签并设置宽度和高度以确保图表正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Number2 echarts动态获取数据

继续上一篇，结合echarts动态获取数据
官方提供了一个微信与echarts相结合的数据，里面就是简单的各种工具，数据获取没有进行动态绑定，各种搜索资料最后编写了一个动态获取数据的方法
这里以官方示例pie做改造
1.index.js

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

const app = getApp();
function setOption(chart,piedata){
  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: piedata
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      //onInit: initChart
         // 将 lazyLoad 设为 true 后，需要手动初始化图表
         lazyLoad: true
    }
  },
  initpie:function(piedata){
    let ecComponent = this.selectComponent('#mychart-dom-pie');
    ecComponent.init((c