airoptweb/src/views/echart/area.vue

<template>
  <div style="width: 100%;height: 100%;">
    <!-- 面积图 -->
    <div class="echartitem" style="width: 100%;height: 100%;">
      <div id="area" ref="chartContainer" style="width: 100%;height: 100%;"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from "vue"
import { RouterView, RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import * as echarts from "echarts"
import { graphic } from "echarts/core"
let emit = defineEmits([""])
let myChart
let vars = ref([])
let vals = ref([])
let series = ref([])
let xdata = ref([])
let chartContainer = ref(null)
let chartDom = ref()
let option = ref(null)
let convergeDate = ref([])
let curvedata = ref("")
let state = reactive({
  instance: null
})
const getData = () => {}
onMounted(() => {
  nextTick(() => {
    console.log("onMounted called");
    const chartDom = document.getElementById('area');
    console.log("chartDom:", chartDom);  // 检查是否获取到 DOM 元素

    if (chartDom) {
      myChart = echarts.init(chartDom);
      myChart.resize();
      setOptionfun();
    }
  });
 
  //  $nextTick(() => {
  //       // 假设你想定位到节点node1
  //       setOptionfun()
  //     });
})

const props = defineProps({
  areashow: {
    type: Boolean,
    default: false
  }
})
// 监听 areashow 变化
watch(
  () => props.areashow,
  (newValue) => {
    if (newValue) {
      nextTick(() => {
        const chartDom = chartContainer.value
        if (chartDom) {
          myChart = echarts.init(chartDom)
          myChart.resize() // 手动调整图表大小
          setOptionfun() // 设置图表配置
        }
      })
    }
  },
  { immediate: true }
)

//初始化
const echatinit = () => {
  convergeDate.value = []
  series.value = []
  xdata.value = []
}
// 从websocket取数据
// const getsockechart=(data)=>{
//   curvedata.value=data;
//   series.value=[];
//   let rows=curvedata.value;
//   for(let i=0;i<rows.length;i++){

//        vars.value=(rows[i].vars).split(",");
//        vals.value=(rows[i].vals).split(" ");
//        let data= vals.value.map((str) => Number(str));
//        convergeDate.value.push(data);
//        xdata.value.push(rows[i].step);
//     }
//     for(let j=0;j<vars.value.length;j++){
//   let firstColumn=(convergeDate.value.map((row) => row[j]));
//     let item={
//       name: vars.value[j],
//       type: 'line',
//       stack: 'Total',
//       areaStyle: {},
//       emphasis: {
//         focus: 'series'
//       },
//       data:firstColumn
//     }
//     series.value.push(item)
//     }
//     myChart.setOption({
//       legend: {
//             data:vars.value
//         },
//       xAxis:{
//         data:  xdata.value,
//       },
//       series: series.value
//     });
// }
// 数据转化废弃
const getsockechart = (data) => {
  curvedata.value = data
  convergeDate.value = []
  series.value = []
  xdata.value = []
  let rows = JSON.parse(curvedata.value)
  let num = 0
  for (let i = 0; i < rows.length; i++) {
    num += 1
    vars.value = rows[i].vars.split(",")
    vals.value = rows[i].vals.split(" ")
    let data = vals.value.map((str) => Number(str))
    convergeDate.value.push(data)
    xdata.value.push(num)
  }
  console.log(convergeDate.value)
  // console.log( convergeDate.value);
  for (let j = 0; j < vars.value.length; j++) {
    let firstColumn = convergeDate.value.map((row) => row[j])
    let item = {
      name: vars.value[j],
      type: "line",
      stack: "Total",
      areaStyle: {},
      emphasis: {
        focus: "series"
      },
      data: firstColumn
    }
    series.value.push(item)
  }
  myChart.setOption({
    legend: {
      data: vars.value
    },
    xAxis: {
      data: xdata.value
    },
    series: series.value
  })
}
const setOptionfun = () => {
  option.value = {
    title: {
      text: "面积图"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },
    legend: {
      data: vars.value
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: xdata.value,
        axisLine: {
          //X轴线
          show: true,
          lineStyle: {
            color: "#000", // 线的颜色
            width: 2, // 线宽
            type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
          }
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLine: {
          //Y轴线
          show: true,
          lineStyle: {
            color: "#000", // 线的颜色
            width: 2, // 线宽
            type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
          }
        }
      }
    ],
    series: series.value
  }

  option.value && myChart.setOption(option.value)
}
//   watch(() =>myChart, (newValue, oldValue) => {
//         if (newValue) {
//         myChart.resize(); // 当显示时，触发ECharts的resize方法
//       }

// });

defineExpose({ getsockechart, echatinit })
</script>
<style lang="scss" scoped>
</style>