微信小程序中使用ECharts&怎么动态绑定数据？报表数目不确定怎么办？

最新推荐文章于 2025-04-18 10:12:17 发布
最新推荐文章于 2025-04-18 10:12:17 发布
阅读量2.5k 收藏 33
点赞数 10
分类专栏： 微信小程序 文章标签： 微信小程序中使用ECharts 微信小程序中使用ECharts的坑 微信小程序中使用ECharts不显示图表 微信小程序中实现两个或多个ECharts图表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42063951/article/details/102380863
版权

快速到达官网：ECharts官方网址说明

微信开发者工具中使用ECharts

下载ECharts官方给的GitHub项目：传送门
如果网络不行可以下载gitee的：传送门
在这里插入图片描述

然后我们把下载好的echarts-for-weixin-master文件解压
在这里插入图片描述

然后打开微信开发者工具，选择小程序=》点击导入项目=》目录选择刚才的解压文件夹=》AppID用测试号=》点击导入
在这里插入图片描述
然后我们就打开到了官方Demo项目，里面有很多报表供参考，你可以预览一下，后续我会用官方的事例来说一些使用中存在的问题。
在这里插入图片描述

然后官方封装好的组件代码都在ec-canvas这个文件夹
在这里插入图片描述
然后我简单的说一下在我们自己的项目中要怎么引入ECharts，因为使用方式就是引用组件，我就简单说一下流程，首先我们要将ec-canvas文件夹拷贝到自己的项目中，然后接下来我都会以pie饼状图为例子解说，因为pie的代码比较简洁，说起来比较清晰， 接着要修改配置pages下4个文件，json文件需引入"ec-canvas"组件 ，注意一下自己的目录层级，别搞错路径了
在这里插入图片描述
wxml文件需要引入<ec-canvas></ec-canvas>组件标签，然后外层要套一次view标签，然后view标签可以设置position或者弹性布局display，但是需要注意的是如果你只用弹性布局的话，需要给ec-canvas标签添加实高，不然报表会不显示，具体看下面GIF。
在这里插入图片描述
然后js文件要导入echarts文件（别搞错路径了，否知会报错echarts is a not function等东西），然后初始化报表方法initChart要写在Page外面，然后要在data里的ec对象的onInit属性绑定initChart初始化方法。
在这里插入图片描述
好了，经过以上步骤，就可以简单的导入一个图表了。

怎么动态绑定数据？

可以显示报表后你会发现一个问题，从后端接口拿到数据后要怎么绑定到表里面咧？其实在官方按钮的延迟加载图表中可以找到答案，但是你会发现它是手动的，并且js里面很多没用的东西，
在这里插入图片描述
所以接下来依旧以pie饼状图为例子，其实就是把加载方式换成异步的形式，然后再拿到后端的数据后在进行页面的渲染，具体看下面代码，拷贝代码替换掉官方原先pie饼状图例子里的js代码就好了

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

//设定EChart报表的状态
function setOption(chart, color_arr, series_data) {
  var option = {
    backgroundColor: "#ffffff",
    color: color_arr,
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '60%'],
      data: series_data
    }]
  };
  chart.setOption(option);
}

Page({
  data: {
    ec: {
      // onInit: initChart
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用后端数据
    // wx.request({
    //   url: `https://xxx.com/`,
    //   data: {
    //     id: '123'
    //   },
    //   method: 'GET',
    //   header: {
    //     'content-type': 'application/x-www-form-urlencoded'
    //   },
    //   success: function (res) {
    // console.log(res)

    // 这里开始我们假设已经从后端拿到了数据
    let color_arr = ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"];
    let series_data = [{
      value: 55,
      name: '北京'
    }, {
      value: 20,
      name: '武汉'
    }, {
      value: 10,
      name: '杭州'
    }, {
      value: 20,
      name: '广州'
    }, {
      value: 38,
      name: '上海'
    }];
    // 获取组件
    let ecComponent = this.selectComponent('#mychart-dom-pie');
    ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
      setOption(chart, color_arr, series_data);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });

    //   }
    // })

  },
});

另外，因为使用了异步加载，所以不用在data里面绑定初始化的方法，所以可以把代码写成这个样子：

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

Page({
  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用后端数据
    // wx.request({
    //   url: `https://xxx.com/`,
    //   data: {
    //     id: '123'
    //   },
    //   method: 'GET',
    //   header: {
    //     'content-type': 'application/x-www-form-urlencoded'
    //   },
    //   success: function (res) {
    // console.log(res)

    // 这里开始我们假设已经从后端拿到了数据
    let color_arr = ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"];
    let series_data = [{
      value: 55,
      name: '北京'
    }, {
      value: 20,
      name: '武汉'
    }, {
      value: 10,
      name: '杭州'
    }, {
      value: 20,
      name: '广州'
    }, {
      value: 38,
      name: '上海'
    }];
    // 获取组件
    let ecComponent = this.selectComponent('#mychart-dom-pie');
    ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
      this.setOption(chart, color_arr, series_data);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });

    //   }
    // })

  },
  //设定EChart报表的状态
  setOption(chart, color_arr, series_data) {
    var option = {
      backgroundColor: "#ffffff",
      color: color_arr,
      series: [{
        label: {
          normal: {
            fontSize: 14
          }
        },
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['40%', '60%'],
        data: series_data
      }]
    };
    chart.setOption(option);
  }

});

报表数目不确定怎么办？

如果报表的数目确定的话很好办，官方给的demo有给出来，模拟器滚动到页底就可看到，page名是multiCharts
在这里插入图片描述

方法一

第一种是直接通过JS循环遍历实现，具体看下面代码，拷贝代码替换掉官方原先pie饼状图例子里的js代码就好了

import * as echarts from '../../ec-canvas/echarts';
Page({
  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用后端数据
    // wx.request({
    //   url: `https://xxx.com/`,
    //   data: {
    //     id: '123'
    //   },
    //   method: 'GET',
    //   header: {
    //     'content-type': 'application/x-www-form-urlencoded'
    //   },
    //   success: function (res) {
    //     console.log(res)

    // 这里开始我们假设已经从后端拿到了数据
    let color_arr = ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"];
    let chartData = [{
        title: '报表一',
        data: [{
          value: 40,
          name: '北京'
        }, {
          value: 30,
          name: '广州'
        }, {
          value: 30,
          name: '上海'
        }]
      },
      {
        title: '报表二',
        data: [{
          value: 20,
          name: '武汉'
        }, {
          value: 10,
          name: '杭州'
        }]
      },
    ]
    this.setData({
      chartData: chartData
    })
    chartData.forEach((e, index) => {
      let itemData = e.data;
      // 获取组件
      let ecComponent = this.selectComponent(`#mychart-dom-bar-${index}`);
      ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
        this.setOption(chart, color_arr, itemData);
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    })

    //   }
    // })
  },

  //设定EChart报表的状态
  setOption(chart, color_arr, itemData) {
    var option = {
      backgroundColor: "#ffffff",
      color: color_arr,
      series: [{
        label: {
          normal: {
            fontSize: 14
          }
        },
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['40%', '60%'],
        data: itemData
      }]
    };
    chart.setOption(option);
  }
});

然后把wxml改成下面代码

<!--index.wxml-->
<view class="container">
  <block wx:for="{{chartData}}" wx:for-index="index" wx:key="this">
    <text>{{item.title}}</text>
    <ec-canvas id="mychart-dom-bar-{{index}}" canvas-id="mychart-pie" ec="{{ec}}"></ec-canvas>
  </block>
</view>

为了方便观看，我们把wxss改成下面代码

/**index.wxss**/
ec-canvas {
  width: 100%;
  height: 30%;
}

最后我们看一下效果

在这里插入图片描述

方法二

另外我还在兔子先生的文章看到了通过改变源码动态传参的方式实现的，试了下不错，不过改起来较麻烦，具体看下面。
首先我们打开ec-canvas.js文件，按Ctrl+F快速定位找到properties对象，在对象里面新增一个自定义参数：chart_item: { type: Object}，
在这里插入图片描述
紧接着按Ctrl+F快速定位找到onInit初始化方法，在后面补上我们刚才定义的参数：this.data.chart_item，
在这里插入图片描述
接着js的话，在初始化方法initChart里面多接收我们刚才自定义的参数，并且将它赋值到option 对象对应的参数里面，

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

const app = getApp();

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

  var option = {
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '60%'],
      data: chart_item
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用后端数据
    // wx.request({
    //   url: `https://xxx.com/`,
    //   data: {
    //     id: '123'
    //   },
    //   method: 'GET',
    //   header: {
    //     'content-type': 'application/x-www-form-urlencoded'
    //   },
    //   success: function (res) {
    //     console.log(res)

    // 这里开始我们假设已经从后端拿到了数据
    let chartData = [{
        title: '报表一',
        data: [{
          value: 40,
          name: '北京'
        }, {
          value: 30,
          name: '广州'
        }, {
          value: 30,
          name: '上海'
        }]
      },
      {
        title: '报表二',
        data: [{
          value: 20,
          name: '武汉'
        }, {
          value: 10,
          name: '杭州'
        }]
      },
    ]
    this.setData({
      chartData: chartData
    })

    //   }
    // })
  },
});

接着在wxml中需要在组件里绑定我们自定义参数

<!--index.wxml-->
<view class="container">
  <block wx:for="{{chartData}}" wx:for-index="index" wx:key="this">
    <text>{{item.title}}</text>
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-pie" ec="{{ec}}" chart_item="{{item.data}}"></ec-canvas>
  </block>
</view>

同样的，为了方便观看，我们把wxss改成下面代码

/**index.wxss**/
ec-canvas {
  width: 100%;
  height: 30%;
}

效果的话和方法一是一样的，不展示了。over

利用Echarts绘制图表绑定数据
weixin_44544845的博客
06-13 1933
在一个项目中往往不少于图表的绘制，而绘制图表也更能使数据呈现一个清晰明了的范畴。Echarts是一个纯Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，提供直观、生动、可交互、可高度个性化定制的数据可视化图表。今天，就让我们来学习一下Echarts绘制图表绑定数据。在绘制图表的时候一定要先引用Echarts的插件。 2、利用Echarts绘制图表绑定数据的时候，首先第一...
模拟面试面试题汇总 
u011526274的博客
04-27 3230
模拟面试面试题汇总 第一轮面试题 一、描述下数据库中的事务--ACID各个的特点。 原子性：事务中的操作要么全部成功要么全部失败。 一致性：事务前后数据的完整性必须保持一致。 隔离性：多个并发的事务之间是相互隔离的，互不干扰的。 持久性：事务提交后，数据是永久改变的。 二、什么是springboot？你们公司是用的哪个版本？ SpringBoot是Spring推出用于解决传统框架配置文件冗余,装配组件繁杂的基于Maven的解决方案,旨在快速搭建单个微服务。 版本号：2...
微信小程序 echarts表绑定数据
a1498665771的博客
05-27 897
微信小程序 echarts表绑定数据 因最近需要做图表相关小程序，需要使用echarts，然微信小程序乃至echarts官方文档对如何在微信小程序中对echarts图表进行数据绑定所述甚少，在查阅借鉴大量博文和亲自踩坑后，总结如下，方便之后使用 一、echarts图表绑定静态数据 1.图表懒加载 注意：因为页面程序在加载时会优先加载图表，其次才会加载其他内容，但是此时图表数据还未加载出来，因此需要先使其懒加载。 Page({ /** * 页面的初始数据 */ data: { ec
echarts的series数据不确定，循环data方法
qq_30351747的博客
01-21 3695
echarts的series数据不确定，循环data方法 描述 根据el-tree复选框选中的数量决定折线图线的数量，这样就会造成series里的数据的数量是动态的。 代码 <template> <div id="app"> <div id="main" style="width: 100%; height: 100%"></div> </div> </template> <script> import *
一文解析微信小程序Echarts动态使用及图表层级踩坑解决方案
最新发布
健健的博客
04-18 415
最近收到一个需求，要在小程序上去做数据看板，能让公司运营和老板看到那些销售的数据情况。这就导致需要我去重新捡起Echarts了，距离上一次用它还是五年前了吧。不过好在现在的Echarts已经能很好的适配微信小程序了，不需要处理一些额外的bug，只需要看着官方的案例和文档去做就行。但是，官方给的Echarts示例都是简易的、静态的，数据也都是固定的，还得需要自己去做动态适配，在做的过程中，还发现了当使用Vant组件弹出层置顶的时候，底部的Echarts图的层级会盖住弹出层的层级。
微信小程序中使用ECharts并动态赋值
qq_34965759的博客
07-04 2170
主要讲一下如何动态配置ECharts
ECharts.js学习（二）动态数据绑定
weixin_30825199的博客
08-28 378
参考 自 http://www.cnblogs.com/leoxuan/p/6513591.html Echarts数据绑定 简单的统计表已经可以生成，不过之前图标数据都是直接写在参数里面的，而实际使用中，我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。 绑定多组数据 很多时候需要展示的数据不...
微信小程序中wxcharts报表使用的简易指南
wxcharts 在数据接口和事件处理方面也做了微信小程序特有的适配，使其更适合在微信环境中使用。 **3. 安装和引入** 要在微信小程序中使用 wxcharts，首先需要通过 npm 或者其他包管理工具安装到项目中。安装完成后...
综合一
刘群智的博客
07-27 4386
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： &lt;div id="outer"&gt;   &lt;div id="sidebar" style="height:240px;"&gt;固定宽度区&lt;/div&gt;   &lt;d
echart分组柱形图绑定数据
bai0101的专栏
03-22 551
<!DOCTYPEhtml> <head> <metacharset="utf-8"> <title>ECharts&lt;/title> </head> <body> <!--选择商品--> <Formac...
微信小程序中使用动态echarts
weixin_62912286的博客
01-14 1856
微信小程序使用动态echarts
echarts-for-weixin-master.zip
04-15
GitHub 上的 ecomfe/echarts-for-weixin 项目源码。ec-canvas 是提供的组件，其他文件是如何使用该组件的示例。
echarts-for-weixin-master.rar
06-09
ec-canvas使用案例
图表数据的绑定
weixin_44543305的博客
05-06 752
一． 绘画图表说明 1． 图标的绑定是一种把数据显示更加的透明直白的展现给人们看的数据，在图1 里面就是把 数据以图表的形式，图表有很多形式，其中在图1里面其实就是其中之一的一种形式而已 ，图1的是一种饼状图，还有柱状图，等等，这些图来源以其中的echarts图标插件里面! 图1 饼状图 2. 你要用到echarts首先呢？就要一个插件的引用了，引用完成后，在echarts里面绘画图 表，还得...
mint-ui 单选列表Radio以及多选列表Checklist的引入
技术需要沉淀，兴国需要科技！
01-08 1898
mint-ui 的使用文档略简单，经过摸索和踩坑后总结最终的使用方法。希望能帮助到你
微信小程序使用动态数据echarts
01-13 892
echarts官网教程： https://github.com/ecomfe/echarts-for-weixin下载地址 下载后把ec-canvas文件放自己项目中 引入： 在那个文件中使用就在改json中引入 "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } 例子： <view style="width:100%;height:200px;"> <ec-canvas id="mych
Echarts的用法及动态数据的加载
weixin_30885111的博客
12-16 117
打开官网--》点击下载echarts.js http://www.echartsjs.com/download.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Echarts&lt;/title&...
微信小程序图表插件 echarts-for-weixin
有勇气的牛排博客
07-28 2305
有勇气的牛排 官网 https://lgch.xyz/ http://920z.net/ 微信小程序总结大全 下载地址 https://github.com/ecomfe/echarts-for-weixin/tree/master/pages 使用 index.wxml <view class="container"> <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-c
小程序基本命令
aiven1637的博客
10-30 3426
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值