小程序中如何使用echarts

最新推荐文章于 2025-06-26 11:06:52 发布

王冬阳

最新推荐文章于 2025-06-26 11:06:52 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序技巧前端---技术博客

本文链接：https://blog.youkuaiyun.com/wangdongyanglys/article/details/96431943

本文介绍了在微信小程序中使用Echarts进行柱状图和饼图展示的方法。首先从github获取小程序适配的echarts库，然后在wepy框架下引入，并全局定义chart变量。接着在data中设置lazyLoad为true，创建canvas元素，并编写绘制饼图的方法。最后，采用与web端不同的初始化图表方式进行图表渲染。

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

需求是项目里的对比数据，占比要用柱状图和饼图，看了一下小程序开发文档，里面有个canvas，和想要的效果有些差别，于是决定用echarts来实现。问题来了，echarts官网没有小程序版本，查资料，发现是有大神已经在github上发布过了，这就很轻松了，直接去上面下载echarts，地址：https://github.com/ecomfe/echarts-for-weixin

1，引入（wepy框架下）

将下载好的ec-canvas文件夹放到\src\libs目录下，然后在.wpy界面引入使用

2，全局定义chart变量

let chart= null

3，data中懒加载

ec: { lazyLoad: true },

4，建立元素

<!-- 图形部分 -->
      <view class="chart manageChart" hidden="{
  
  {firstShow}}">
        <!-- <view class="provideTitle">资金量/亿</view> -->
        <ec-canvas id="initManage" canvas-id="initManage" ec="{
  
  { ec }}" class="ec-canvas"></ec-canvas>
      &l