1

src/views/dynamic/parts/four.vue

@@ -2,7 +2,7 @@
   <div id="four">
     <el-row>
       <el-col :span="24" class="main">
-        <el-col :span="24" class="title"> 技术成果 </el-col>
+        <el-col :span="24" class="title"> 科技服务 </el-col>
         <el-col :span="24" class="canvas">
           <div id="fourChart" style="height: 420px"></div>
         </el-col>
@@ -14,6 +14,7 @@
 <script>
 import * as echarts from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: statistics } = createNamespacedHelpers('statistics');
 export default {
   name: 'four',
   props: {},
@@ -26,46 +27,44 @@ export default {
     this.init();
   },
   methods: {
-    init() {
-      var chartDom = document.getElementById('fourChart');
-      var myChart = echarts.init(chartDom);
-      var option;
-      option = {
-        // title: {
-        //   text: '某站点用户访问来源',
-        //   left: 'center',
-        // },
-        tooltip: {
-          trigger: 'item',
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-        },
-        series: [
-          {
-            name: '访问来源',
-            type: 'pie',
-            radius: '50%',
-            data: [
-              { value: 1048, name: '搜索引擎' },
-              { value: 735, name: '直接访问' },
-              { value: 580, name: '邮件营销' },
-              { value: 484, name: '联盟广告' },
-              { value: 300, name: '视频广告' },
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
+    ...statistics(['query']),
+    async init() {
+      let res = await this.query({ type: 'data' });
+      if (this.$checkRes(res)) {
+        console.log(res.data);
+        var chartDom = document.getElementById('fourChart');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+          // title: {
+          //   text: '某站点用户访问来源',
+          //   left: 'center',
+          // },
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            top: '5%',
+            left: 'center',
+          },
+          series: [
+            {
+              name: '访问来源',
+              type: 'pie',
+              radius: '50%',
+              data: res.data,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+                },
               },
             },
-          },
-        ],
-      };
-
-      option && myChart.setOption(option);
+          ],
+        };
+        option && myChart.setOption(option);
+      }
     },
   },
   computed: {