src/views/3DOverview/components/DianChart.vue

@@ -0,0 +1,223 @@
+<template>
+  <div :id="id" ref="techy-line-chart" class="techy-chart" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+
+export default {
+  name: 'DianLineChart',
+  mixins: [resize],
+  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
+  inject: ['resizeStatus'],
+  /** End Fn.1 */
+  props: {
+    id: {
+      type: String,
+      default: 'default-dian-id'
+    },
+    title: {
+      type: String,
+      default: 'default-title'
+    },
+    xData: {
+      type: Array,
+      default: () => []
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    const colors = ['#5470C6', '#EE6666', '#339888']
+
+    // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
+    let data = [
+      // 温度走势
+      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
+      // 电流走势
+      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
+      // 电压走势
+      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
+    ]
+    let wendu = data[0]
+    let dianliu = data[1]
+    let dianya = data[2]
+
+    return {
+      chart: null,
+      option: {
+        color: colors,
+        legend: {
+          top: 4,
+          itemWidth: 8,
+          itemHeight: 8,
+          textStyle: {
+            color: '#fff9',
+            fontSize: 8
+          },
+          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
+        },
+        grid: {
+          top: 32,
+          left: 64,
+          bottom: 28
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+            axisTick: { show: false },
+            axisLabel: {
+              color: '#fff9'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff3'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: '电流/A',
+            nameTextStyle: { align: 'right', fontSize: 8 },
+            type: 'value',
+            splitNumber: 4,
+            onZero: true,
+            position: 'left',
+            offset: 42,
+            axisTick: { show: false },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            splitLine: {
+              show: false
+              // lineStyle: {
+              //   color: '#fff3'
+              // }
+            }
+          },
+          {
+            name: '电压/V',
+            nameTextStyle: { align: 'right', fontSize: 8 },
+            type: 'value',
+            splitNumber: 4,
+            axisTick: { show: false },
+            onZero: true,
+            position: 'left',
+            offset: 0,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            splitLine: {
+              show: false
+              // lineStyle: {
+              //   color: '#fff3'
+              // }
+            }
+          },
+          {
+            name: '温度',
+            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 8 },
+            axisTick: { show: false },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff9',
+                width: 1
+              }
+            },
+            type: 'value',
+            splitNumber: 4,
+            splitLine: {
+              lineStyle: {
+                color: '#fff3'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: 'ABC三相电压/v',
+            type: 'line',
+            yAxisIndex: 0,
+            // smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: dianliu,
+            symbol: 'none'
+          },
+          {
+            name: 'ABC三相电流/a',
+            type: 'line',
+            yAxisIndex: 1,
+            // smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: dianya,
+            symbol: 'none'
+          },
+          {
+            name: '电缆温度',
+            type: 'line',
+            yAxisIndex: 2,
+            // smooth: true,
+            emphasis: {
+              focus: 'series'
+            },
+            data: wendu,
+            symbol: 'none'
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    shouldResize() {
+      return this.resizeStatus()
+    }
+  },
+  watch: {
+    shouldResize(val, oldVal) {
+      setTimeout(() => {
+        this.chart.resize()
+      }, 250)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
+      this.chart.setOption(this.option)
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+    this.chart = null
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+.techy-chart {
+  height: 100%;
+  width: 100%;
+}
+
+.techy-chart >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

src/views/3DOverview/components/FadianChart.vue

@@ -15,7 +15,7 @@ export default {
   props: {
     id: {
       type: String,
-      default: 'default-id'
+      default: 'default-fadian-id'
     },
     title: {
       type: String,

src/views/3DOverview/components/LeftContentPublicConsume.vue

@@ -98,7 +98,9 @@
           <img src="./assets/consume/d.png" width="32" height="32" alt="dian">
           <span>电</span>
         </div>
-        <div class="content-part" />
+        <div class="content-part">
+          <DianChart />
+        </div>
       </TechyBox>
     </div>
 
@@ -121,10 +123,10 @@ import TechyBarChart from './TechyBarChart.vue'
 import TechyLineChart from './TechyLineChart.vue'
 import TechyBox from './TechyBox.vue'
 import FadianChart from './FadianChart.vue'
-
+import DianChart from './DianChart.vue'
 export default {
   name: 'LeftContentPublicConsume',
-  components: { TechyBarChart, TechyBox, FadianChart, TechyLineChart },
+  components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
   data() {
     return {}
   },