小程序引入echarts图表（异步请求图表显示）

最新推荐文章于 2024-04-25 22:02:20 发布

火火火火_Shy

最新推荐文章于 2024-04-25 22:02:20 发布

阅读量799

点赞数

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

本文链接：https://blog.csdn.net/yangmy_Shy/article/details/117823938

版权

本文介绍如何在微信小程序中引入并使用Echarts进行图表展示，包括从GitHub下载微信定制版Echarts，以及如何通过Json、JS、WXML和CSS进行配置。示例中结合 vant 组件van-popup和van-picker，实现根据商品类型选择动态显示不同图表的功能。

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

（备注：以下例子小程序加入了vant组件）

第一步首先引入echarts

下载echarts微信版地址： https://github.com/ecomfe/echarts-for-weixin

（定制版的echarts体积更小，而且小程序中用到的图表种类不会很多，自己定制，然后替换掉他的echarts.js）

Json引入：

{
  "usingComponents": {
  "van-tabs": "/miniprogram_npm/@vant/weapp/tabs/index",
  "van-tab": "/miniprogram_npm/@vant/weapp/tab/index",
  "ec-canvas": "../../ec-canvas/ec-canvas",【引入echarts组件】
  "van-popup":"/miniprogram_npm/@vant/weapp/popup/index",
  "van-picker":"/miniprogram_npm/@vant/weapp/picker/index",
  "van-picker-column":"/miniprogram_npm/@vant/weapp/picker-column/index",
  "van-field":"/miniprogram_npm/@vant/weapp/field/index"
  
},
"navigationBarTitleText": "采购情况"
}

js:

// pages/demoEcharts/demoEcharts.js
// 引入echarts
import * as echarts from '../../ec-canvas/echarts';

// 获取应用实例
const app = getApp();

//建立一个全局变量（注意，放在page外面，要全局变量，可以动态修改）
var monthList = [];
var avePriceList1 = [];
var avePriceList2 = [];
var myChartTwo = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    active: 0,

    ecTwo: {
      lazyLoad: true  //在data中设置延迟加载
    },