|
|
|
@ -12,6 +12,7 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
|
|
|
|
import dayjs from 'dayjs' |
|
|
|
import VChart from 'vue-echarts' |
|
|
|
import VChart from 'vue-echarts' |
|
|
|
import { use } from 'echarts/core' |
|
|
|
import { use } from 'echarts/core' |
|
|
|
import { CanvasRenderer } from 'echarts/renderers' |
|
|
|
import { CanvasRenderer } from 'echarts/renderers' |
|
|
|
@ -109,16 +110,22 @@ const chartOption = computed<EChartsOption>(() => { |
|
|
|
trigger: 'axis', |
|
|
|
trigger: 'axis', |
|
|
|
confine: true, |
|
|
|
confine: true, |
|
|
|
appendToBody: true, |
|
|
|
appendToBody: true, |
|
|
|
// formatter: function (params: any) { |
|
|
|
formatter: function (params: any) { |
|
|
|
// var relVal = params[0].name |
|
|
|
// 时间格式化 |
|
|
|
// |
|
|
|
const date = new Date(params[0].value[0]) |
|
|
|
// for (var i = 0, l = params.length; i < l; i++) { |
|
|
|
const timeStr = dayjs(params[0].value[0]).format('YYYY-MM-DD HH:mm:ss.SSS') |
|
|
|
// relVal += `<div style="display: flex; justify-content: space-between; gap: 30px;"> |
|
|
|
|
|
|
|
// <div>${params[i].marker}${params[i].seriesName}:</div> <div">${params[i].value[1]}${props.legends.find(item => item.addr === params[i].seriesId)?.unit || ''}</div> |
|
|
|
let relVal = timeStr |
|
|
|
// </div>` |
|
|
|
|
|
|
|
// } |
|
|
|
for (let i = 0; i < params.length; i++) { |
|
|
|
// return relVal |
|
|
|
const unit = props.legends.find(item => item.addr === params[i].seriesId)?.unit || '' |
|
|
|
// } |
|
|
|
relVal += `<div style="display: flex; justify-content: space-between; gap: 30px;"> |
|
|
|
|
|
|
|
<div>${params[i].marker}${params[i].seriesName}:</div> |
|
|
|
|
|
|
|
<div>${params[i].value[1]}${unit}</div> |
|
|
|
|
|
|
|
</div>` |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return relVal |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
legend: { |
|
|
|
type: 'scroll', |
|
|
|
type: 'scroll', |
|
|
|
|