【uniapp】小程序中使用echarts的方案

---

前言

   关键词：uni-app；ECharts
  在开发uniapp项目中，我们 不可制止的会遇到可视化图表的这种需求，有以下几个方案可以选择

---

一、使用uni-app插件

在Dcloud插件市场下载echarts插件
https://ext.dcloud.net.cn/search?q=echarts
推荐使用这个

另有一个秋云ucharts，下载量也比较高，api和echarts不太一样

二、引入小程序原生组件

uni-app引入原生组件的时候，必要放置在指定目次，不然不会生效

目次布局

2. {
3.     "pages": [
4.         {
5.                 "path": "slide-view/slide-view",
6.                 "style": {
7.                         "navigationBarTitleText": "slide-view",
8.                         "usingComponents": {
9.                                 "slide-view": "/wxcomponents/miniprogram-slide-view/index"
10.                         }
11.                 }
12.         }
13.     ]
14. }

复制代码

使用方式

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 可以提升渲染性能，办理非同层渲染标题，强烈建议开启。
代码如下（示例）：

2. <!--index.vue-->
3. <view class="container">
4.   <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
5. </view>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。