1

package-lock.json

@@ -4605,6 +4605,22 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "echarts": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.0.tgz",
+      "integrity": "sha512-/X2nnN5BXW2tuA/Hv9YY279rDfwcXaBAjK9Azi//llshbKyUXXxBknsug21GJRpwTmLZbE8rjjbhchdm01bZtw==",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12387,6 +12403,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.0.tgz",
+      "integrity": "sha512-c+8VRx52ycbmqwHeHLlo/BAfIHBl/JZNLM6cfDQFgzIH05yb+f5J9F/fbRsP+zGc8dW9XHuhdt8/iqukgMZSeg==",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
     }
   }
 }

package.json

@@ -11,6 +11,7 @@
     "@stomp/stompjs": "^6.1.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.1.0",
     "element-ui": "^2.15.1",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.21",

src/views/dynamic/index.vue

@@ -4,7 +4,9 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="24" class="common one">
-            <el-col :span="12" class="left"> 左侧 </el-col>
+            <el-col :span="12" class="left">
+              <one></one>
+            </el-col>
             <el-col :span="12" class="left"> 右侧 </el-col>
           </el-col>
           <el-col :span="24" class="common two">
@@ -18,11 +20,14 @@
 </template>
 
 <script>
+import one from './parts/one.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    one,
+  },
   data: function () {
     return {};
   },

src/views/dynamic/parts/one.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="one">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="chartPie" style="height: 450px"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'one',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      var chartDom = document.getElementById('chartPie');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        legend: {
+          top: 'bottom',
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: '饼状图',
+            type: 'pie',
+            radius: '70%',
+            center: ['50%', '50%'],
+            roseType: 'area',
+            itemStyle: {
+              borderRadius: 8,
+            },
+            data: [
+              { value: 40, name: 'rose 1' },
+              { value: 38, name: 'rose 2' },
+              { value: 32, name: 'rose 3' },
+              { value: 30, name: 'rose 4' },
+              { value: 28, name: 'rose 5' },
+              { value: 26, name: 'rose 6' },
+              { value: 22, name: 'rose 7' },
+              { value: 18, name: 'rose 8' },
+            ],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>