小鱼儿心语：当你接触的人越多，你会发现，比你层次高的人鼓励你，同一层次的人欣赏你，比你层次低的人，才会诋毁你。--稻盛和夫
一、效果图
分区测温统计.png
分区高温历史统计.png
二、解决方案
option配置里添加dataZoom属性
三、代码
var data = [
{
id: 489,
partitionId: 3,
maxValue: 20,
maxPoint: 291.0,
maxTime: "2025-02-25 00:29:41.8",
minValue: 13.1,
minPoint: 421.0,
minTime: "2025-02-25 00:29:41.8",
averageValue: 13.46,
allData:
"13.6,13.6,13.6,13.7,13.7,13.6,13.5,13.5,13.5,13.5,13.6,13.6,13.6,13.7,13.7,13.7,13.8,13.7,13.7,13.7,13.6,13.6,13.5,13.5,13.5,13.6,13.6,13.7,13.6,13.5,13.5,13.4,13.4,13.5,13.7,13.8,13.7,13.8,13.7,13.7,13.6,13.7,13.7,13.7,13.6,13.6,13.6,13.5,13.5,13.5,13.4,13.4,13.3,13.3,13.3,13.4,13.4,13.5,13.6,13.6,13.6,13.6,13.5,13.5,13.6,13.6,13.6,13.6,13.7,13.6,13.6,13.6,13.6,13.5,13.4,13.3,13.3,13.3,13.4,13.4,13.5,13.5,13.5,13.4,13.5,13.5,13.5,13.5,13.5,13.5,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.5,13.5,13.5,13.4,13.5,13.4,13.4,13.5,13.5,13.4,13.3,13.2,13.2,13.2,13.3,13.3,13.4,13.4,13.4,13.4,13.5,13.6,13.5,13.5,13.5,13.5,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.4,13.3,13.3,13.4,13.3,13.4,13.4,13.4,13.4,13.5,13.4,13.3,13.2,13.2,13.1,13.1,13.2,13.2,13.2,13.2,13.2,13.2,13.2,13.2,13.2,13.3,13.3,13.2,13.2,13.2,13.3,13.4,13.4,13.5,13.5,13.5,13.5,13.4,13.4,13.3,13.2,13.2,13.3,13.4,13.4,13.4,13.4,13.4,13.3,13.4,13.4,13.4,13.4,13.4,13.3,13.2,13.2,13.2,13.3,13.3,13.5,13.6,13.5,13.4,13.5,13.4,13.5,13.6,13.7,13.8,13.8,13.8,13.7,13.8,13.7,13.7,13.7,13.6,13.5,13.4,13.4,13.4,13.4,13.4,13.4,13.3,13.3,13.4,13.4,13.5,13.5,13.5,13.5,13.4,13.4,13.5,13.4,13.3,13.4,13.5,13.5,13.5,13.5,13.5,13.4,13.3,13.3,13.3,13.3,13.3,13.4,13.5,13.5,13.5,13.5,13.5,13.6,13.6,13.6,13.6,13.6,13.5,13.6,13.6,13.5,13.5,13.5,13.4,13.3,13.3,13.4,13.4,13.4,13.4,13.3,13.3,13.3,13.2,13.2,13.3,13.4,13.4,13.5,13.6,13.6,13.6,13.5,13.4,13.3,13.4,13.4,13.3,13.4,13.4,13.4,13.4,13.4,13.5,13.5,13.5,13.5,13.6,13.5,13.5,13.5,13.4,13.3,13.3,13.3,13.2,13.2,13.3,13.3,13.4,13.5,13.5,13.5,13.5,13.5,13.6,13.6,13.5,13.5,13.6,13.6,13.7,13.7,13.7,13.7,13.6,13.6,13.6,13.5,13.5,13.6,13.6,13.7,13.7,13.7,13.6,13.6,13.5,13.5,13.6,13.5,13.4,13.4,13.2,13.2,13.2,13.2,13.3,13.4,13.4,13.4,13.3,13.3,13.3,13.4,13.5,13.6,13.6,13.5,13.4,13.4,13.5,13.5,13.5,13.6,13.7,13.5,13.5,13.5,13.4,13.3,13.4,13.4,13.3,13.3,13.3,13.2,13.2,13.3,13.4,13.5,13.6,13.6,13.6,13.6,13.5,13.5,13.5,13.5,13.5,13.5,13.5",
recordTime: "2025-02-25 00:29:41.8"
}
]
var xData = []
var yData= []
var yData1= []
data.forEach(item => {
xData.push(item.recordTime);
yData.push(item.maxValue);
yData1.push(item.maxPoint);
});
var option = {
backgroundColor: "#062D8700",
title: {
text: "",
textStyle: {
color: "#ccc"
}
},
tooltip: {
trigger: "axis"
},
legend: {
data: ["最高温度", "最高温度位置"],
textStyle: {
color: "#fff"
}
},
grid: {
top: "18%",
left: "3%",
right: "4%",
bottom: "3%",
height: "75%",
containLabel: true
},
calculable: true,
xAxis: [
{
type: "category",
boundaryGap: false,
data: xData,
axisLine: {
lineStyle: {
color: "#3c5787"
}
},
axisTick: {
show: false
},
axisLabel: {
// interval: 0, //在数据量特别大的时候，不建议用，因为拖拽时会影响展示效果
textStyle: {
color: "#607a97"
},
fontSize: 12
}
}
],
yAxis: [
{
type: "value",
name: "单位：℃",
nameTextStyle: {
color: "#96a5b3"
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "#96a5b3"
}
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#3f4f63"
}
}
},
{
type: "value",
name: "位置：m",
nameTextStyle: {
color: "#96a5b3"
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "#96a5b3"
}
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: "#3f4f63"
}
}
}
],
dataZoom: [
{
type: "slider",
start: 0,
end: 100,
textStyle: {
color: "#607a9700", // 字体颜色
fontSize: 14 // 字体大小
},
xAxisIndex: [0], // 绑定到x轴的第一个坐标轴上
bottom: 0
}
],
series: [
{
name: "最高温度",
type: "line",
min: 10,
max: 40,
data: yData,
yAxisIndex: 0,
lineStyle: {
normal: {
width: 3,
color: {
type: "linear",
colorStops: [
{
offset: 0,
color: "#3bb5ff" // 0% 处的颜色
},
{
offset: 0.4,
color: "#3bb5ff" // 100% 处的颜色
},
{
offset: 1,
color: "#3bb5ff" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: "#3bb5ff50",
shadowBlur: 5,
shadowOffsetY: 5
}
},
itemStyle: {
normal: {
color: "#AAF487",
borderWidth: 0,
borderColor: "#AAF487"
}
},
smooth: true
},
{
name: "最高温度位置",
type: "scatter",
min: 10,
max: 40,
yAxisIndex: 1,
data: yData1,
lineStyle: {
normal: {
width: 3,
color: {
type: "linear",
colorStops: [
{
offset: 0,
color: "#feb201" // 0% 处的颜色
},
{
offset: 0.4,
color: "#feb201" // 100% 处的颜色
},
{
offset: 1,
color: "#feb201" // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: "#feb20150",
shadowBlur: 5,
shadowOffsetY: 5
}
},
itemStyle: {
normal: {
color: "#F6D06F",
borderWidth: 0,
borderColor: "#F6D06F"
}
},
smooth: true
}
]
};
shuguanmonitor.setOption(option);
