<template>
	<div class="box_main">
		<div id="W_box4_Line"></div>
	</div>
</template>


<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		computed,
		nextTick
	} from "vue";
	import * as echarts from "echarts";
	export default {
		setup(props) {
			const AllData = reactive({
				box2XAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
					'10月', '11月'
				],
				box2YAxis: [9, 5, 15, 12, 14, 12, 9, 12, 16, 12, 8],
				box2YAxis2: [1, 2, 3, 4, 6, 5, 4, 6, 3, 2, 1],
				box2YAxis3: [0.5, 1, 2, 3, 5, 3, 5, 4, 2, 1, 0.5],
			})
			const pl_line = () => {
				let chartDom = echarts.init(document.getElementById('W_box4_Line'));
				var option;
				option = {
					color: ['rgb(14,190,146)', 'rgb(7,100,174)', 'rgb(14,113,89)'],
					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: true,
						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: 59,
						name: '降雨量 mm',
						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: '溢流次数',
						nameTextStyle: {
							align: "left",
							color: "rgb(94,158,186)",
							fontWeight: 'bold',
							fontSize: 14,
							padding: [0, 0, -5, -30],
						},
						min: 0,
						max: 8,
						axisLabel: {
							show: true,
							color: "rgb(41,111,121)",
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(25,76,90,0.8)',
							}
						}
					}],
					series: [{
							name: "降雨量",
							type: "bar",
							barWidth: "5",
							data: AllData.box2YAxis,
							tooltip: {
								valueFormatter: (value) => value.toFixed(0) + 'mm'
							},
							itemStyle: {
								normal: {
									barBorderRadius: [0, 0, 10, 10]
								}
							},
						}, {
							name: '明渠水位',
							type: "bar",
							yAxisIndex: 1,
							data: AllData.box2YAxis2,
							tooltip: {
								valueFormatter: (value) => value.toFixed(0) + '次'
							},
							itemStyle: {
								color: {
									type: 'linear',
									x: 0, //右
									y: 0, //下
									x2: 0, //左
									y2: 1, //上
									colorStops: [{
											offset: 0,
											color: 'rgb(78,240,246)' // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgb(6,98,172)' // 100% 处的颜色
										}
									]
								}
							}
						},
						{
							name: ' 暗涵水位',
							type: "bar",
							yAxisIndex: 1,
							data: AllData.box2YAxis3,
							tooltip: {
								valueFormatter: (value) => value.toFixed(0) + '次'
							},
							itemStyle: {
								color: {
									type: 'linear',
									x: 0, //右
									y: 0, //下
									x2: 0, //左
									y2: 1, //上
									colorStops: [{
											offset: 0,
											color: 'rgb(14,185,143)' // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgb(14,109,85)' // 100% 处的颜色
										}
									]
								}
							}
						},
					]
				}
				option && chartDom.setOption(option);
			}
			onMounted(() => {
				pl_line()
			});
			return {
				...toRefs(AllData),
				pl_line,
			};
		},
		computed: {},
		methods: {},
	};
</script>

<style lang="less" scoped>
	#W_box4_Line {
		width: 455px;
		height: 240px;
	}
</style>