admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/realScoreComponent/dialogCom copy.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="800px"
    @close="closeDialog()"
    @open="open"
  >
    <div style="width: 100%; height: 400px">
      <!-- <inner-line-chart></inner-line-chart> -->
      <div shadow="never" class="homeBoxCard" v-loading="loading">
        <div
          style="height:300px"
          ref="lineChartBanlance"
          id="lineChartBanlance"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
// import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect, onMounted } from 'vue'
// import * as api from '@/api/siteManage/watchDog.js'
// import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// import innerLineChart from './innerLineChart.vue'

export default defineComponent({
  name: 'DialogCom',
  components: {
    // innerLineChart,
  },
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
  },
  setup(props, context) {
    // let lineChartBanlance = ref(null)
    context
    const dialogVisible = ref(false)
    const siteList = ref([])
     function echarts2() {
      alert('000')
      // 新建一个promise对象
      let newPromise = new Promise((resolve) => {
        resolve()
      })
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        alert('promise')
        //	此dom为echarts图标展示dom
        let myChart = echarts.init(document.getElementById('lineChartBanlance'))
        myChart.setOption({
          color: ['#1187FF'],
          legend: {
            bottom: '0',
            data: ['电流不平衡度'],
          },

          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
          },
          grid: {
            left: '20',
            right: '40',
            top: '40',
            bottom: '30',
            containLabel: true,
          },
          xAxis: {
            axisLabel: {
              color: '#444',
              fontSize: 14,
            },
            /*改变xy轴颜色*/
            axisLine: {
              lineStyle: {
                color: '#444',
                width: 1, //这里是为了突出显示加上的
              },
            },
            boundaryGap: false,
            //   data: electricChart2.value.dataTime,
            data: [1, 2, 3, 4, 5, 6, 7, 8],
          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: 'black',
              fontSize: 10,
            },
            type: 'value',
            axisTick: {
              show: true, //去除刻度线
            },
            axisLabel: {
              color: 'black', // 文本颜色
            },
            axisLine: {
              show: true, // 去除轴线
              lineStyle: {
                color: 'black',
              },
            },
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#9d9d9d',
              },
            },
          },

          series: [
            {
              name: '电流不平衡度',
              type: 'line',
              symbolSize: 7,
              smooth: false,
              // data: electricChart2.value.elBalun,
              data: [1, 2, 3, 4, 5, 6, 7, 8],
              markLine: {
                //最大值和最小值
                data: [
                  {
                    yAxis: 30,
                    label: {
                      position: 'middle',
                      formatter: '严重三项不平衡',
                    },
                    lineStyle: {
                      width: 2,
                      color: '#FF5D1D',
                    },
                  },
                  {
                    yAxis: 14,
                    label: {
                      position: 'middle',
                      formatter: '不平衡度',
                    },
                    lineStyle: {
                      width: 2,
                      color: '#f2e251',
                    },
                  },
                ],
              },
            },
          ],
        })
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      })
    }

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      // setTimeout(echarts2(), 1000)

      echarts2()
    }

    // 关闭弹框
    const closeDialog = () => {
      context.emit('closeDialog', false)
      dialogVisible.value = false
    }

    watchEffect((fn) => {
      fn
      dialogVisible.value = props.flag
    })
    onMounted(() => {
      // setTimeout(function(){
      // },3000)
    })

    return {
      closeDialog,
      dialogVisible,
      siteList,
      echarts2,
      open,
    }
  },
})
</script>
 
<style scoped lang="scss">
</style>