微信小程序引用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

相关推荐
吴声子夜歌2 小时前
小程序——图片
小程序
鱼是一只鱼啊2 小时前
实战 | uni-app (Vue2) HBuilderX 项目改造为 CLI 项目,实现多客户多平台命令行自动化发布
微信小程序·vue·claude·vue-cli·.net8·自动化发布
杰建云1672 小时前
门店小程序是否有必要做
小程序·小程序搭建
Greg_Zhong2 小时前
小程序中页面和组件的区别
小程序
小马_xiaoen2 小时前
常规优化已用尽?小程序体积深层次优化实战!!!
前端·小程序·uniapp
2501_915918412 小时前
iOS App HTTPS 抓包工具,代理抓包和数据线直连 iPhone 抓包的流程
android·ios·小程序·https·uni-app·iphone·webview
TE-茶叶蛋2 小时前
从零实现H5 表格协同编辑:Yjs + WebSocket 实战
websocket·小程序·excel
吴声子夜歌3 小时前
小程序——跳转API
服务器·前端·小程序
qq_12498707533 小时前
基于springboot的个性化服装搭配推荐小程序(源码+论文+部署+安装)
spring boot·后端·spring·微信小程序·小程序·毕业设计·毕业设计源码