前言
关键词:uni-app;ECharts
在开发uniapp项目中,我们 不可避免的会遇到可视化图表的这种需求,有以下几个方案可以选择
一、使用uni-app插件
在Dcloud插件市场下载echarts插件
https://ext.dcloud.net.cn/search?q=echarts
推荐使用这个
还有一个秋云ucharts,下载量也比较高,api和echarts不太一样
二、引入小程序原生组件
uni-app引入原生组件的时候,需要放置在指定目录,不然不会生效
目录结构
{
"pages": [
{
"path": "slide-view/slide-view",
"style": {
"navigationBarTitleText": "slide-view",
"usingComponents": {
"slide-view": "/wxcomponents/miniprogram-slide-view/index"
}
}
}
]
}
使用方式
1、下载该项目
如有必要,将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用自定义构建生成并替换 echarts.js
pages 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。
更详细的说明请参见 echarts-for-weixin 项目。
参考:https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app
2、注意事项
最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 force-use-old-canvas=“true” 的情况下,使用新的 Canvas 2d(默认)。
使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。
代码如下(示例):
<!--index.vue-->
<view class="container">
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{
{ ec }}"></ec-canvas>
</view>