2021-10-08

src/views/PdcData/Analysis.vue

@@ -22,6 +22,7 @@
           <!-- 存栏结构 -->
           <chart-inventory-pie></chart-inventory-pie>
           <!-- 存栏变动 -->
+          <chart-inventory-lines></chart-inventory-lines>
         </div>
         <div>
           <!-- 存栏计数 -->
@@ -51,6 +52,7 @@ import Board from 'components/board/index.vue'
 import WorkInfos from './analysis/WorkInfos.vue'
 import TableContent from 'components/newTable/TableContent.vue'
 import ChartInventoryPie from './analysis/ChartInventoryPie.vue'
+import ChartInventoryLines from './analysis/ChartInventoryLines.vue'
 
 import { tableItems, tableShows } from './analysis/table.config'
 
@@ -60,7 +62,8 @@ export default {
     Board,
     WorkInfos,
     TableContent,
-    ChartInventoryPie
+    ChartInventoryPie,
+    ChartInventoryLines
   },
   data() {
     return {

src/views/PdcData/analysis/ChartInventoryLines.vue

@@ -0,0 +1,133 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 17:24:29
+ * @LastEditTime: 2021-10-08 17:28:21
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryLines.vue
+-->
+<template>
+  <div class="chart-inventory-lines">
+    <div id="chartLines"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartWsd",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        legend: {
+          data: ['温度', '湿度']
+        },
+        color: ['#5599FE', '#31C3A6'],
+        grid: {
+          top: '15%',
+          left: '10%',
+          bottom: '10%',
+          right: '10%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '温度',
+            axisLabel: {
+              formatter: '{value} °C'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            splitLine:{
+              show:false
+            }
+          },
+          {
+            type: 'value',
+            name: '湿度',
+            axisLabel: {
+              formatter: '{value} RH'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            // splitLine:{
+            //   show:false
+            // }
+          }
+        ],
+        series: [
+          {
+            name: '温度',
+            type: 'line',
+            smooth: false,
+            data: [20, 19, 18, 23.2, 25.6, 28.7, 35.6, 36.2, 32.6, 20.0, 16.4, 23.3]
+          },
+          {
+            name: '湿度',
+            type: 'line',
+            smooth: false,
+            yAxisIndex: 1,
+            data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartLines'));
+    this.init();
+  }
+}
+</script>
+
+<style scoped>
+.chart-inventory-lines {
+  display: inline-block;
+  width: 50%;
+  height: 300px;
+}
+#chartLines {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/PdcData/analysis/ChartInventoryPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-30 15:46:57
- * @LastEditTime: 2021-09-30 17:10:31
+ * @LastEditTime: 2021-10-08 17:21:17
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryPie.vue
@@ -37,7 +37,7 @@ export default {
         },
         legend: {
           top: '25%',
-          left: '40%',
+          left: '55%',
           orient: 'vertical',
           icon: "circle",
           selectedMode: false, // 取消右侧项选中
@@ -66,7 +66,7 @@ export default {
         graphic: [
           {
             type: 'text',
-            left: '17%',
+            left: '27%',
             top: '43%',
             style: {
               text: '总存栏',
@@ -76,7 +76,7 @@ export default {
           },
           {
             type: 'text',
-            left: '14%',
+            left: '24%',
             top: '53%',
             style: {
               text: '123,224头',
@@ -89,8 +89,8 @@ export default {
           {
             name: 'Access From',
             type: 'pie',
-            radius: ['50%', '70%'],
-            center: ['20%', '55%'],
+            radius: ['60%', '80%'], // 半径
+            center: ['30%', '55%'],
             avoidLabelOverlap: false,
             label: {
               show: false,