echarts uniapp 如何使用echarts做统计图

最新推荐文章于 2024-08-16 10:31:11 发布

goiᐝ

最新推荐文章于 2024-08-16 10:31:11 发布

阅读量2k

点赞数

分类专栏： uniapp echarts 文章标签：前端

本文链接：https://blog.csdn.net/weixin_59638880/article/details/123663621

版权

本文介绍了如何在uniapp项目中使用echarts进行统计图表的绘制，包括如何引入echarts.min.js文件以及如何添加条件判断来实现动态交互效果。

摘要由CSDN通过智能技术生成

这是第一版引入了echarts.min.js 可以自行去官网下载

<template>
	<view class="ak-data">
		<view class="ak-index-data">
			<view class="ak-data-status-box">
				<view class="ak-data-status">
					<view class="ak-data-title">
						<view class="ak-data-basic"></view>
						<view class="ak-status-title">曲房数量统计</view>
					</view>
					<view class="ak-status-tabs">
						<view class="ak-status-list">
							<view class="ak-status-icon" style="background: #3188F3;"></view>
							<view>正常</view>
						</view>
						<view class="ak-status-list">
							<view class="ak-status-icon" style="background: #FAD867;"></view>
							<view>停机</view>
						</view>
						<view class="ak-status-list">
							<view class="ak-status-icon" style="background: #E63900;"></view>
							<view>故障</view>
						</view>
					</view>
				</view>
				<view class="ak-echarts-list">
					<view :prop="normal" id="Necharts" :change:prop="echarts.updateEcharts" class="ak-normal-count"></view>
					<view :prop="watting" id="Wecharts" :change:prop="echarts.updateEcharts" class="ak-normal-count"></view>
					<view :prop="fault" id="Fecharts" :change:prop="echarts.updateEcharts" class="ak-normal-count"></view>
				</view>
			</view>
			
			
			<view class="ak-data-insption">
				<view class="ak-data-title">
					<view class="ak-data-basic"></view>
					<view class="ak-status-title">巡检次数统计</view>
				</view>
				<!-- <view style="width: 800rpx; overflow: scroll;"> -->
				<view :prop="insOption" id="insEcharts" :change:prop="echarts.updateEcharts" style="height: 400rpx; font-size: 18rpx;"></view>
				<!-- </view> -->
			</view>
			
			
			<view class="ak-data-insption" v-if="isShow">
				<view class="ak-data-title">
					<view class="ak-data-basic"></view>
					<view class="ak-status-title">报警类别统计</view>
				</view>
				<view :prop="type" id="typeEcharts" :change:prop="echarts.updateEcharts" style="height: 380rpx; margin: 20rpx 0"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				number: 0,
				isShow: true,
				type: {
					legend: {
						orient: 'vertical',
						left: 'right'
					},
					series: [{
					 // name: 'Nightingale Chart',
						type: 'pie',
						radius: [40, 60],
						center: ['42%', '64%'],
						// roseType: 'area',
						labelLine: {
							length2: 5
						},
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal: {
								label: {
									show: true,
									formatter: '{d}%'
								},
								labelLine: {
									show: true
								}
							}
						},
						data: [{
					 		  value: 0,
								name: '电器故障'
							},
							{
								value: 0,
								name: '机械故障'
							},
							{
								value: 0,
								name: '物料原因故障'
							}
						]
					}]
				},
				insOption: {
					tooltip: {
						trigger: 'axis',     
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: 15,
						bottom: 33
					},
					legend: {},
				
					xAxis: {
						nameTextStyle: {
							fontSize: 8
						},
						axisLabel: {
							interval: 0, //如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
				
							rotate: '-45', // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
				
						},
						data: ['03月', '蒸炉2', '蒸炉3', '蒸炉4', '蒸炉5', '蒸炉6', '蒸炉7']
					},
					yAxis: [{
						type: 'value'
					}],
					series: [{
							type: 'bar',
							stack: 'Ad',
							barWidth: 10,
							itemStyle: {
								color: '#FFF31C'
							},
							emphasis: {
								focus: 'series'
							},
							data: [20, 18, 19, 23, 29, 33, 31]
						},
						{
							type: 'bar',
							stack: 'Ad',
							barWidth: 20,
							itemStyle: {
								color: '#3E7CEB'
							},
							emphasis: {
								focus: 'series'
							},
							data: [15, 23, 20, 15, 19, 33, 41]
						}
					]
				},
				normal: {
					series: [{
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						pointer: {
							show: false
						},
						progress: {
							show: true,
							overlap: false,
							roundCap: true,
							itemStyle: {
								color: 'rgb(49, 136, 243)',
							}
						},
						axisLine: {
							lineStyle: {
								width: 5
							}
						},
						splitLine: {
							show: false,
							distance: 0,
							length: 10
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false,
						},
						data: [{
							value: 50,
							detail: {
								offsetCenter: ['0%', '0%']
							}
						}],
						title: {
							fontSize: '14rpx'
						},
						detail: {
							fontSize: '15rpx',
							color: '#333',
							formatter: '{value}'
						}
					}]
				},
				watting: {
					series: [{
						type: 'gauge',
						startAngle: 90,
						endAngle: