小程序中如何使用echarts

本文介绍了在微信小程序中使用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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值