统计

src/views/statistics/productStatisticsList.vue

@@ -21,6 +21,7 @@
           </el-form-item>
         </el-form>
       </div>
+      <div style="width: 100%; height:500px;margin-top:20px" id="chart"></div>
 
       <el-table
         :data="productList"
@@ -146,6 +147,7 @@
 
 <script>
 import marketingApi from '@/api/finance/marketing.js'
+import echarts from 'echarts'
 
 export default {
   name: 'product_productList',
@@ -212,10 +214,42 @@ export default {
       goodsId: '',
       isProductBox: false,
       multipleSelection: [],
-      detailData: {} //详情对象
+      detailData: {}, //详情对象
+      myChart: '',
+      option: {
+        title: {
+          text: '一级分类商品',
+          // subtext: 'Fake Data',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          // orient: 'vertical',
+          bottom: '20'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: '50%',
+            center: ['30%', '50%'],
+            data: []
+          },
+          {
+            type: 'pie',
+            radius: '50%',
+            center: ['75%', '50%'],
+            data: []
+          }
+        ]
+      }
     }
   },
-  created() {
+  created() {},
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('chart'))
+
     var DaysAgo = this.timeBefore()
     var sevenDaysAgo = this.timeBefore7()
     console.log('sevenDaysAgo', sevenDaysAgo, DaysAgo)
@@ -231,8 +265,8 @@ export default {
     this.getChartList()
   },
 
-  activated() {},
   methods: {
+
     closeLabel(label) {
       let index = this.dataLabel.indexOf(this.dataLabel.filter(d => d.id == label.id)[0])
       this.dataLabel.splice(index, 1)
@@ -328,8 +362,26 @@ export default {
       await marketingApi.commodityChart(this.createTime).then(res => {
         if ((res.code = 20000)) {
           this.productList = res.data
+
+          for (var i = 0; i < this.productList.length; i++) {
+            var obj = new Object()
+            var obj2 = new Object()
+            obj.name = this.productList[i].categoryName
+            obj.value = this.productList[i].sellNum
+
+            obj2.name = this.productList[i].categoryName
+            obj2.value = this.productList[i].sellMoney
+            this.option.series[0].data[i] = obj
+            this.option.series[1].data[i] = obj2
+          }
+          console.log('op', this.option)
+          console.log('series', this.option.series)
+          this.myChart.setOption(this.option)
         }
       })
+      window.onresize = function() {
+        this.myChart.resize()
+      }
     },
     // 商品销售列表
     async getList() {

src/views/statistics/searchStatisticsList.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="article-manager">
-    <div style="width: 100%; height:500px" id="chart"></div>
     <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
       <!-- <div >
         <el-form :model="page" label-width="80px" label-position="right" inline @submit.native.prevent class="mt16">
@@ -79,7 +78,6 @@
 
 <script>
 import marketingApi from '@/api/finance/marketing.js'
-import echarts from "echarts";
 export default {
   name: 'product_productList',
 
@@ -117,60 +115,10 @@ export default {
 
     this.getList()
   },
-  mounted() {
+ 
-    this.echartsInit()
-  },
   activated() { },
   methods: {
-    echartsInit() {
+   
-      var myChart = echarts.init(document.getElementById('chart'));
-      let option = {
-        title: {
-          text: '一级分类商品',
-          // subtext: 'Fake Data',
-          left: 'center'
-        },
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          // orient: 'vertical', 
-          bottom: "20"
-        },
-        series: [
-          {
-            type: 'pie',
-            radius: '50%',
-            center: ['25%', '50%'],
-            data: [
-              { value: 335, name: '彩妆' },
-              { value: 310, name: '留学' },
-              { value: 310, name: '派遣玉缘轩' },
-              { value: 310, name: '法律服务' },
-              { value: 310, name: '食品' }
-
-            ]
-          },
-          {
-            type: 'pie',
-            radius: '50%',
-            center: ['75%', '50%'],
-            data: [
-              { value: 310, name: '餐饮' },
-              { value: 310, name: '酒水汽车' },
-              { value: 310, name: '厨具家电男装' },
-              { value: 310, name: '口腔护理洗护' },
-              { value: 310, name: '学习' }
-            ]
-          }
-        ]
-      };
-      myChart.setOption(option);
-      //动态修改图大小
-      window.onresize = function () {
-        myChart.resize(); 
-      };
-    },
     closeLabel(label) {
       let index = this.dataLabel.indexOf(this.dataLabel.filter(d => d.id == label.id)[0])
       this.dataLabel.splice(index, 1)