uni-app使用echarts图表进行数据可视化展示

最近在做一个自己的全栈项目，前端用的uni-app，主要也是想巩固一下uni-app这方面的知识，其中卡我比较久的就是echarts，刚开始不知道，对着echarts官方文档成功的在h5页面搞定了，但运行到微信小程序端，发现一片空白，原来是在小程序端，没有dom这个概念，所以选择了uni-app插件市场的一款：echarts - DCloud 插件市场

一、安装依赖

因为我这边采用的版本是vue3版本，所以有些坑没法避免，如下：

第一步：先打开终端，安装一个echarts

        npm i echarts

第二步：echarts - DCloud 插件市场，点击这个链接，装一下这个插件，对了，他这个插件下载之前需要看广告，人家也需要吃饭，所以都理解！

第三步：看下方代码

二、代码部分

<template>
	<view class="content">
		<view style="width:100%; height:750rpx;background-color: aqua;">
			<l-echart ref="chartRef"></l-echart>
		</view>
	</view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts'

// 获取容器的dom元素
const chartRef = ref(null)
// echart图表的配置信息
const Options = ref({})

onMounted(()=>{
	addPie()
})

// 加载饼图结构
const addPie = async () => {
	const MyPie = await chartRef.value.init(echarts)
	Options.value = {
		title:{
			text:'支出构成',
			left:"center",
			top:"10rpx"
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			top:"5%",
			left: 'left',
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 10,
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{ value: 1048, name: 'Search Engine' },
					{ value: 735, name: 'Direct' },
					{ value: 580, name: 'Email' },
					{ value: 484, name: 'Union Ads' },
					{ value: 300, name: 'Video Ads' }
				]
			}
		]
	}
	MyPie.setOption(Options.value)
}

</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}
</style>

三、运行效果

h5:

小程序：

好了，以上就是uni-app使用echarts的基本过程，希望对你有帮助！