Commit aae93185 authored by xinzhedeai's avatar xinzhedeai

add:降雨量警戒线

parent 38375dac
......@@ -22,8 +22,31 @@ const initChart = () => {
const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
const data = hours.map(() => Math.floor(Math.random() * 150) + 20);
// 定义警戒线值
const warningLines = [
{ value: 50, name: '蓝色警戒线', color: '#409EFF' },
{ value: 100, name: '黄色警戒线', color: '#FFD700' },
{ value: 150, name: '橙色警戒线', color: '#FF8C00' },
{ value: 200, name: '红色警戒线', color: '#FF0000' }
];
chartInstance.setOption({
grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
tooltip: {
trigger: 'axis'
},
// toolbox: {
// show: true,
// feature: {
// dataZoom: {
// yAxisIndex: 'none'
// },
// dataView: { readOnly: false },
// magicType: { type: ['line', 'bar'] },
// restore: {},
// saveAsImage: {}
// }
// },
xAxis: {
type: "category",
data: hours,
......@@ -31,12 +54,22 @@ const initChart = () => {
axisLabel: { color: "#a0b3d6", interval: 2 },
},
yAxis: {
name:'mm',
// nameLocation:'end',
// nameGap: 10, // 单位与Y轴轴线的间距
nameAlign:'left',
type: "value",
max: 300,
axisLine: { lineStyle: { color: "#4f6b95" } },
axisLabel: { color: "#a0b3d6" },
axisLabel: { color: "#a0b3d6"},
splitLine: { lineStyle: { color: "rgba(79, 107, 149, 0.2)" } },
// // 添加警戒线标记
// axisTick: {
// show: false
// }
},
series: [
{
data,
......@@ -49,6 +82,24 @@ const initChart = () => {
]),
},
lineStyle: { color: "rgba(54, 162, 235, 1)", width: 2 },
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
// data: [{ type: 'average', name: 'Avg' }]
data: warningLines.map(line => ({
name: line.name,
yAxis: line.value,
lineStyle: {
color: line.color,
width: 1,
type: 'dashed'
}
}))
}
},
],
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment