1

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

@@ -0,0 +1,132 @@
+<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: 425px"></div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: statistics } = createNamespacedHelpers('statistics');
+
+export default {
+  name: 'one',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  mounted() {
+    this.init();
+  },
+  methods: {
+    ...statistics(['query']),
+    async init() {
+      let res = await this.query({ type: 'patent' });
+      if (this.$checkRes(res)) {
+        let viewData = res.data.map((i) => i.name);
+        var chartDom = document.getElementById('twoChart');
+        var myChart = echarts.init(chartDom);
+        const option = {
+          title: {},
+          tooltip: { trigger: 'axis' },
+          grid: {
+            y2: 140,
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: [0, 0.01],
+            name: '申请人',
+            data: viewData,
+            axisLabel: {
+              interval: 0, //横轴信息全部显示
+              rotate: -30, //-30度角倾斜显示
+            },
+            axisTick: {
+              // 坐标轴 刻度
+              show: true, // 是否显示
+              inside: true, // 是否朝内
+              length: 3, // 长度
+              lineStyle: {
+                // 默认取轴线的样式
+                color: 'red',
+                width: 1,
+                type: 'solid',
+              },
+            },
+          },
+          yAxis: {},
+          series: [
+            {
+              name: 'e专利',
+              label: {
+                show: true,
+                position: 'top',
+              },
+              type: 'bar',
+              itemStyle: {
+                normal: {
+                  color: function (params) {
+                    var colorList = [
+                      '#C1232B',
+                      '#B5C334',
+                      '#FCCE10',
+                      '#E87C25',
+                      '#27727B',
+                      '#FE8463',
+                      '#9BCA63',
+                      '#FAD860',
+                      '#F3A43B',
+                      '#60C0DD',
+                      '#778899',
+                      '#00FFFF',
+                      '#FFEFD5',
+                      '#F08080',
+                      '#DCDCDC',
+                    ];
+                    return colorList[params.dataIndex];
+                  },
+                },
+              },
+              data: res.data,
+            },
+          ],
+        };
+        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

@@ -35,68 +35,34 @@ export default {
         let viewData = res.data.map((i) => i.name);
         var chartDom = document.getElementById('twoChart');
         var myChart = echarts.init(chartDom);
-        const option = {
-          title: {},
-          tooltip: { trigger: 'axis' },
-          grid: {
-            y2: 140,
+        var option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)',
           },
-          xAxis: {
-            type: 'category',
-            boundaryGap: [0, 0.01],
-            name: '申请人',
+          legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            right: 10,
+            top: 20,
+            bottom: 20,
             data: viewData,
-            axisLabel: {
-              interval: 0, //横轴信息全部显示
-              rotate: -30, //-30度角倾斜显示
-            },
-            axisTick: {
-              // 坐标轴 刻度
-              show: true, // 是否显示
-              inside: true, // 是否朝内
-              length: 3, // 长度
-              lineStyle: {
-                // 默认取轴线的样式
-                color: 'red',
-                width: 1,
-                type: 'solid',
-              },
-            },
+            selected: res.data,
           },
-          yAxis: {},
           series: [
             {
-              name: 'e专利',
-              label: {
-                show: true,
-                position: 'top',
-              },
-              type: 'bar',
-              itemStyle: {
-                normal: {
-                  color: function (params) {
-                    var colorList = [
-                      '#C1232B',
-                      '#B5C334',
-                      '#FCCE10',
-                      '#E87C25',
-                      '#27727B',
-                      '#FE8463',
-                      '#9BCA63',
-                      '#FAD860',
-                      '#F3A43B',
-                      '#60C0DD',
-                      '#778899',
-                      '#00FFFF',
-                      '#FFEFD5',
-                      '#F08080',
-                      '#DCDCDC',
-                    ];
-                    return colorList[params.dataIndex];
-                  },
+              name: '姓名',
+              type: 'pie',
+              radius: '50%',
+              center: ['35%', '50%'],
+              data: res.data,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                 },
               },
-              data: res.data,
             },
           ],
         };