forked from dyf/dyf-vue-ui
大屏数据实时
This commit is contained in:
fengerli
@ -3,111 +3,162 @@
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
|
||||
import * as echarts from 'echarts';
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
|
||||
getDeviceCommunicationModeStatistics().then((res) => {
|
||||
console.log(res, '接口数据');
|
||||
const dataList = res.data || [];
|
||||
// 1.（通信方式名称）
|
||||
const xAxisData = dataList.map(item => item.communicationModeName);
|
||||
// 2. 总数数据
|
||||
const totalData = dataList.map(item => item.totalDevices);
|
||||
// 3. 异常数数据
|
||||
const abnormalData = dataList.map(item => item.abnormalDevices);
|
||||
// 图表配置）
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
legend: {
|
||||
data: ['总数', '异常'],
|
||||
right: '20px',
|
||||
textStyle: { color: '#DEEFFF' },
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: { color: 'rgba(255,255,255,0.1)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
data: totalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(0,166,255,1)' },
|
||||
{ offset: 1, color: 'rgba(0,125,221, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
type: 'bar',
|
||||
data: abnormalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(232,69,37,1)' },
|
||||
{ offset: 1, color: 'rgba(240,12,12, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.log('获取数据失败', err);
|
||||
});
|
||||
// 窗口 resize 时自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let myChart: echarts.ECharts | null = null; // 保存图表实例
|
||||
let dataTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
if (!myChart) return;
|
||||
|
||||
getDeviceCommunicationModeStatistics().then((res) => {
|
||||
console.log(res, '接口数据');
|
||||
const dataList = res.data || [];
|
||||
// 1.（通信方式名称）
|
||||
const xAxisData = dataList.map(item => item.communicationModeName);
|
||||
// 2. 总数数据
|
||||
const totalData = dataList.map(item => item.totalDevices);
|
||||
// 3. 异常数数据
|
||||
const abnormalData = dataList.map(item => item.abnormalDevices);
|
||||
// 图表配置）
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
legend: {
|
||||
data: ['总数', '异常'],
|
||||
right: '20px',
|
||||
textStyle: { color: '#DEEFFF' },
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: { color: 'rgba(255,255,255,0.1)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
data: totalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(0,166,255,1)' },
|
||||
{ offset: 1, color: 'rgba(0,125,221, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
type: 'bar',
|
||||
data: abnormalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(232,69,37,1)' },
|
||||
{ offset: 1, color: 'rgba(240,12,12, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.log('获取数据失败', err);
|
||||
});
|
||||
};
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 开始数据定时器
|
||||
const startDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
}
|
||||
// 每800秒（8分钟
|
||||
dataTimer = setInterval(updateChartData, 800000);
|
||||
};
|
||||
|
||||
// 清除数据定时器
|
||||
const clearDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
myChart = echarts.init(chartRef.value);
|
||||
// 初始加载数据
|
||||
updateChartData();
|
||||
// 启动定时器
|
||||
startDataTimer();
|
||||
// 窗口 resize 时自适应
|
||||
window.addEventListener('resize', handleResize);
|
||||
};
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 清除定时器
|
||||
clearDataTimer();
|
||||
// 移除事件监听
|
||||
window.removeEventListener('resize', handleResize);
|
||||
// 销毁图表实例
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 5.8vh;
|
||||
|
||||
Reference in New Issue
Block a user