科研生产tab2

src/views/bigScreen/scientific/tab2/left2.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <container1 title="工厂计划">
-      <el-date-picker slot="datePicker" v-model="dateRange" type="month" size="mini" placeholder="选择月">
+      <el-date-picker slot="datePicker" v-model="month" value-format="yyyy-MM" type="month" size="mini" placeholder="选择月">
       </el-date-picker>
       <div style="height:100%;width:100%;" ref="chart"></div>
     </container1>
@@ -24,10 +24,16 @@ export default {
   },
   data () {
     return {
-      dateRange: [],
+
       chart: null,
+      month: '',
     }
   },
+  watch: {
+    month (newVal) {
+      this.initChart(newVal)
+    },
+  },
   mounted () {
     this.$nextTick(() => {
       this.initChart()
@@ -35,70 +41,86 @@ export default {
   },
   beforeDestroy () { },
   methods: {
-    initChart () {
+    initChart (month) {
+      if (this.chart) {
+        this.chart.dispose();
+        this.chart = null;
+      }
+      let params = {};
+      if (month) {
+        params['month'] = month
+      }
       this.chart = echarts.init(this.$refs.chart)
-      this.setOptions()
-    },
-    setOptions () {
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{b} : {c}%'
-        },
-        legend: {
-          show: false,
-          data: ['绝热', '装药', '总装'],
-          textStyle: {
-            color: '#fff'
-          },
-        },
-        color: colorList,
-        series: [
-          {
-            name: 'Funnel',
-            type: 'funnel',
-            left: '20%',
-            top: 30,
-            bottom: 30,
-            width: '60%',
-            min: 20,
-            max: 60,
-            minSize: '40%',
-            maxSize: '70%',
-            sort: 'descending',
-            gap: 0,
-            label: {
-              show: true,
-              position: 'inside',
-              color: '#fff',
-              formatter: '{b} : {c}%'
-            },
-            labelLine: {
-              length: 10,
-              lineStyle: {
-                width: 1,
-                type: 'solid'
-              }
-            },
-            itemStyle: {
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            emphasis: {
-              label: {
-                fontSize: 20,
-              }
-            },
-            data: [
-              { value: 80, name: '绝热' },
-              { value: 40, name: '装药' },
-              { value: 20, name: '总装' },
+      this.request({
+        url: '/hx/scientificProduction/getMonthFactoryPlanPic',
+        method: 'get',
+        params,
+      }).then(res => {
+        if (200 == res.code) {
+          let list = res.data;
+          if (200 == res.code) {
 
-            ]
+            this.chart.setOption({
+              tooltip: {
+                trigger: 'item',
+                formatter: '{b} : {c}%'
+              },
+              legend: {
+                show: false,
+                data: ['绝热', '装药', '总装'],
+                textStyle: {
+                  color: '#fff'
+                },
+              },
+              color: colorList,
+              series: [
+                {
+                  name: 'Funnel',
+                  type: 'funnel',
+                  left: '20%',
+                  top: 30,
+                  bottom: 30,
+                  width: '60%',
+                  min: 20,
+                  max: 60,
+                  minSize: '40%',
+                  maxSize: '70%',
+                  label: {
+                    show: true,
+                    position: 'inside',
+                    color: '#fff',
+                    formatter: '{b} : {c}%'
+                  },
+                  labelLine: {
+                    length: 10,
+                    lineStyle: {
+                      width: 1,
+                      type: 'solid'
+                    }
+                  },
+                  itemStyle: {
+                    borderColor: '#fff',
+                    borderWidth: 1
+                  },
+                  emphasis: {
+                    label: {
+                      fontSize: 20,
+                    }
+                  },
+                  data: [
+                    { value: list.map(e => e.realInsulate).reduce((prev, next) => prev + next), name: '绝热' },
+                    { value: list.map(e => e.realCharge).reduce((prev, next) => prev + next), name: '装药' },
+                    { value: list.map(e => e.realAssemble).reduce((prev, next) => prev + next), name: '总装' },
+                  ]
+                }
+              ]
+            })
           }
-        ]
+        }
+
       })
     },
+
   },
 }
 </script>