DaQingPuJi/大庆普济医院报告对比/components/analysis/chart1.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年3月19日 14:53:06
	 */
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'

	const props = defineProps({
		option: {
			type: Object,
			default: {
				show: false,
				range: [],
				min: 0,
				max: 0
			}
		}
	});

	import * as echarts from 'echarts';
	onMounted(() => {
		drawChart()
	})
	const drawChart = () => {
		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;
		let width = 12
		let label_arr = []
		option = {
			series: [{
				type: 'gauge',
				min: Number(props.option.range[0].value),
				max: Number(props.option.range[props.option.range.length - 1].value),
				startAngle: 135,
				endAngle: -150,
				axisLine: {
					lineStyle: {
						width: width,
						color: props.option.range.map((item) => {
							return [item.percent, item.color]
						})
					}
				},
				pointer: {
					width: 5,
					length: '80%',
					itemStyle: {
						color: 'inherit'
					}
				},
				axisTick: {
					distance: -width,
					length: 3,
					lineStyle: {
						color: '#fff',
						width: 1
					}
				},
				splitLine: {
					distance: -width,
					length: width,
					lineStyle: {
						color: '#fff',
						width: 1
					}
				},
				axisLabel: {
					color: '#333333',
					distance: 14,
					fontSize: 8,
					formatter: (value) => {
						let label_str = ''
						for (let i in props.option.range) {
							if (Number(i) === 0) continue;
							if (value >= props.option.range[Number(i) - 1].value && value < props
								.option.range[Number(i)].value) {
								if (label_arr.length < i) {
									label_arr.push(0)
									return props.option.label[i - 1]
								} else {
									continue
								}
							} else {
								continue
							}
						}
						return label_str;
					}
				},
				detail: {
					formatter: '{value}',
					color: 'inherit',
					fontSize: 9
				},
				data: [{
					value: Number(props.option.value)
				}]
			}]
		};
		option && myChart.setOption(option);
	}
</script>
<template>
	<view>
		<div class="chart_wrapper" id="main"></div>
	</view>
</template>
<style scoped>
	.chart_wrapper {
		width: 294rpx;
		line-height: 294rpx;
		height: 338rpx;
		text-align: center;
		transform: scale(1.3);
	}
</style>