uniapp vue3 使用echarts绘制图表柱状图等

最新推荐文章于 2025-06-07 14:30:58 发布

原创

最新推荐文章于 2025-06-07 14:30:58 发布 · 2.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #echarts #vue.js

部分内容AI总结

Uniapp 使用 Vue3 和 ECharts 组件的总结

在 Uniapp 中使用 Vue3 和 ECharts 进行数据可视化是一种常见需求。以下将详细介绍如何在 Uniapp 项目中安装 ECharts 插件、在 main.js 中挂载 ECharts 以及一个简单的示例 demo。

1. 下载 ECharts 插件

在 Uniapp 中，使用 ECharts 进行数据可视化需要先安装 ECharts 相关插件。

步骤：
1. 打开项目目录，使用以下命令安装 ECharts 插件：
```
pnpm add echarts
```
2. 导入自定义eharts插件

2. 在 `main.js` 中挂载 ECharts

在 Vue3 项目中，通常需要在 main.js 中挂载全局的 ECharts 对象，这样可以在项目的任何地方使用它。

步骤：

打开 main.js 文件，导入 ECharts 并进行挂载：

	//关键代码
	const echarts = require('./static/echarts.min');
	app.config.globalProperties.$echarts = echarts

现在，你可以在项目的任何组件中通过 this.$echarts 访问 ECharts 对象。

3. 示例 Demo：使用 ECharts 绘制图表

在 Vue3 组件中，结合 Uniapp 和 ECharts，展示一个简单的图表。

步骤：
1. 创建一个新的组件 EChartDemo.vue，或者直接在 App.vue 中使用。
2. 使用 onMounted 生命周期函数初始化图表。

<template>
	<view>
		<view class="title">ehcharts示例</view>
		<view>
			<LEchart class="echart" ref="chart" @finished="init"></LEchart>
		</view>
		<view>
			<LEchart class="echart-circle" ref="chartCircle" @finished="initCircle"></LEchart>
		</view>
	</view>
</template>

<script setup>
	import {
   
   
		getCurrentInstance
	} from 'vue'
	import LEchart from '@/components/l-echart/l-echart.vue'
	const instance = getCurrentInstance()

	const echarts = instance.appContext.config.globalProperties.$echarts;

	console.log("echarts", echarts)
	import {
   
   
		onMounted,
		reactive,
		ref
	} from "vue"


	let chart = ref();
	const state =