2023-5-8 数采集完成

Crunchy

2024-05-08 976c6eb6ca0e425342aabe5397eaa4095708bffe

 src/views/equipment/mqtt-show/components/largeAreaChart.vue

@@ -7,27 +7,21 @@
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: {
@@ -39,7 +33,7 @@
        },
        title: {
          left: '5%',
          text: 'Large Ara Chart'
          text: '设备名称：' + this.otherData.deviceName + '\\单位：' + (this.otherData.unit ? this.otherData.unit : '')
        },
        toolbox: {
          right: '5%',
@@ -57,7 +51,7 @@
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
          data: this.yAxisMonth
        },
        yAxis: {
          type: 'value',
@@ -76,7 +70,7 @@
        ],
        series: [
          {
            name: 'Fake Data',
            name: '参数',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
@@ -95,7 +89,7 @@
                }
              ])
            },
            data: data
            data: this.seriesData
          }
        ]
      }
@@ -109,15 +103,26 @@
  methods: {
    makeOption() {},
    initDrag() {
      myChart.setOption((option = this.option))
      myChart.setOption((option = this.option), true)

      option && myChart.setOption(option)
      // 页面发生变化tree也改变
      window.addEventListener('resize', () => {
        if (myChart) myChart.resize()
      })
    }
  }
  },
  // watch: {
  //   yAxisMonth: {
  //     handler(newVal) {
  //       console.log(`output->myChart`,myChart)
  //       setTimeout(()=>{
  //         myChart.setOption((option = this.option), true)
  //       },100)
        
  //     },
  //     deep: true
  //   }
  // }
}
</script>