|
@ -29,9 +29,34 @@ watch( |
|
|
}, |
|
|
}, |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
trigger: 'axis', |
|
|
trigger: 'axis', |
|
|
|
|
|
formatter: (params: any[]) => { |
|
|
|
|
|
if (!params || !params.length) |
|
|
|
|
|
return '' |
|
|
|
|
|
// 1. 把第一个点的轴值(已经是格式化好的时间串)当作标题 |
|
|
|
|
|
const time = params[0].axisValue |
|
|
|
|
|
let html = `<div>${time}</div>` |
|
|
|
|
|
|
|
|
|
|
|
// 2. 逐条拼接:保留它自带的 marker(圆点/线段小样) + 系列名 + 数据 + 单位 |
|
|
|
|
|
params.forEach((item) => { |
|
|
|
|
|
let unit = '' |
|
|
|
|
|
switch (item.seriesName) { |
|
|
|
|
|
case '温度': unit = ' ℃' |
|
|
|
|
|
break |
|
|
|
|
|
case '相对湿度': unit = ' %RH' |
|
|
|
|
|
break |
|
|
|
|
|
case 'H2O2浓度': unit = ' ppm' |
|
|
|
|
|
break |
|
|
|
|
|
case 'H2O2相对饱和度': unit = ' %RS' |
|
|
|
|
|
break |
|
|
|
|
|
} |
|
|
|
|
|
// item.marker 就是 echarts 自动给你的小彩点 |
|
|
|
|
|
html += `<div>${item.marker} ${item.seriesName}: ${item.data}${unit}</div>` |
|
|
|
|
|
}) |
|
|
|
|
|
return html |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
legend: { |
|
|
legend: { |
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'], |
|
|
|
|
|
|
|
|
data: ['温度', '相对湿度', 'H2O2浓度', 'H2O2相对饱和度'], |
|
|
orient: 'horizontal', // 水平布局 |
|
|
orient: 'horizontal', // 水平布局 |
|
|
itemWidth: 10, // 图例图形宽度 |
|
|
itemWidth: 10, // 图例图形宽度 |
|
|
itemHeight: 10, // 图例图形高度 |
|
|
itemHeight: 10, // 图例图形高度 |
|
@ -60,7 +85,7 @@ watch( |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
name: '湿度', |
|
|
|
|
|
|
|
|
name: '相对湿度', |
|
|
type: 'line', |
|
|
type: 'line', |
|
|
data: newValue.data?.map(item => item.rh.toFixed(2)), |
|
|
data: newValue.data?.map(item => item.rh.toFixed(2)), |
|
|
symbol: 'circle', |
|
|
symbol: 'circle', |
|
@ -82,7 +107,7 @@ watch( |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
name: 'H2O2饱和度', |
|
|
|
|
|
|
|
|
name: 'H2O2相对饱和度', |
|
|
type: 'line', |
|
|
type: 'line', |
|
|
data: newValue.data?.map(item => item.rs.toFixed(2)), |
|
|
data: newValue.data?.map(item => item.rs.toFixed(2)), |
|
|
symbol: 'circle', |
|
|
symbol: 'circle', |
|
|