邓洁 : 折线图渲染

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,9 +25,61 @@ const props = defineProps({
 });
 const isVisited = ref(false);
 const badGasList = ref([])
-const chart = ref(null);
+const chart = ref();
 let myEcharts = reactive({});
-const option = reactive({
+// const option = reactive()
+
+watch(() => props.list, (now) => {
+  badGasList.value.forEach(item => {
+    now.forEach(newItem => {
+      if (item.equipmentId === newItem.equipmentId) {
+        item.value = newItem.value
+      }
+    })
+  })
+}, {deep: true});
+
+watch(() => props.badGasData, (now) => {
+  getBadGasInfo(now.sensorList)
+}, {deep: true});
+
+const getBadGasInfo = (now) => {
+  let windPressureObj = {}
+  let windPressureArr = []
+  now.map(item => {
+    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
+      windPressureObj = changeData(item)
+      windPressureArr.push(windPressureObj)
+    }
+  })
+  badGasList.value = windPressureArr
+}
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    name: item.equipmentName.slice(0, item.equipmentName.length - 2),
+    max: 120,
+    value: item.value,
+    point: item.valueThreshold,
+    unit: item.unit
+  }
+}
+const handleOpenChart = () => {
+  console.log('有害气体弹窗')
+  isVisited.value = true
+  nextTick(() => {
+    initChart()
+  })
+  // initChart()
+}
+/**
+ * 初始化echarts实例方法
+ */
+const initChart = () => {
+  //3.初始化container容器
+  myEcharts = echarts.init(document.getElementById('container'));
+  //5.传入数据
+  let option={
     //图例
     legend: {
       left: 0,
@@ -65,7 +117,6 @@ const option = reactive({
     //Y轴
     yAxis: {
       type: 'value',
-
       axisLabel: {
         textStyle: {
           fontSize: 24,
@@ -126,62 +177,8 @@ const option = reactive({
         }
       },
     ]
-})
-
-watch(() => props.list, (now) => {
-  badGasList.value.forEach(item => {
-    now.forEach(newItem => {
-      if (item.equipmentId === newItem.equipmentId) {
-        item.value = newItem.value
   }
-    })
+  myEcharts.setOption(option);
-  })
-}, {deep: true});
-
-watch(() => props.badGasData, (now) => {
-  getBadGasInfo(now.sensorList)
-}, {deep: true});
-
-onMounted(() => {
-  nextTick(() => {
-    initChart()
-  })
-})
-
-const getBadGasInfo = (now) => {
-  let windPressureObj = {}
-  let windPressureArr = []
-  now.map(item => {
-    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
-      windPressureObj = changeData(item)
-      windPressureArr.push(windPressureObj)
-    }
-  })
-  badGasList.value = windPressureArr
-}
-const changeData = (item) => {
-  return {
-    equipmentId: item.equipmentId,
-    name: item.equipmentName.slice(0, item.equipmentName.length - 2),
-    max: 120,
-    value: item.value,
-    point: item.valueThreshold,
-    unit: item.unit
-  }
-}
-const handleOpenChart = () => {
-  console.log('有害气体弹窗')
-  isVisited.value = true
-  initChart()
-}
-/**
- * 初始化echarts实例方法
- */
-const initChart = () => {
-  //3.初始化container容器
-  myEcharts = echarts.init(chart.value);
-  //5.传入数据
-  myEcharts.setOption(option, true);
   //图表大小自适应窗口大小变化
   window.onresize = () => {
     myEcharts.resize();