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

相关推荐
瑞瑞小同学1 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
凡泰AI3 小时前
如何借助MCP打通企业APP内部服务:从统一调用到小程序承接
小程序·uni-app·app·mpaas·mcp·小程序容器
这是个栗子5 小时前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages
投票竞赛6 小时前
书法、绘画作品投票评选,图片投票小程序作品集排版
python·小程序
乐橙开放平台8 小时前
明厨亮灶笔记:乐橙轻应用 H5 + 小程序插件,一套 BFF 出两张播放凭证
人工智能·笔记·物联网·小程序·音视频·notepad++
AI品信智慧数智人10 小时前
从键盘打字到语音对话✨数字人交互重塑小程序用户体验新范式
小程序
爱勇宝1 天前
上线 20 多天后,我才发现小程序的图片上传一直不可用
微信小程序·智能小程序
2601_956743681 天前
上海小程序开发公司:本地优质厂商名录与源码私有化技术分析
小程序·开发经验·上海
科技小刘c1 天前
接单做小程序,我算了笔省下的时间账
小程序
张人玉1 天前
基于 Vue 3 + ECharts + Express + SQLite 的世界数据可视化大屏系统——世界态势数据可视化大屏
vue.js·echarts·express