airoptweb/src/views/echart/echartLine.vue

<template>

    <!-- 折线图 -->
        <div>
        <div class="echartitem">
          <!-- <h3 class="selcal">{{ props.selval }}</h3> -->
            <div id="line2"  ref="chartContainer"  style="width:100%;height:500px;"></div>
        </div>
        </div>
      </template>
      <script setup>
      import { ref, onMounted, reactive,markRaw, inject,watch,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'
    let vars=ref([]);
    let vals=ref([]);
    let series=ref([]);
    let xdata=ref([]);
    let chartContainer=ref(null);
    let myChart;
    let chartDom=ref()
    let option=ref(null);
    let convergeDate=ref([]);
    let curvedata=ref('')  
    let state = reactive({
    instance: null,
    })
    const props = defineProps({
      echartdata: {
      type: String,
    },
    curvedata:{
      type: String,
    },
    })
    onMounted(() => {
     chartContainer.value.style.width=window.innerWidth-220+'px';       
        myChart = echarts.init(chartContainer.value);
        linechart();
          window.addEventListener("resize",function() {
            chartContainer.value.style.width='';
          myChart.resize();
    })
         })
      //初始化
      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',
    //       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',
      data: firstColumn
    }
    series.value.push(item)
    }
    myChart.setOption({
      legend: {
            data:vars.value
        },
      xAxis:{
        data:  xdata.value,
      },
      series: series.value
    });

  }
      const linechart= ()=>{
    option.value = {
      title: {
    text: '折线图'
  },
              tooltip: {
              trigger: "axis",//item
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            legend: {
                data:vars.value
            },
            grid: {
                show: false,
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data:  xdata.value,
                axisLine: {//X轴线
                show: true, 
                lineStyle: {
                    color: '#000', // 线的颜色
                    width: 2, // 线宽
                    type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
                }
                },
                splitLine: {
                show: true // 如果不需要网格线，可以设置为 false
            }
            },
            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);
            window.onresize = function() {
                // 让图表自适应大小
                myChart.resize();
            };
        }
        // 监听数据变化，重绘图表
      //   watch( myChart.value, () => {
      //     console.log(11111)
      //     window.onresize = function() {
      //           // 让图表自适应大小
      //           myChart.value.resize();
      //       };
      // });
      //window.addEventListener('resize', handleResize);
    // watch(series, () => {
    //   linechart();
    // }, { deep: true });
        // watch(() =>props.echartdata, (newValue, oldValue) => {
        //   // 这里处理 echartData 变化的逻辑
        //   console.log(11111)
        //   console.log('echartData changed:', newValue);
        // //  console.log(optmonitor1.value);
        // }, {deep: true ,immediate: true });
        defineExpose({linechart,getsockechart,echatinit});
      </script>
      <style lang="scss" scoped>
      .selcal{
        position: absolute;
        top: 37%;
        width: 26px;
        color: #000;
        font-size: 14px;
        font-weight: bold;
        left: 5px
      }
     .diedai{
      color: #000;
      font-size: 14px;
      padding-bottom: 20px;
      font-weight: bold;
     }
      </style>