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

---

前言

关键词：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>