Crunchy
2025-01-13 300a480751c63fa970e3879965ff64c5bbfb4eac
src/views/equipment/mqtt-show/components/largeAreaChart.vue
@@ -4,8 +4,6 @@
<script>
import * as echarts from 'echarts'
var myChart = null
var option = null
export default {
  props: {
@@ -25,12 +23,6 @@
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%']
          }
        },
        title: {
          left: '5%',
          text: '设备名称:' + this.otherData.deviceName
@@ -97,38 +89,28 @@
    }
  },
  mounted() {
    myChart = echarts.init(this.$refs.myChart)
    // 正确使用 this 来定义 myChart 为组件实例的变量
    this.myChart = echarts.init(this.$refs.myChart)
    this.initDrag()
  },
  methods: {
    initDrag() {
      myChart.setOption((option = this.option), true)
      this.myChart.setOption(this.option)
      // 页面发生变化tree也改变
      // 页面发生变化 tree 也改变
      window.addEventListener('resize', () => {
        if (myChart) myChart.resize()
        if (this.myChart) this.myChart.resize()
      })
    },
    refreshData(seriesData, xAxisData) {
      //刷新数据
      let refreshOption = myChart.getOption()
      // 刷新数据
      const refreshOption = this.myChart.getOption()
      refreshOption.series[0].data = seriesData
      refreshOption.xAxis[0].data = xAxisData
      myChart.setOption(refreshOption)
      // 使用 Promise 包装 setOption 使其成为异步操作
      this.myChart.setOption(refreshOption, true)
    }
  }
  // watch: {
  //   yAxisMonth: {
  //     handler(newVal) {
  //       console.log(`output->myChart`,myChart)
  //       setTimeout(()=>{
  //         myChart.setOption((option = this.option), true)
  //       },100)
  //     },
  //     deep: true
  //   }
  // }
}
</script>