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

部分内容AI总结

Uniapp 使用 Vue3 和 ECharts 组件的总结

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

1. 下载 ECharts 插件

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

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

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

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

步骤：

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

c 复制代码

	//关键代码
	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 生命周期函数初始化图表。

c 复制代码

<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 = reactive({
		option: {},
	})
	state.option = {
		legend: {
			show: true,
			data: []
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross'
			}
		},
		grid: {
			left: '3%',
			right: '8%',
			top: '15%',
			bottom: '5%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 1, 4, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
			axisLabel: {
				// inside: true,
				// color: '#fff'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#83bff6'
				}
			},
			z: 10
		},
		yAxis: {
			type: 'value',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#83bff6'
				}
			},
			axisTick: {
				show: false
			},
			// axisLabel: {
			//   color: '#999'
			// },
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dashed',
					color: '#83bff6'
				}
			}
		},
		series: [{
			data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, , ],
			type: "bar",
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#83bff6'
					},
					{
						offset: 0.5,
						color: '#188df0'
					},
					{
						offset: 1,
						color: '#188df0'
					}
				])
			},
			emphasis: {
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#2378f7'
						},
						{
							offset: 0.7,
							color: '#2378f7'
						},
						{
							offset: 1,
							color: '#83bff6'
						}
					])
				}
			},
			areaStyle: {
				show: true,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#188df0'
					},
					{
						offset: 1,
						color: '#fff'
					}
				])
			},
		}],
		color: ['#83bff6']
	}


	let chartCircle = ref();
	const stateCircle = reactive({
		option: {
			series: [{
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '40',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [{
						value: 70,
						name: '70%'
					},
					{
						value: 30,
						name: '30%'
					}
				]
			}]
		}
	});


	onMounted(() => {
		chart.value.init(echarts, chart => {
			chart.setOption(state.option);
		});
		chartCircle.value.init(echarts, chart => {
			chart.setOption(stateCircle.option);
		});
	});

	// 渲染完成
	const init = () => {
		console.log("渲染完成");
	}
	const initCircle = () => {
		console.log("渲染完成circle");
	}
</script>

<style scopedlang='scss' scoped>
	.echart {
		width: 100%;
		height: 300px;
	}

	.title {
		text-align: center;
	}

	.echart-circle {
		width: 100%;
		height: 200px;
	}
</style>

关键点解析：
1. 图表容器 ：使用 ref 来创建对 DOM 元素的引用，chartContainer 是图表绘制的目标容器。
2. onMounted 生命周期 ：在组件挂载时初始化 ECharts 实例并调用 setOption 方法配置图表。
3. ECharts 配置项 ：option 定义了图表的标题、坐标轴和数据。

4. 总结

安装插件 ：使用 npm 安装 echarts 依赖。
全局挂载 ：在 main.js 中将 ECharts 挂载到 Vue 的全局属性，以便在各个组件中使用。
组件示例 ：在 Vue3 组件中，结合 onMounted 生命周期，使用 ECharts 绘制可视化图表。

通过这个步骤，你可以在 Uniapp 中轻松地集成 ECharts，结合 Vue3 的响应式特性，实现强大的数据可视化功能。

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