2021-09-30

src/views/PdcData/Analysis.vue

@@ -17,8 +17,32 @@
 
     <!-- 存栏情况 -->
     <board :title="title[1]">
-      <div></div>
+      <div>
+        <div>
+          <!-- 存栏结构 -->
+          <chart-inventory-pie></chart-inventory-pie>
+          <!-- 存栏变动 -->
+        </div>
+        <div>
+          <!-- 存栏计数 -->
+        </div>
+      </div>
     </board>
+
+    <!-- 生产情况 -->
+    <board :title="title[2]"></board>
+
+    <!-- 经营分析 -->
+    <board :title="title[3]"></board>
+
+    <!-- 应收排名 -->
+    <board :title="title[4]"></board>
+
+    <!-- 应付排名 -->
+    <board :title="title[5]"></board>
+
+    <!-- 安全库存报警 -->
+    <board :title="title[6]"></board>
   </div>
 </template>
 
@@ -26,6 +50,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 { tableItems, tableShows } from './analysis/table.config'
 
@@ -34,11 +59,12 @@ export default {
   components: {
     Board,
     WorkInfos,
-    TableContent
+    TableContent,
+    ChartInventoryPie
   },
   data() {
     return {
-      title: ['工作看板', '存栏情况'],
+      title: ['工作看板', '存栏情况', '生产情况', '经营分析', '应收排名', '应付排名', '安全库存报警'],
       workInfos: [
         {
           label: '预警信息',

src/views/PdcData/analysis/ChartInventoryPie.vue

@@ -0,0 +1,149 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-30 15:46:57
+ * @LastEditTime: 2021-09-30 17:10:31
+ * @LastEditors: Please set LastEditors
+ * @Description: 存栏结构图
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryPie.vue
+-->
+<template>
+  <div class="chart-inventory-pie">
+    <div id="chartPie"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        title: {
+          text: '存栏结构',
+          x: 20,
+          y: 20
+        },
+        grid: {
+          x: 100
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: function ({name, value, percent}) {
+            return name + '：' + value + '头&nbsp;&nbsp;&nbsp;&nbsp;' + percent + '%'
+          }
+        },
+        legend: {
+          top: '25%',
+          left: '40%',
+          orient: 'vertical',
+          icon: "circle",
+          selectedMode: false, // 取消右侧项选中
+          itemGap: 20, // 各项间隔
+          textStyle: {
+            fontSize: 15,
+            color: '#666'
+          },
+          // formatter: function (name) {
+          //   var legendIndex = 0;
+          //   var clientLabels = [
+          //     { name: '母猪存栏', percent: '36%', number: 4544 },
+          //     { name: '公猪存栏', percent: '20%', number: 3244 },
+          //     { name: '哺乳仔猪存栏', percent: '16%', number: 2032 },
+          //     { name: '保育猪存栏', percent: '10%', number: 1644 },
+          //     { name: '育肥猪存栏', percent: '9%', number: 1546 },
+          //   ]
+          //   clientLabels.forEach(function (value, i) {
+          //       if (value.name == name) {
+          //           legendIndex = i;
+          //       }
+          //   });
+          //   return name + "|     " + clientLabels[legendIndex].percent + "     " + clientLabels[legendIndex].number + '头';
+          // }
+        },
+        graphic: [
+          {
+            type: 'text',
+            left: '17%',
+            top: '43%',
+            style: {
+              text: '总存栏',
+              fontSize: 15,
+              fill: 'rgb(192, 188, 189)'
+            }
+          },
+          {
+            type: 'text',
+            left: '14%',
+            top: '53%',
+            style: {
+              text: '123,224头',
+              fontSize: 22,
+              fontWeight: 700
+            }
+          }
+        ],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            center: ['20%', '55%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              // position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '40',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            itemStyle: {
+              normal: {
+                color: function (colors) { // 颜色设置
+                  var colorList = ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
+                  return colorList[colors.dataIndex]
+                },
+              borderWidth: 5, // 设置各项空隙
+              borderColor: '#fff'
+              }
+            },
+            data: [
+              { value: 4544, name: '母猪存栏' },
+              { value: 3244, name: '公猪存栏' },
+              { value: 2032, name: '哺乳仔猪存栏' },
+              { value: 1644, name: '保育猪存栏' },
+              { value: 1546, name: '育肥猪存栏' }
+            ]
+          }
+        ]
+      };
+
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartPie'));
+    this.init()
+  }
+}
+</script>
+<style scoped>
+.chart-inventory-pie {
+  display: inline-block;
+  width: 50%;
+  height: 300px;
+}
+#chartPie {
+  width: 100%;
+  height: 100%;
+}
+</style>