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

• 移动开发

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

微信小程序和抖音小程序等都支持：uniapp+vue3+ts+vite+echarts开发图表类小程序，将echarts导入项目使用的详细步骤，耗时一天终于弄好了

使用步骤如下

第一步：下载插件包

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

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

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

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

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

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

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

并且将静态资源放到静态文件夹中：uniapp+vue3+ts+vite+echarts开发图表类小程序，将echarts导入项目使用的详细步骤，耗时一天终于弄好了

第二步：安装echarts包

pnpm add echarts
-or-
npm install echarts

 

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

然后在页面中导入这个LEchart这个组件：uniapp+vue3+ts+vite+echarts开发图表类小程序，将echarts导入项目使用的详细步骤，耗时一天终于弄好了

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

 最后运行小程序或者h5就可以看到效果了：uniapp+vue3+ts+vite+echarts开发图表类小程序，将echarts导入项目使用的详细步骤，耗时一天终于弄好了

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/b5c5411697.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐