uni-app使用Echarts图表

1、安装ECharts插件

首先，我们需要在uni-app项目中安装ECharts插件。打开终端或命令行，进入uni-app项目的根目录，并执行以下命令：

npm install echarts --save

运行这个命令会安装ECharts插件，并将其添加到项目的依赖项中。

2、引入ECharts库

在需要使用ECharts的页面中，我们需要引入ECharts库。在对应的Vue页面中，可以使用以下代码来引入ECharts库：

import * as echarts from 'echarts'  // 引入ECharts库

3、创建Charts实例和图表容器

接下来，在Vue的mounted生命周期中，创建一个ECharts实例，并指定一个DOM元素来承载图表

mounted() {
  this.initChart()
},

methods: {
  initChart() {
    // const chartContainer = this.$refs.chartContainer  // 获取图表容器 DOM
	const chartContainer = document.getElementById("chartContainer")
    this.chart = echarts.init(chartContainer)  // 创建ECharts实例并传入图表容器
  }
}

在模板中，我们需要为图表指定一个DOM容器。例如，可以在<template>标签中添加如下代码：

<view ref="chartContainer" id="chartContainer" class="chart-container"></view>

4、配置和渲染图表

现在，我们可以开始配置和渲染图表了。在Vue页面中，使用ECharts提供的API配置和渲染图表。可以通过调用setOption方法来配置图表的数据和样式。

echarts官方：https://echarts.apache.org/zh/index.html

4.1饼图

饼图用来展示不同部分相对于整体的比例和分布情况

<template>
	<view class="container">

		<view style="padding: 0 10px 0 10px">
			<view ref="chartContainer" id="chartContainer" class="chart-container"></view>
		</view>

	</view>
</template>

<script>
	import config from '@/config';
	const baseUrl = config.baseUrl;

	import * as echarts from 'echarts' // 引入ECharts库

	export default {
		data() {
			return {
				loading: false,
			}
		},
		onLoad(option) {
			console.log("onLoad")
			this.getHomePageData();
		},
		onReady() {
			// 页面准备就绪后的操作
			console.log("onReady")
			this.initChart()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getHomePageData()
				uni.stopPullDownRefresh();
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				});
			}, 1000)
		},
		methods: {
			getHomePageData() {
				let self = this;
				uni.request({
					withCredentials: true,
					url: baseUrl + '',
					data: {
						userId: self.user.userId,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded' // 或者 'application/json'
					},
					method: 'post',
					success: (res) => {
						self.chartSeriesData = res.data.amountMap
						console.log("getHomePageData")

						let option = {
							title: {
								text: '资金统计',
								left: 'left',
								top: 5
							},
							tooltip: {
								trigger: 'item',
								formatter: '{b} : \n{c} '
							},
							series: [{
								type: 'pie',
								radius: '60%',
								center: ['50%', '65%'],
								avoidLabelOverlap: true,
								label: {
									padding: [0, -40],
									normal: {
										show: true,
										position: 'outside'
									}
								},
								labelLine: {
									show: true,
									length: 5,
									length2: 10,
								},
								labelLayout: {
									verticalAlign: "bottom",
									dy: -10,
								},
								data: [{
										value: self.chartSeriesData.availbalance,
										name: '可用余额'
									},
									{
										value: self.chartSeriesData.blockbalance,
										name: '冻结金额'
									},
									{
										value: self.chartSeriesData.usedAmount,
										name: '已使用金额'
									}
								]
							}]
						}
						this.chart.clear()
						this.chart.setOption(option)
					}
				})
			},
			initChart() {
				let self = this;
				echarts.env.touchEventsSupported = false;
				echarts.env.wxa = false;
				// const chartContainer = this.$refs.chartContainer
				const chartContainer = document.getElementById("chartContainer")
				self.chart = echarts.init(chartContainer)
				let option = {}
				self.chart.setOption(option)
			},

		}
	}
</script>

<style scope>
	.container {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
		background-color: #ffffff;
	}

	.chart-container {
		height: 200px;
	}
</style>