如何在微信小程序中实现数据动态改变的图表

最新推荐文章于 2024-09-12 18:14:16 发布

欧阳淞

最新推荐文章于 2024-09-12 18:14:16 发布

阅读量440

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_46050450/article/details/131092959

版权

本文介绍了如何在微信小程序中集成echarts库，创建数据动态改变的图表。首先在.wxml文件中设置图表容器，然后在js文件中导入echarts并初始化组件。在onLoad函数中调用init方法，利用echarts的setOption方法设置图表选项，其中包括动态数据源。最后，定义图表的系列和坐标轴。

摘要由CSDN通过智能技术生成

如何在微信小程序中实现数据动态改变的图表

1. 在.wxml 文件中创建一个图表容器

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

2. 书写样式，容器必须要有宽高

ec-canvas {
  width: 100%;
  height: 100%;
}

3. 书写js文件

1. 引用ec-canvas文件
import * as echarts from '../../ec-canvas/echarts';

2.在Page.data中书写ec
ec: {
      lazyLoad: true // 延迟加载
    }

3. 在onLoad函数中书写
onLoad(options) {
    this.echartsComponnet = this.selectComponent('#mychart-dom-bar');
    this.init();
  },
      
4. 初始化图表
init:function() {
    this.echartsComponnet.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      chart.setOption(this.getOption());
      return chart
    })
  },
      
5. 书写图表option
getOption() {
    var option = {
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['', '2015', '2016', '2017'],
          ['Matcha Latte', 43.3, 85.8, 93.7],
          ['Milk Tea', 83.1, 73.4, 55.1],
          ['Cheese Cocoa', 86.4, 65.2, 82.5],
          ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
      },
      yAxis: { type: 'category' },
      xAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };
    return option;
  },