邓洁 : 折线图渲染

src/components/content/badGasInfo/BadGasInfo.vue

@@ -7,7 +7,7 @@
     <el-dialog v-model="isVisited" title="有害气体监控数据" width="1996px" :modal="false">
       <div class="left-icon"></div>
       <div class="right-icon"></div>
-      <div id="container" ref="chart" @click.stop></div>
+      <div id="container" ref="chart"></div>
       <div class="time-select">
 
       </div>
@@ -25,108 +25,9 @@ const props = defineProps({
 });
 const isVisited = ref(false);
 const badGasList = ref([])
-const chart = ref(null);
+const chart = ref();
 let myEcharts = reactive({});
-const option = reactive({
-  //图例
-  legend: {
-    left: 0,
-    textStyle:{
-      color:'#FFFFFF',
-      fontSize:28
-    },
-    // itemWidth: 20,
-    // itemHeight: 20
-  },
-  //离容器四侧的距离
-  grid: {
-    left: 45, // 左边距
-    // right: 60, // 右边距
-    top: 60, // 顶边距
-    bottom: 40, // 底边距
-    // containLabel: true,
-  },
-  //提示框组件
-  tooltip: {
-    show: true,
-    trigger: 'axis'
-  },
-  //X轴
-  xAxis: {
-    type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    axisLabel: {
-      textStyle: {
-        fontSize: 24,
-        color:'#D6F1FA'
-      },
-    },
-  },
-  //Y轴
-  yAxis: {
-    type: 'value',
-
-    axisLabel: {
-      textStyle: {
-        fontSize: 24,
-        color:'#D6F1FA'
-      },
-    },
-  },
-  //配置项
-  series: [
-    {
-      name: '二氧化碳',
-      data: [5, 9, 10, 7, 8, 15, 12],
-      type: 'line',
-      smooth: true,
-      symbolSize:24,
-      lineStyle:{
-        width:5
-      }
-    },
-    {
-      name: '一氧化碳',
-      data: [8, 15, 5, 9, 10, 7, 12],
-      type: 'line',
-      smooth: true,
-      symbolSize:24,
-      lineStyle:{
-        width:5
-      }
-    },
-    {
-      name: '二氧化氮',
-      data: [5, 15, 1, 9, 10, 7, 8],
-      type: 'line',
-      smooth: true,
-      symbolSize:24,
-      lineStyle:{
-        width:5
-      }
-    },
-    {
-      name: '二氧化硫',
-      data: [8, 15, 12, 5, 9, 2, 7],
-      type: 'line',
-      smooth: true,
-      symbolSize:24,
-      lineStyle:{
-        width:5
-      }
-    },
-    {
-      name: '硫化氢',
-      data: [2, 9, 10, 15, 12, 7, 8,],
-      type: 'line',
-      smooth: true,
-      symbolSize:24,
-      lineStyle:{
-        width:5
-      }
-    },
-  ]
-})
+// const option = reactive()
 
 watch(() => props.list, (now) => {
   badGasList.value.forEach(item => {
@@ -142,12 +43,6 @@ watch(() => props.badGasData, (now) => {
   getBadGasInfo(now.sensorList)
 }, {deep: true});
 
-onMounted(() => {
-  nextTick(() => {
-    initChart()
-  })
-})
-
 const getBadGasInfo = (now) => {
   let windPressureObj = {}
   let windPressureArr = []
@@ -172,16 +67,118 @@ const changeData = (item) => {
 const handleOpenChart = () => {
   console.log('有害气体弹窗')
   isVisited.value = true
-  initChart()
+  nextTick(() => {
+    initChart()
+  })
+  // initChart()
 }
 /**
  * 初始化echarts实例方法
  */
 const initChart = () => {
   //3.初始化container容器
-  myEcharts = echarts.init(chart.value);
+  myEcharts = echarts.init(document.getElementById('container'));
   //5.传入数据
-  myEcharts.setOption(option, true);
+  let option={
+    //图例
+    legend: {
+      left: 0,
+      textStyle:{
+        color:'#FFFFFF',
+        fontSize:28
+      },
+      // itemWidth: 20,
+      // itemHeight: 20
+    },
+    //离容器四侧的距离
+    grid: {
+      left: 45, // 左边距
+      // right: 60, // 右边距
+      top: 60, // 顶边距
+      bottom: 40, // 底边距
+      // containLabel: true,
+    },
+    //提示框组件
+    tooltip: {
+      show: true,
+      trigger: 'axis'
+    },
+    //X轴
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisLabel: {
+        textStyle: {
+          fontSize: 24,
+          color:'#D6F1FA'
+        },
+      },
+    },
+    //Y轴
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        textStyle: {
+          fontSize: 24,
+          color:'#D6F1FA'
+        },
+      },
+    },
+    //配置项
+    series: [
+      {
+        name: '二氧化碳',
+        data: [5, 9, 10, 7, 8, 15, 12],
+        type: 'line',
+        smooth: true,
+        symbolSize:24,
+        lineStyle:{
+          width:5
+        }
+      },
+      {
+        name: '一氧化碳',
+        data: [8, 15, 5, 9, 10, 7, 12],
+        type: 'line',
+        smooth: true,
+        symbolSize:24,
+        lineStyle:{
+          width:5
+        }
+      },
+      {
+        name: '二氧化氮',
+        data: [5, 15, 1, 9, 10, 7, 8],
+        type: 'line',
+        smooth: true,
+        symbolSize:24,
+        lineStyle:{
+          width:5
+        }
+      },
+      {
+        name: '二氧化硫',
+        data: [8, 15, 12, 5, 9, 2, 7],
+        type: 'line',
+        smooth: true,
+        symbolSize:24,
+        lineStyle:{
+          width:5
+        }
+      },
+      {
+        name: '硫化氢',
+        data: [2, 9, 10, 15, 12, 7, 8,],
+        type: 'line',
+        smooth: true,
+        symbolSize:24,
+        lineStyle:{
+          width:5
+        }
+      },
+    ]
+  }
+  myEcharts.setOption(option);
   //图表大小自适应窗口大小变化
   window.onresize = () => {
     myEcharts.resize();