From 300a480751c63fa970e3879965ff64c5bbfb4eac Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期一, 13 一月 2025 14:04:32 +0800
Subject: [PATCH] 数采改为3秒刷新，无感刷新
---
src/views/equipment/mqtt-show/components/largeAreaChart.vue | 123 +++++++++++++++++++---------------------
1 files changed, 58 insertions(+), 65 deletions(-)
diff --git a/src/views/equipment/mqtt-show/components/largeAreaChart.vue b/src/views/equipment/mqtt-show/components/largeAreaChart.vue
index 5bdaf75..325ab08 100644
--- a/src/views/equipment/mqtt-show/components/largeAreaChart.vue
+++ b/src/views/equipment/mqtt-show/components/largeAreaChart.vue
@@ -4,42 +4,28 @@
<script>
import * as echarts from 'echarts'
-var myChart = null
-var option = null
-
-let base = +new Date(1968, 9, 3)
-let oneDay = 24 * 3600 * 1000
-let date = []
-let data = [Math.random() * 300]
-for (let i = 1; i < 20000; i++) {
- var now = new Date((base += oneDay))
- date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
- data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
-}
export default {
- // props: {
- // yAxisMonth: {
- // type: Array,
- // default: []
- // },
- // seriesData: {
- // type: Array,
- // default: []
- // }
- // },
+ props: {
+ yAxisMonth: {
+ type: Array,
+ default: []
+ },
+ seriesData: {
+ type: Array,
+ default: []
+ },
+ otherData: {
+ type: Object,
+ default: {}
+ }
+ },
data() {
return {
option: {
- tooltip: {
- trigger: 'axis',
- position: function(pt) {
- return [pt[0], '10%']
- }
- },
title: {
left: '5%',
- text: 'Large Ara Chart'
+ text: '璁惧鍚嶇О锛�' + this.otherData.deviceName
},
toolbox: {
right: '5%',
@@ -57,65 +43,72 @@
xAxis: {
type: 'category',
boundaryGap: false,
- data: date
+ data: this.yAxisMonth
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
- dataZoom: [
- {
- type: 'inside',
- start: 0,
- end: 10
- },
- {
- start: 0,
- end: 10
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params) => {
+ var tips = ''
+ const value = params[0].value
+ if (value) {
+ tips =
+ '缂栧彿锛�' +
+ this.otherData.dataStream +
+ '<br />鍙傛暟锛�' +
+ value +
+ '<br />澶囨敞锛�' +
+ (this.otherData.remark ? this.otherData.remark : '') +
+ '<br />鍗曚綅锛�' +
+ (this.otherData.unit ? this.otherData.unit : '') +
+ '<br />鏃堕棿锛�' +
+ params[0].axisValue
+ }
+ return tips
}
- ],
+ },
series: [
{
- name: 'Fake Data',
+ // name: '鍙傛暟',
type: 'line',
+ label: {
+ normal: {
+ show: true,
+ position: 'top'
+ }
+ },
symbol: 'none',
- sampling: 'lttb',
- itemStyle: {
- color: 'rgb(255, 70, 131)'
- },
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgb(255, 158, 68)'
- },
- {
- offset: 1,
- color: 'rgb(255, 70, 131)'
- }
- ])
- },
- data: data
+ areaStyle: { normal: {} },
+ data: this.seriesData
}
]
}
}
},
mounted() {
- myChart = echarts.init(this.$refs.myChart)
- option = this.makeOption()
+ // 姝ｇ‘浣跨敤 this 鏉ュ畾涔� myChart 涓虹粍浠跺疄渚嬬殑鍙橀噺
+ this.myChart = echarts.init(this.$refs.myChart)
this.initDrag()
},
methods: {
- makeOption() {},
initDrag() {
- myChart.setOption((option = this.option))
+ this.myChart.setOption(this.option)
- option && myChart.setOption(option)
- // 椤甸潰鍙戠敓鍙樺寲tree涔熸敼鍙�
+ // 椤甸潰鍙戠敓鍙樺寲 tree 涔熸敼鍙�
window.addEventListener('resize', () => {
- if (myChart) myChart.resize()
+ if (this.myChart) this.myChart.resize()
})
+ },
+ refreshData(seriesData, xAxisData) {
+ // 鍒锋柊鏁版嵁
+ const refreshOption = this.myChart.getOption()
+ refreshOption.series[0].data = seriesData
+ refreshOption.xAxis[0].data = xAxisData
+ // 浣跨敤 Promise 鍖呰 setOption 浣垮叾鎴愪负寮傛鎿嶄綔
+ this.myChart.setOption(refreshOption, true)
}
}
}
--
Gitblit v1.9.3