微信小程序引用echarts做统计图

访问https://github.com/ecomfe/echarts-for-weixin,下载文件后,把ec-canvas整个文件夹复制到我们的小程序项目中

然后在需要使用echarts的页面的json中引入组件

js文件中也要引入:import * as echarts from '../../ec-canvas/echarts'

然后在wxml文件中引入组件ec-canvas

<view class="container">

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

</view>

其中 ec 是一个我们在 index.js 中定义的对象,它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下:

function initChart(canvas, width, height, dpr) {

const chart = echarts.init(canvas, null, {

width: width,

height: height,

devicePixelRatio: dpr // 像素比

});

canvas.setChart(chart);

var option = {

...

};

chart.setOption(option);

return chart;

}

Page({

data: {

ec: {

onInit: initChart

}

}

});

发布时,如果包体积太大,可以在 https://echarts.apache.org/zh/builder.html网页下载仅包含必要组件的包,并且选择压缩,比如如果只用到了柱状图,就只用选择柱状图,文件包就会小很多

下载的文件放在 ec-canvas/echarts.js注意一定需要重命名为 echarts.js

相关推荐
00后程序员张6 小时前
HTTPS单向认证、双向认证、抓包原理与反抓包策略详解
网络协议·http·ios·小程序·https·uni-app·iphone
梦梦代码精8 小时前
LikeShop按摩到家系统:2026年本地生活创业新风口,上门服务O2O源码私有化部署实战
大数据·docker·小程序·uni-app·生活·高并发·开源软件
leduo668899o9 小时前
商城小程序自由容器支持图片自适应详解:从入门到实战全攻略
小程序
这是个栗子10 小时前
【uni-app微信小程序问题解决】Uni-app 微信小程序组件不渲染
微信小程序·小程序·uni-app
倒流时光三十年11 小时前
第四章 WXSS 样式系统与布局
spring boot·微信小程序
万岳科技系统开发11 小时前
外卖跑腿配送开发搭建指南:从用户下单到配送完成全流程解析
大数据·前端·小程序
靠谱品牌推荐官11 小时前
【高性能工程】每秒万次物联网数据高频握手:如何设计一套抗丢包的工业级小程序后端微服务架构?
物联网·小程序·架构
靠谱品牌推荐官11 小时前
【高并发实战】如何基于缓存穿透治理机制设计一套高可用的小程序本地缓存中台架构?
缓存·小程序·架构
小羊Yveesss11 小时前
商家小程序外卖订单打印方案:云打印机对接、分单逻辑与模板配置实战
小程序·apache
爱学习 爱分享1 天前
微信小程序html 在 webview 会打开再缩放一下
微信小程序·小程序·html