admin-ui/src/views/iot/device/instance/component/chart.vue

<template>
	<div class="system-edit-dic-container">
		<el-dialog v-model="isShowDialog" title="数据记录" width="850px">
			<!-- 这里是 echarts 线图 -->
			<div id="lineChart" ref="chartRef" class="chart-container"></div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import api from '/@/api/device'
import * as echarts from 'echarts'

const loading = ref(false)
const isShowDialog = ref(false)
const chartRef = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null
const lineData = ref([])

// 初始化图表
const initChart = () => {
	if (chartRef.value) {
		// 如果已有实例先销毁
		if (chartInstance) {
			chartInstance.dispose()
		}
		// 创建图表实例
		chartInstance = echarts.init(chartRef.value)
		// 设置加载状态
		if (loading.value) {
			chartInstance.showLoading()
		} else {
			chartInstance.hideLoading()
		}
		// 更新图表
		updateChart()
	}
}

// 更新图表数据
const updateChart = () => {
	if (!chartInstance) return

	// 从 lineData 中提取数据
	const xData = lineData.value.map((item: any) => item.ts?.slice(5)).reverse()
	const yData = lineData.value.map((item: any) => item.value).reverse()

	// 配置图表选项
	const option = {
		tooltip: {
			trigger: 'axis',
			formatter: '{b}<br />{a}: {c}',
		},
		grid: {
			top: 15,
			left: 40,
			right: 30,
			bottom: 50, // 增加底部空间，为 dataZoom 留出位置
			containLabel: true,
		},
		dataZoom: [
			{
				type: 'slider', // 滑动条型数据区域缩放组件
				show: true,
				start: 0,
				end: 100,
				height: 20,
				bottom: 10,
				borderColor: 'transparent',
				backgroundColor: '#f5f5f5',
				fillerColor: 'rgba(167, 183, 204, 0.4)',
				handleIcon:
					'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
				handleSize: '80%',
				handleStyle: {
					color: '#fff',
					shadowBlur: 3,
					shadowColor: 'rgba(0, 0, 0, 0.6)',
					shadowOffsetX: 2,
					shadowOffsetY: 2,
				},
			},
			{
				type: 'inside', // 内置型数据区域缩放组件，允许鼠标滚轮或触摸板缩放
				start: 0,
				end: 100,
			},
		],
		xAxis: {
			type: 'category',
			data: xData,
			axisLabel: {
				rotate: 0,
			},
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				name: '数值',
				type: 'line',
				data: yData,
				smooth: true,
				lineStyle: {
					width: 2,
				},
				symbolSize: 6,
			},
		],
	}

	// 设置图表配置
	chartInstance.setOption(option)
}

// 监听数据变化，更新图表
watch(
	() => lineData.value,
	() => {
		nextTick(() => {
			updateChart()
		})
	},
	{ deep: true }
)

// 监听 loading 状态变化
watch(
	() => loading.value,
	(newVal) => {
		if (chartInstance) {
			if (newVal) {
				chartInstance.showLoading()
			} else {
				chartInstance.hideLoading()
			}
		}
	}
)

// 监听弹窗显示状态
watch(
	() => isShowDialog.value,
	(val) => {
		if (val) {
			nextTick(() => {
				initChart()
			})
		}
	}
)

// 打开弹窗
const openDialog = (row: any, deviceKey: string) => {
	isShowDialog.value = true
	loading.value = true
	api.instance
		.getLogDetail({
			deviceKey: deviceKey,
			propertyKey: row.key,
			pageSize: 100,
		})
		.then((res: any) => {
			lineData.value = res.List
			console.log(res.List)
		})
		.finally(() => (loading.value = false))
}

defineExpose({ openDialog })
</script>
<style scoped>
.chart-container {
	width: 100%;
	height: 400px;
}
</style>