<template>
<div class="box_main">
<div class="box_tabs_bs">
<div :class="['bs_box_tab_item', bs_box5ActiveIndex == index?'bs_box_tab_item_active':'' ]"
v-for="(item,index) in bs_box5ListData" :key="index" @click="bs_box5Click(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_box5dropdownData">
<n-button ghost color="rgb(0,55,75)" text-color="#03C3C7">断面</n-button>
</n-dropdown>
<n-dropdown trigger="hover" :options="bs_box5dropdownData2">
<n-button ghost color="rgb(0,55,75)" text-color="#03C3C7">指标</n-button>
</n-dropdown>
</div>
<div id="W_bs_box5_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_box5ActiveIndex: 0,
bs_box5ListData: ['东渠水情', '西渠水情'],
bs_box5dropdownData: [{
label: "断面1",
key: "1"
},
{
label: "断面2",
key: "2"
},
],
bs_box5dropdownData2: [{
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_box5Click = (index) => {
AllData.bs_box5ActiveIndex = index;
if (AllData.bs_box5ActiveIndex == 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_box5_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_box5Click,
timestamp: ref(new Date(new Date().setHours(0, 0, 0, 0)).getTime()),
};
},
computed: {},
methods: {},
};
</script>
<style lang="less" scoped>
#W_bs_box5_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>
