数采改为3秒刷新，无感刷新

Crunchy

2025-01-13 300a480751c63fa970e3879965ff64c5bbfb4eac

 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)
    }
  }
}