1

src/views/dynamic/index.vue

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

src/views/dynamic/parts/four.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="four">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="title"> 技术成果 </el-col>
+        <el-col :span="24" class="canvas">
+          <div id="fourChart" style="height: 420px"></div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'four',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  mounted() {
+    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)',
+              },
+            },
+          },
+        ],
+      };
+
+      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>
+.main {
+  .title {
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 15px 0;
+  }
+}
+</style>

src/views/dynamic/parts/one.vue

@@ -2,7 +2,10 @@
   <div id="one">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="chartPie" style="height: 450px"></div>
+        <el-col :span="24" class="title"> 技术成果 </el-col>
+        <el-col :span="24" class="canvas">
+          <div id="oneChart" style="height: 420px"></div>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -24,7 +27,7 @@ export default {
   },
   methods: {
     init() {
-      var chartDom = document.getElementById('chartPie');
+      var chartDom = document.getElementById('oneChart');
       var myChart = echarts.init(chartDom);
       var option;
       option = {
@@ -44,7 +47,7 @@ export default {
           {
             name: '饼状图',
             type: 'pie',
-            radius: '70%',
+            radius: '60%',
             center: ['50%', '50%'],
             roseType: 'area',
             itemStyle: {
@@ -83,4 +86,13 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .title {
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 15px 0;
+  }
+}
+</style>

src/views/dynamic/parts/thr.vue

@@ -0,0 +1,105 @@
+<template>
+  <div id="thr">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="title"> 用户 </el-col>
+        <el-col :span="24" class="canvas">
+          <div id="thrChart" style="height: 420px"></div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'thr',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      var chartDom = document.getElementById('thrChart');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          top: '5%',
+          left: 'center',
+        },
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '40',
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: '搜索引擎' },
+              { value: 735, name: '直接访问' },
+              { value: 580, name: '邮件营销' },
+              { value: 484, name: '联盟广告' },
+              { value: 300, name: '视频广告' },
+            ],
+          },
+        ],
+      };
+
+      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>
+.main {
+  .title {
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 15px 0;
+  }
+}
+</style>

src/views/dynamic/parts/two.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="two">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="title"> e专利 </el-col>
+        <el-col :span="24" class="canvas">
+          <div id="twoChart" style="height: 420px"></div>
+        </el-col>
+      </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('twoChart');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)',
+            },
+          },
+        ],
+      };
+      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>
+.main {
+  .title {
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 15px 0;
+  }
+}
+</style>