Newer
Older
HuangJiPC / src / pages / views / WatershedOneMap / components / W_Box_bs2Line.vue
@zhangdeliang zhangdeliang on 21 Jun 6 KB update
<template>
	<div class="box_main">
	<div class="box_tabs_bs">
		<div :class="['bs_box_tab_item', bs_box2ActiveIndex == index?'bs_box_tab_item_active':'' ]"
			v-for="(item,index) in bs_box2ListData" :key="index" @click="bs_box2Click(index)"> {{item}}
		</div>
	</div>
	<div class="box_date_bs">
		<n-date-picker v-model:value="timestamp" type="date" clearable />
	</div>
	<div class="box_date_bs_select">
		<n-dropdown trigger="hover" :options="bs_box2dropdownData">
			<n-button ghost color="rgb(0,55,75)" text-color="#03C3C7">断面</n-button>
		</n-dropdown>
		<n-dropdown trigger="hover" :options="bs_box2dropdownData2">
			<n-button ghost color="rgb(0,55,75)" text-color="#03C3C7">指标</n-button>
		</n-dropdown>
	</div>
		<div id="W_bs_box2_Line"></div>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		computed,
		nextTick
	} from "vue";
	import * as echarts from "echarts";
	export default {
		setup() {
			const AllData = reactive({
				bs_box2ActiveIndex:0,
				bs_box2ListData:['东渠水情','西渠水情'],
				bs_box2dropdownData: [{
						label: "断面1",
						key: "1"
					},
					{
						label: "断面2",
						key: "2"
					},
				],
				bs_box2dropdownData2: [{
						label: "COD",
						key: "3"
					},
					{
						label: "DO",
						key: "4"
					},
				],
				box2XAxis: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00',
					'18:00', '21:00', '23:00'
				],
				box2YAxis2: [8.5, 8.6, 8.7, 8, 6, 9, 6.5, 4.3, 9],
				box2YAxis3: [23, 25, 40, 15, 21, 27, 29, 25, 23],
			})
			const bs_box2Click = (index) => {
				AllData.bs_box2ActiveIndex = index;
				if(AllData.bs_box2ActiveIndex==0){
					AllData.box2YAxis3=[23, 25, 40, 15, 21, 27, 29, 25, 23];
					pl_line();
				}else{
					AllData.box2YAxis3=[20, 15, 30, 25, 31, 21, 22, 35, 18];
					pl_line();
				}
			}
			const pl_line = () => {
				let chartDom = echarts.init(document.getElementById('W_bs_box2_Line'));
				var option;
				option = {
					color: ['#0199D9', 'rgb(205,97,42)'],
					legend: {
						show: true,
						icon: 'rect',
						left: 'center',
						top: 'bottom',
						itemWidth: 20,
						itemHeight: 5,
						textStyle: {
							fontSize: 12,
							color: '#B6B9BE',
						},
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow"
						}
					},
					dataZoom: [{
						type: 'inside', // 内置在坐标系中
						xAxisIndex: 0,
						yAxisIndex: [0, 1],
						start: 0, // 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
						end: 100, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
						zoomLock: true, // 是否锁定选择区域(或叫做数据窗口)的大小。
					}],
					grid: {
						top: '15%',
						left: '3%',
						right: '3%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: [{
						type: "category",
						data: AllData.box2XAxis,
						boundaryGap: false,
						axisTick: {
							show: false
						},
						axisPointer: {
							type: "shadow",
						},
						axisLabel: {
							show: true,
							fontWeight: 'bold',
							interval: 0,
							color: "rgb(94,158,186)",
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(25,76,90,0.8)',
							}
						}
					}],
					yAxis: [{
						type: "value",
						inverse: true, //控制x轴在上方
						position: 'right',
						min: 0,
						max: 103.5,
						name: 'mg/L',
						nameLocation: 'start',
						nameTextStyle: {
							align: "left",
							color: "rgb(94,158,186)",
							fontWeight: 'bold',
							fontSize: 14,
							padding: [0, 0, -5, -40],
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							color: "rgb(41,111,121)",
						},
						splitLine: {
							show: false
						}
					}, {
						type: "value",
						position: 'left',
						name: '水位 m',
						nameTextStyle: {
							align: "left",
							color: "rgb(94,158,186)",
							fontWeight: 'bold',
							fontSize: 14,
							padding: [0, 0, -5, -30],
						},
						min: 0,
						max: 9.5,
						axisLabel: {
							show: true,
							color: "rgb(41,111,121)",
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(25,76,90,0.8)',
							}
						}
					}],
					series: [{
							smooth: true, //变为曲线 默认false折线
							name: '明渠水位',
							type: "line",
							symbol: 'none',
							yAxisIndex: 1,
							data: AllData.box2YAxis2,
							tooltip: {
								valueFormatter: (value) => value.toFixed(0) + 'm'
							},
							areaStyle: {
								color: {
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0.1,
											color: 'rgba(57, 197, 255, 1)' // 0% 处的颜色
										},
										{
											offset: 0.5,
											color: 'rgba(57, 197, 255, 0.3)' // 0% 处的颜色
										},
										{
											offset: 0.7,
											color: 'rgba(57, 197, 255, 0.1)' // 0% 处的颜色
										},
										{
											offset: 0.9,
											color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色
										}
									],
									globalCoord: false
								}

							}
						},
						{
							smooth: true, //变为曲线 默认false折线
							name: 'COD',
							type: "line",
							symbol: 'none',
							data: AllData.box2YAxis3,
							tooltip: {
								valueFormatter: (value) => value.toFixed(0) + 'mg/L'
							},
						},
					]
				}
				option && chartDom.setOption(option);
			}
			onMounted(() => {
				pl_line()
			});
			return {
				...toRefs(AllData),
				pl_line,
				bs_box2Click,
				timestamp: ref(new Date(new Date().setHours(0, 0, 0, 0)).getTime()),
			};
		},
		computed: {},
		methods: {},
	};
</script>

<style lang="less" scoped>
	#W_bs_box2_Line {
		width: 455px;
		height: 200px;
	}
	.box_date_bs {
		width: 30%;
		position: absolute;
		top: 5px;
		left: 1%;
	}
	.box_date_bs_select {
		position: absolute;
		top: 5px;
		width: 30%;
		left: 70%;
		color: #3D7790;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.box_tabs_bs {
		width: 40%;
		margin-left: 31%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		cursor: pointer;
		padding-top: 10px;
	}
	.bs_box_tab_item {
		width: 80px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-weight: 400;
		color: #03C3C7;
		border: 1px solid #3D7790;
	}
	
	.bs_box_tab_item_active {
		width: 80px;
		color: #28F7FF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-weight: normal;
		border: 1px solid #3D7790;
	}
</style>