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

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

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

	import * as echarts from 'echarts';
	onMounted(() => {
		drawChart()
	})

	const drawChart = () => {
		let chartDom = document.getElementById('line');
		let myChart = echarts.init(chartDom);
		let option;
		let xy_option = {
			axisLabel: {
				fontWeight: 'bold',
				textStyle: {
					color: "#333333",
				},
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#799abb",
					width: 2,
					type: "solid"
				},
			}
		}
		let data = []
		for (let i in props.option.data) {
			data.push([i, props.option.data[i].value])
		}
		option = {
			xAxis: {
				min: 0,
				max: props.option.data.length - 1,
				interval: 1,
				...xy_option,
				axisLabel: {
					formatter: function(value) {
						return props.option.data[Number(value)]?.datetime.split('-').join('.') 
					},
				}
			},
			yAxis: {
				interval: Number(props.option.step),
				min: Number(props.option.min),
				max: Number(props.option.max),
				...xy_option
			},
			lineStyle: {
				color: '#e13327'
			},
			grid: {
				x: "12%",
				y: "7%",
				height: "79%" // 高度
			},
			series: [{
				symbol: 'circle',
				symbolSize: 6,
				itemStyle: {
					color: '#e13327',
				},
				markLine: {
					data: [{
						symbolSize: 6,
						label: {
							color: '#b2a4e4'
						},
						lineStyle: {
							color: '#b2a4e4'
						},
						name: 'yo',
						yAxis: Number(props.option.range[0]),
					}, {
						symbolSize: 6,
						label: {
							color: '#65c1c2'
						},
						lineStyle: {
							color: '#65c1c2'
						},
						name: 'yo',
						yAxis: Number(props.option.range[1]),
					}]
				},
				data: data,
				type: 'line'
			}],
		};

		option && myChart.setOption(option);
	}
</script>
<template>
	<view>
		<view class="unit_wrapper">单位：{{ props.option.unit }}</view>
		<view class="chart_wrapper" id="line">折线图</view>
	</view>
</template>
<style scoped>
	.unit_wrapper {
		margin-left: 134rpx;
		margin-top: 44rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #939898;
		line-height: 1;
	}

	.chart_wrapper {
		width: 591rpx;
		height: 392rpx;
		line-height: 392rpx;
		text-align: center;
		margin: 7rpx auto 0;
	}
</style>