diff --git a/src/components/home/LineChart.vue b/src/components/home/LineChart.vue index 73efbb0..4d08d6f 100644 --- a/src/components/home/LineChart.vue +++ b/src/components/home/LineChart.vue @@ -29,9 +29,34 @@ watch( }, tooltip: { trigger: 'axis', + formatter: (params: any[]) => { + if (!params || !params.length) + return '' + // 1. 把第一个点的轴值(已经是格式化好的时间串)当作标题 + const time = params[0].axisValue + let html = `
${time}
` + + // 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 += `
${item.marker} ${item.seriesName}: ${item.data}${unit}
` + }) + return html + }, }, legend: { - data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'], + data: ['温度', '相对湿度', 'H2O2浓度', 'H2O2相对饱和度'], orient: 'horizontal', // 水平布局 itemWidth: 10, // 图例图形宽度 itemHeight: 10, // 图例图形高度 @@ -60,7 +85,7 @@ watch( }, }, { - name: '湿度', + name: '相对湿度', type: 'line', data: newValue.data?.map(item => item.rh.toFixed(2)), symbol: 'circle', @@ -82,7 +107,7 @@ watch( }, }, { - name: 'H2O2饱和度', + name: 'H2O2相对饱和度', type: 'line', data: newValue.data?.map(item => item.rs.toFixed(2)), symbol: 'circle',