1

src/views/dynamic/parts/achieveCom copy.vue

@@ -1,12 +1,12 @@
 <template>
-  <div id="top-right">
+  <div id="achieveCom">
     <el-row>
-      <el-col :span="24" class="main" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
+      <el-col :span="24" class="main">
         <el-col :span="24" class="one">
           e专利
         </el-col>
         <el-col :span="24" class="two">
-          <div id="patentData" class="style"></div>
+          <div id="myChart" :style="{ width: '558px', height: '430px' }"></div>
         </el-col>
       </el-col>
     </el-row>
@@ -14,40 +14,38 @@
 </template>
 
 <script>
-import * as echarts from 'echarts/lib/echarts';
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/pie';
-import 'echarts/lib/chart/line';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
-import 'echarts/lib/component/toolbox';
-import 'echarts/lib/component/markPoint';
-import 'echarts/lib/component/tooltip';
+// 引入基本模板
+let echarts = require('echarts/lib/echarts');
+// 引入柱状图组件
+require('echarts/lib/chart/bar');
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip');
+require('echarts/lib/component/title');
+echarts = require('echarts');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: statistics } = createNamespacedHelpers('statistics');
 export default {
-  name: 'top-right',
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'achieveCom',
   props: {},
   components: {},
-  data: () => {
-    return {
-      myChart: null,
-      loading: true,
-      data: [],
-    };
+  data: function() {
+    return {};
   },
-  created() {
-    this.init();
+  created() {},
+  mounted() {
+    this.drawLine();
   },
   methods: {
     ...statistics(['query']),
-    async init() {
+    async drawLine() {
       let res = await this.query('patent');
       if (this.$checkRes(res)) {
         let viewData = res.data.map(i => i.name);
-        console.log(viewData);
-        this.myChart = echarts.init(document.getElementById('patentData'));
-        const option = {
+        let myChart = echarts.init(document.getElementById('myChart'));
+        myChart.setOption({
           title: {},
           tooltip: { trigger: 'axis' },
           grid: {
@@ -95,21 +93,14 @@ export default {
               data: res.data,
             },
           ],
-        };
-        this.myChart.setOption(option);
-        this.loading = false;
+        });
       }
     },
   },
   computed: {
-    ...mapState(['top-right']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
+    ...mapState(['user']),
   },
+  watch: {},
 };
 </script>
 

src/views/dynamic/parts/achieveCom.vue

@@ -1,12 +1,12 @@
 <template>
-  <div id="achieveCom">
+  <div id="top-right">
     <el-row>
-      <el-col :span="24" class="main">
+      <el-col :span="24" class="main" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
         <el-col :span="24" class="one">
           e专利
         </el-col>
         <el-col :span="24" class="two">
-          <div id="myChart" :style="{ width: '558px', height: '430px' }"></div>
+          <div id="patentData" class="style"></div>
         </el-col>
       </el-col>
     </el-row>
@@ -25,27 +25,28 @@ echarts = require('echarts');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: statistics } = createNamespacedHelpers('statistics');
 export default {
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  name: 'achieveCom',
+  name: 'top-right',
   props: {},
   components: {},
-  data: function() {
-    return {};
+  data: () => {
+    return {
+      myChart: null,
+      loading: true,
+      data: [],
+    };
   },
-  created() {},
-  mounted() {
-    this.drawLine();
+  created() {
+    this.init();
   },
   methods: {
     ...statistics(['query']),
-    async drawLine() {
+    async init() {
       let res = await this.query('patent');
       if (this.$checkRes(res)) {
         let viewData = res.data.map(i => i.name);
-        let myChart = echarts.init(document.getElementById('myChart'));
-        myChart.setOption({
+        console.log(viewData);
+        this.myChart = echarts.init(document.getElementById('patentData'));
+        const option = {
           title: {},
           tooltip: { trigger: 'axis' },
           grid: {
@@ -93,14 +94,21 @@ export default {
               data: res.data,
             },
           ],
-        });
+        };
+        this.myChart.setOption(option);
+        this.loading = false;
       }
     },
   },
   computed: {
-    ...mapState(['user']),
+    ...mapState(['top-right']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
   },
-  watch: {},
 };
 </script>