uniapp+vue3+ts+vite+echarts开发图表类小程序，将echarts导入项目使用的详细步骤，耗时一天终于弄好了

想在uniapp和vue3环境中使用echarts是一件相当前卫的事情，官方适配的还不是很好，echarts的使用插件写的是有些不太清晰的，这里我花费了一天的时间，终于将这个使用步骤搞清楚了，并且建了一个仓库，大家可以直接clone下来使用。先看一下pc端和小程序端的效果：

微信小程序和抖音小程序等都支持：

使用步骤如下

第一步：下载插件包

下载echarts插件包，并导入到项目中，然后使用插件中的组件创建容器，并导入数据就可以了。

echarts插件包地址：echarts - DCloud 插件市场

如果你是使用hbuilder写的，可以直接导入，如果你是vscode写的，就下载压缩包：

我这里将我下载好的zip包分享出来：lime-echart_0.8.1.zip - 蓝奏云

 

下载好解压然后将解压后的组件导入到项目的components下面：

并且将静态资源放到静态文件夹中：

第二步：安装echarts包

pnpm add echarts
-or-
npm install echarts

 

第三步：在页面中导入依赖并运行

然后在页面中导入这个LEchart这个组件：

将依赖按照不同的平台区分导入到页面组件中：下面是我的页面源代码

 最后运行小程序或者h5就可以看到效果了：