🚀 feat: Complete the home page reconstruction according to echarts 5.0

mock/controller/changeLog.js

@@ -211,6 +211,14 @@ const data = [
     content: '遮罩添加高斯模糊',
     timestamp: '2020-10-25',
   },
+  {
+    content: 'vue3.0 + element-plus版本正式上线',
+    timestamp: '2020-12-5',
+  },
+  {
+    content: '完成首页重构，根据echarts 5.0',
+    timestamp: '2020-12-7',
+  },
 ]
 
 module.exports = [

mock/controller/router.js

@@ -177,13 +177,6 @@ const data = [
         meta: { title: '放大镜', permissions: ['admin'] },
       },
       {
-        path: 'echarts',
-        name: 'Echarts',
-        component: '@/views/vab/echarts/index',
-        meta: { title: '图表', permissions: ['admin'] },
-      },
-
-      {
         path: 'loading',
         name: 'Loading',
         component: '@/views/vab/loading/index',

package.json

@@ -41,9 +41,9 @@
   "dependencies": {
     "axios": "^0.21.0",
     "clipboard": "^2.0.6",
-    "core-js": "^3.8.0",
-    "dayjs": "^1.9.6",
-    "echarts": "^4.9.0",
+    "core-js": "^3.8.1",
+    "dayjs": "^1.9.7",
+    "echarts": "^5.0.0",
     "echarts-wordcloud": "^1.1.3",
     "element-ui": "^2.14.1",
     "jsencrypt": "^3.0.0-rc.1",
@@ -61,7 +61,7 @@
     "vuex": "^3.6.0",
     "zx-comparison": "^1.0.3",
     "zx-count": "^0.3.7",
-    "zx-layouts": "^0.6.21",
+    "zx-layouts": "^0.6.23",
     "zx-magnifie": "^0.4.0",
     "zx-markdown-editor": "^0.0.2",
     "zx-player": "^1.0.2",
@@ -78,15 +78,15 @@
     "body-parser": "^1.19.0",
     "chalk": "^4.1.0",
     "chokidar": "^3.4.3",
-    "eslint": "^7.14.0",
+    "eslint": "^7.15.0",
     "eslint-plugin-prettier": "^3.2.0",
     "eslint-plugin-vue": "^7.2.0",
     "filemanager-webpack-plugin": "^2.0.5",
     "image-webpack-loader": "^7.0.1",
-    "lint-staged": "^10.5.2",
+    "lint-staged": "^10.5.3",
     "plop": "^2.7.4",
     "prettier": "^2.2.1",
-    "sass": "^1.29.0",
+    "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
     "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",

src/plugins/echarts.js

@@ -1,11 +1,57 @@
-import 'echarts'
-import 'echarts/map/js/china'
-import 'echarts/map/js/world'
-
-import 'echarts-wordcloud'
-
+import 'echarts/lib/component/dataset'
+import 'echarts/lib/component/transform'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/chart/scatter'
+import 'echarts/lib/chart/radar'
+import 'echarts/lib/chart/map'
+import 'echarts/lib/chart/tree'
+import 'echarts/lib/chart/treemap'
+import 'echarts/lib/chart/graph'
+import 'echarts/lib/chart/gauge'
+import 'echarts/lib/chart/funnel'
+import 'echarts/lib/chart/parallel'
+import 'echarts/lib/chart/sankey'
+import 'echarts/lib/chart/boxplot'
+import 'echarts/lib/chart/candlestick'
+import 'echarts/lib/chart/effectScatter'
+import 'echarts/lib/chart/lines'
+import 'echarts/lib/chart/heatmap'
+import 'echarts/lib/chart/pictorialBar'
+import 'echarts/lib/chart/themeRiver'
+import 'echarts/lib/chart/sunburst'
+import 'echarts/lib/chart/custom'
+import 'echarts/lib/component/grid'
+import 'echarts/lib/component/polar'
+import 'echarts/lib/component/geo'
+import 'echarts/lib/component/singleAxis'
+import 'echarts/lib/component/parallel'
+import 'echarts/lib/component/calendar'
+import 'echarts/lib/component/graphic'
+import 'echarts/lib/component/toolbox'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/axisPointer'
+import 'echarts/lib/component/brush'
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/timeline'
+import 'echarts/lib/component/markPoint'
+import 'echarts/lib/component/markLine'
+import 'echarts/lib/component/markArea'
+import 'echarts/lib/component/legendScroll'
+import 'echarts/lib/component/legend'
+import 'echarts/lib/component/dataZoom'
+import 'echarts/lib/component/dataZoomInside'
+import 'echarts/lib/component/dataZoomSlider'
+import 'echarts/lib/component/visualMap'
+import 'echarts/lib/component/visualMapContinuous'
+import 'echarts/lib/component/visualMapPiecewise'
+import 'echarts/lib/component/aria'
+import * as echarts from 'echarts'
+import 'zrender/lib/svg/svg'
 import VabChart from 'vue-echarts'
-import theme from './vab-echarts-theme.json'
+import theme from './echarts/theme/vab-echarts-theme.json'
 
 VabChart.registerTheme('vab-echarts-theme', theme)
+VabChart.graphic = echarts.graphic
 export default VabChart

src/plugins/vab-echarts-theme.json

@@ -1,5 +1,5 @@
 {
-  "color": ["#1890FF", "#36CBCB", "#4ECB73"],
+  "color": ["#1890FF", "#36CBCB", "#4ECB73", "#FBD437", "#F2637B", "#975FE5"],
   "backgroundColor": "rgba(252,252,252,0)",
   "textStyle": {},
   "title": {
@@ -12,9 +12,7 @@
   },
   "line": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": "2"
-      }
+      "borderWidth": "2"
     },
     "lineStyle": {
       "normal": {
@@ -27,9 +25,7 @@
   },
   "radar": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": "2"
-      }
+      "borderWidth": "2"
     },
     "lineStyle": {
       "normal": {
@@ -42,117 +38,65 @@
   },
   "bar": {
     "itemStyle": {
-      "normal": {
-        "barBorderWidth": 0,
-        "barBorderColor": "#ccc"
-      },
-      "emphasis": {
-        "barBorderWidth": 0,
-        "barBorderColor": "#ccc"
-      }
+      "barBorderWidth": 0,
+      "barBorderColor": "#ccc"
     }
   },
   "pie": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
+      "borderWidth": 0,
+      "borderColor": "#ccc"
     }
   },
   "scatter": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
+      "borderWidth": 0,
+      "borderColor": "#ccc"
     }
   },
   "boxplot": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
+      "borderWidth": 0,
+      "borderColor": "#ccc"
     }
   },
   "parallel": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
+      "borderWidth": 0,
+      "borderColor": "#ccc"
     }
   },
   "sankey": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
+      "borderWidth": 0,
+      "borderColor": "#ccc"
     }
   },
   "funnel": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
+      "borderWidth": 0,
+      "borderColor": "#ccc"
     }
   },
   "gauge": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
+      "borderWidth": 0,
+      "borderColor": "#ccc"
     }
   },
   "candlestick": {
     "itemStyle": {
-      "normal": {
-        "color": "#e6a0d2",
-        "color0": "transparent",
-        "borderColor": "#e6a0d2",
-        "borderColor0": "#1890FF",
-        "borderWidth": "2"
-      }
+      "color": "#e6a0d2",
+      "color0": "transparent",
+      "borderColor": "#e6a0d2",
+      "borderColor0": "#1890FF",
+      "borderWidth": "2"
     }
   },
   "graph": {
     "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
+      "borderWidth": 0,
+      "borderColor": "#ccc"
     },
     "lineStyle": {
       "normal": {
@@ -165,63 +109,27 @@
     "smooth": false,
     "color": ["#1890FF", "#36CBCB", "#4ECB73", "#FBD437", "#F2637B", "#975FE5"],
     "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#ffffff"
-        }
-      }
+      "color": "#ffffff"
     }
   },
   "map": {
     "itemStyle": {
-      "normal": {
-        "areaColor": "#eeeeee",
-        "borderColor": "#aaaaaa",
-        "borderWidth": 0.5
-      },
-      "emphasis": {
-        "areaColor": "rgba(63,177,227,0.25)",
-        "borderColor": "#1890FF",
-        "borderWidth": 1
-      }
+      "areaColor": "#eeeeee",
+      "borderColor": "#aaaaaa",
+      "borderWidth": 0.5
     },
     "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#ffffff"
-        }
-      },
-      "emphasis": {
-        "textStyle": {
-          "color": "#1890FF"
-        }
-      }
+      "color": "#ffffff"
     }
   },
   "geo": {
     "itemStyle": {
-      "normal": {
-        "areaColor": "#eeeeee",
-        "borderColor": "#aaaaaa",
-        "borderWidth": 0.5
-      },
-      "emphasis": {
-        "areaColor": "rgba(63,177,227,0.25)",
-        "borderColor": "#1890FF",
-        "borderWidth": 1
-      }
+      "areaColor": "#eeeeee",
+      "borderColor": "#aaaaaa",
+      "borderWidth": 0.5
     },
     "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#ffffff"
-        }
-      },
-      "emphasis": {
-        "textStyle": {
-          "color": "#1890FF"
-        }
-      }
+      "color": "#ffffff"
     }
   },
   "categoryAxis": {
@@ -239,9 +147,7 @@
     },
     "axisLabel": {
       "show": true,
-      "textStyle": {
-        "color": "#999999"
-      }
+      "color": "#999999"
     },
     "splitLine": {
       "show": true,
@@ -271,9 +177,7 @@
     },
     "axisLabel": {
       "show": true,
-      "textStyle": {
-        "color": "#999999"
-      }
+      "color": "#999999"
     },
     "splitLine": {
       "show": true,
@@ -303,9 +207,7 @@
     },
     "axisLabel": {
       "show": true,
-      "textStyle": {
-        "color": "#999999"
-      }
+      "color": "#999999"
     },
     "splitLine": {
       "show": true,
@@ -335,9 +237,7 @@
     },
     "axisLabel": {
       "show": true,
-      "textStyle": {
-        "color": "#999999"
-      }
+      "color": "#999999"
     },
     "splitLine": {
       "show": true,
@@ -354,12 +254,7 @@
   },
   "toolbox": {
     "iconStyle": {
-      "normal": {
-        "borderColor": "#999999"
-      },
-      "emphasis": {
-        "borderColor": "#666666"
-      }
+      "borderColor": "#999999"
     }
   },
   "legend": {
@@ -385,41 +280,20 @@
       "width": 1
     },
     "itemStyle": {
-      "normal": {
-        "color": "#4ECB73",
-        "borderWidth": 1
-      },
-      "emphasis": {
-        "color": "#4ECB73"
-      }
+      "color": "#4ECB73",
+      "borderWidth": 1
     },
     "controlStyle": {
-      "normal": {
-        "color": "#4ECB73",
-        "borderColor": "#4ECB73",
-        "borderWidth": 0.5
-      },
-      "emphasis": {
-        "color": "#4ECB73",
-        "borderColor": "#4ECB73",
-        "borderWidth": 0.5
-      }
+      "color": "#4ECB73",
+      "borderColor": "#4ECB73",
+      "borderWidth": 0.5
     },
     "checkpointStyle": {
       "color": "#1890FF",
       "borderColor": "rgba(63,177,227,0.15)"
     },
     "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#4ECB73"
-        }
-      },
-      "emphasis": {
-        "textStyle": {
-          "color": "#4ECB73"
-        }
-      }
+      "color": "#4ECB73"
     }
   },
   "visualMap": {
@@ -437,16 +311,7 @@
   },
   "markPoint": {
     "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#ffffff"
-        }
-      },
-      "emphasis": {
-        "textStyle": {
-          "color": "#ffffff"
-        }
-      }
+      "color": "#ffffff"
     }
   }
 }

src/router/index.js

@@ -209,13 +209,6 @@ export const asyncRoutes = [
         meta: { title: '放大镜', permissions: ['admin'] },
       },
       {
-        path: 'echarts',
-        name: 'Echarts',
-        component: () => import('@/views/vab/echarts/index'),
-        meta: { title: '图表', permissions: ['admin'] },
-      },
-
-      {
         path: 'loading',
         name: 'Loading',
         component: () => import('@/views/vab/loading/index'),

src/views/index/index.vue

@@ -72,34 +72,6 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-        <el-card shadow="never">
-          <div slot="header">
-            <span>词云</span>
-          </div>
-          <vab-chart
-            :autoresize="true"
-            theme="vab-echarts-theme"
-            :options="cy"
-            @zr:click="handleZrClick"
-            @click="handleClick"
-          />
-          <div class="bottom">
-            <span>
-              词云数量:
-              <vab-count
-                :start-val="config3.startVal"
-                :end-val="config3.endVal"
-                :duration="config3.duration"
-                :separator="config3.separator"
-                :prefix="config3.prefix"
-                :suffix="config3.suffix"
-                :decimals="config3.decimals"
-              />
-            </span>
-          </div>
-        </el-card>
-      </el-col>
 
       <el-col
         v-for="(item, index) in iconList"
@@ -121,18 +93,6 @@
         </router-link>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="24" :lg="13" :xl="13">
-        <el-card class="card" shadow="never">
-          <div slot="header">
-            <span>GDP分布图</span>
-          </div>
-          <vab-chart
-            :autoresize="true"
-            theme="vab-echarts-theme"
-            :options="zgdt"
-          />
-        </el-card>
-      </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
         <el-card class="card" shadow="never">
           <div slot="header">
@@ -213,26 +173,7 @@
             </tr>
           </table>
         </el-card>
-      </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-        <el-card class="card" shadow="never">
-          <div slot="header">
-            <span>更新日志</span>
-          </div>
-          <el-timeline :reverse="reverse">
-            <el-timeline-item
-              v-for="(activity, index) in activities"
-              :key="index"
-              :timestamp="activity.timestamp"
-              :color="activity.color"
-            >
-              {{ activity.content }}
-            </el-timeline-item>
-          </el-timeline>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-card shadow="never">
           <div slot="header">
             <span>其他信息</span>
@@ -254,6 +195,24 @@
           <br />
         </el-card>
       </el-col>
+
+      <el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13">
+        <el-card class="card" shadow="never">
+          <div slot="header">
+            <span>更新日志</span>
+          </div>
+          <el-timeline :reverse="reverse">
+            <el-timeline-item
+              v-for="(activity, index) in activities"
+              :key="index"
+              :timestamp="activity.timestamp"
+              :color="activity.color"
+            >
+              {{ activity.content }}
+            </el-timeline-item>
+          </el-timeline>
+        </el-card>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -738,14 +697,12 @@
       .el-card__body {
         .echarts {
           width: 100%;
-          height: 125px;
+          height: 115px;
         }
       }
     }
 
     .card {
-      min-height: 400px;
-
       ::v-deep {
         .el-card__body {
           .echarts {
@@ -787,7 +744,7 @@
     }
 
     .icon-panel {
-      height: 100px;
+      height: 117px;
       text-align: center;
       cursor: pointer;
 

src/views/vab/echarts/index.vue

@@ -1,652 +0,0 @@
-<template>
-  <div class="echarts-container">
-    <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-        <el-card shadow="hover">
-          <div slot="header">柱状图</div>
-          <div>
-            <vab-chart autoresize :options="chart1" />
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-        <el-card shadow="hover">
-          <div slot="header">环形图</div>
-          <div>
-            <vab-chart
-              ref="myCircle"
-              theme="vab-echarts-theme"
-              :options="chart2"
-              class="my-circle"
-            />
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-        <el-card shadow="hover">
-          <div slot="header">关系图</div>
-          <div>
-            <vab-chart
-              ref="myLine1"
-              theme="vab-echarts-theme"
-              autoresize
-              :options="chart3"
-              class="my-line1"
-            />
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-        <el-card class="card" shadow="never">
-          <div slot="header">
-            <span>中国地图</span>
-          </div>
-          <vab-chart
-            :autoresize="true"
-            theme="vab-echarts-theme"
-            :options="zgdt"
-          />
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-        <el-card class="card" shadow="never">
-          <div slot="header">
-            <span>世界地图</span>
-          </div>
-          <vab-chart
-            :autoresize="true"
-            theme="vab-echarts-theme"
-            :options="sjdt"
-          />
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-  import * as echarts from 'echarts'
-  import VabChart from '@/plugins/echarts'
-
-  export default {
-    name: 'Echarts',
-    components: {
-      VabChart,
-    },
-    data() {
-      return {
-        chart1: {
-          grid: {
-            top: '25%',
-            bottom: '10%',
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow',
-              label: {
-                show: true,
-              },
-            },
-          },
-          legend: {
-            data: ['销售水量', '主营业务'],
-          },
-          xAxis: {
-            data: [
-              '当年完成水量',
-              '去年同期水量',
-              '滚动目标值水量',
-              '全年目标值水量',
-              '当年完成金额',
-              '去年同期金额',
-              '滚动目标金额',
-              '全年目标值',
-            ],
-            axisLine: {
-              show: true, //隐藏X轴轴线
-            },
-            axisTick: {
-              show: true, //隐藏X轴刻度
-            },
-            axisLabel: {
-              show: true,
-            },
-          },
-          yAxis: [
-            {
-              type: 'value',
-              name: '亿元',
-              splitLine: {
-                show: false,
-              },
-              axisTick: {
-                show: true,
-              },
-              axisLine: {
-                show: true,
-              },
-              axisLabel: {
-                show: true,
-              },
-            },
-            {
-              type: 'value',
-              name: '同比',
-              position: 'right',
-              splitLine: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              axisLine: {
-                show: false,
-              },
-              axisLabel: {
-                show: true,
-                formatter: '{value} %', //右侧Y轴文字显示
-              },
-            },
-            {
-              type: 'value',
-              gridIndex: 0,
-              min: 50,
-              max: 100,
-              splitNumber: 8,
-              splitLine: {
-                show: false,
-              },
-              axisLine: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              axisLabel: {
-                show: false,
-              },
-              splitArea: {
-                show: true,
-                areaStyle: {
-                  color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
-                },
-              },
-            },
-          ],
-          series: [
-            {
-              name: '销售水量',
-              type: 'line',
-              smooth: true, //平滑曲线显示
-              itemStyle: {
-                color: '#058cff',
-              },
-              areaStyle: {
-                color: 'rgba(5,140,255, 0.2)',
-              },
-              data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
-            },
-            {
-              name: '主营业务',
-              type: 'bar',
-              barWidth: 15,
-              itemStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                      offset: 0,
-                      color: '#00FFE3',
-                    },
-                    {
-                      offset: 1,
-                      color: '#4693EC',
-                    },
-                  ]),
-                },
-              },
-              data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
-            },
-          ],
-        },
-        chart2: {
-          tooltip: {
-            show: true,
-            formatter: '{b} : {c}',
-          },
-
-          legend: {
-            show: true,
-            icon: 'circle',
-            top: '10%',
-            left: '10%',
-            width: 50,
-            padding: [0, 5],
-            itemGap: 25,
-            data: ['已婚已育', '已婚未育', '未婚', '学生'],
-            selectedMode: true,
-            orient: 'vertical',
-          },
-          series: [
-            {
-              name: 'Line 4',
-              type: 'pie',
-              clockWise: true,
-              hoverAnimation: false,
-              radius: ['65%', '75%'],
-
-              data: [
-                {
-                  value: 7645434,
-                  name: '已婚已育',
-                },
-                {
-                  value: 3612343,
-                  name: '总数',
-                  tooltip: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    normal: {
-                      color: 'rgba(0,0,0,0)',
-                      label: {
-                        show: false,
-                      },
-                      labelLine: {
-                        show: false,
-                      },
-                    },
-                    emphasis: {
-                      color: 'rgba(0,0,0,0)',
-                    },
-                  },
-                },
-              ],
-            },
-            {
-              name: 'Line 3',
-              type: 'pie',
-              clockWise: true,
-              radius: ['50%', '60%'],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: false,
-                  },
-                  labelLine: {
-                    show: false,
-                  },
-                  // shadowBlur: 15,
-                  // shadowColor: 'white',
-                },
-              },
-              hoverAnimation: false,
-
-              data: [
-                {
-                  value: 2632321,
-                  name: '已婚未育',
-                },
-                {
-                  value: 2212343,
-                  name: '总数',
-                  tooltip: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    normal: {
-                      color: 'rgba(0,0,0,0)',
-                      label: {
-                        show: false,
-                      },
-                      labelLine: {
-                        show: false,
-                      },
-                    },
-                    emphasis: {
-                      color: 'rgba(0,0,0,0)',
-                    },
-                  },
-                },
-              ],
-            },
-            {
-              name: 'Line 2',
-              type: 'pie',
-              clockWise: true,
-              hoverAnimation: false,
-              radius: ['35%', '45%'],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: false,
-                  },
-                  labelLine: {
-                    show: false,
-                  },
-                  // shadowBlur: 15,
-                  // shadowColor: 'white',
-                },
-              },
-
-              data: [
-                {
-                  value: 1823323,
-                  name: '未婚',
-                },
-                {
-                  value: 1812343,
-                  name: '总数',
-                  tooltip: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    normal: {
-                      color: 'rgba(0,0,0,0)',
-                      label: {
-                        show: false,
-                      },
-                      labelLine: {
-                        show: false,
-                      },
-                    },
-                    emphasis: {
-                      color: 'rgba(0,0,0,0)',
-                    },
-                  },
-                },
-              ],
-            },
-            {
-              name: 'Line 1',
-              type: 'pie',
-              clockWise: true,
-
-              radius: ['20%', '30%'],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: false,
-                  },
-                  labelLine: {
-                    show: false,
-                  },
-                  // shadowBlur: 15,
-                  // shadowColor: 'white',
-                },
-              },
-              hoverAnimation: false,
-
-              data: [
-                {
-                  value: 1342221,
-                  name: '学生',
-                },
-                {
-                  value: 1912343,
-                  name: '总数',
-                  tooltip: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    normal: {
-                      color: 'rgba(0,0,0,0)',
-                      label: {
-                        show: false,
-                      },
-                      labelLine: {
-                        show: false,
-                      },
-                    },
-                    emphasis: {
-                      color: 'rgba(0,0,0,0)',
-                    },
-                  },
-                },
-              ],
-            },
-          ],
-        },
-        chart3: {
-          series: [
-            {
-              type: 'graph',
-              layout: 'force',
-              symbolSize: 58,
-              draggable: true,
-              roam: true,
-              focusNodeAdjacency: true,
-              categories: [
-                {
-                  name: '公司',
-                  itemStyle: {
-                    color: '#006acc',
-                  },
-                },
-                {
-                  name: '董事',
-                  itemStyle: {
-                    color: '#ff7d18',
-                  },
-                },
-              ],
-              edgeSymbol: ['', 'arrow'],
-              edgeLabel: {
-                normal: {
-                  show: true,
-                  textStyle: {
-                    fontSize: 20,
-                  },
-                  formatter(x) {
-                    return x.data.name
-                  },
-                },
-              },
-              label: {
-                show: true,
-              },
-              force: {
-                repulsion: 2000,
-                edgeLength: 120,
-              },
-              data: [
-                {
-                  name: '操作系统集团',
-                },
-                {
-                  name: '浏览器有限公司',
-                },
-                {
-                  name: 'HTML科技',
-                },
-                {
-                  name: 'JavaScript科技',
-                },
-                {
-                  name: 'CSS科技',
-                },
-                {
-                  name: 'Chrome',
-                },
-                {
-                  name: 'IE',
-                },
-                {
-                  name: 'Firefox',
-                },
-                {
-                  name: 'Safari',
-                },
-              ],
-              links: [
-                {
-                  source: '浏览器有限公司',
-                  target: '操作系统集团',
-                  name: '参股',
-                },
-                {
-                  source: 'HTML科技',
-                  target: '浏览器有限公司',
-                  name: '参股',
-                },
-                {
-                  source: 'CSS科技',
-                  target: '浏览器有限公司',
-                  name: '参股',
-                },
-                {
-                  source: 'JavaScript科技',
-                  target: '浏览器有限公司',
-                  name: '参股',
-                },
-                {
-                  source: 'Chrome',
-                  target: '浏览器有限公司',
-                  name: '董事',
-                },
-                {
-                  source: 'IE',
-                  target: '浏览器有限公司',
-                  name: '董事',
-                },
-                {
-                  source: 'Firefox',
-                  target: '浏览器有限公司',
-                  name: '董事',
-                },
-                {
-                  source: 'Safari',
-                  target: '浏览器有限公司',
-                  name: '董事',
-                },
-                {
-                  source: 'Chrome',
-                  target: 'JavaScript科技',
-                  name: '法人',
-                },
-              ],
-            },
-          ],
-        },
-        //中国地图
-        zgdt: {
-          title: {
-            text: '2099年全国GDP分布',
-            subtext: '数据来自vue-admin-beautiful杜撰',
-          },
-          tooltip: {
-            trigger: 'item',
-          },
-          dataRange: {
-            orient: 'horizontal',
-            min: 0,
-            max: 55000,
-            text: ['高', '低'],
-            splitNumber: 0,
-          },
-          series: [
-            {
-              name: '2099年全国GDP分布',
-              type: 'map',
-              roam: false,
-              mapType: 'china',
-              mapLocation: {
-                x: 'center',
-              },
-              selectedMode: 'multiple',
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: false,
-                  },
-                },
-                emphasis: {
-                  label: {
-                    show: true,
-                  },
-                },
-              },
-              data: [
-                { name: '西藏', value: 605.83 },
-                { name: '青海', value: 1670.44 },
-                { name: '宁夏', value: 2102.21 },
-                { name: '海南', value: 2522.66 },
-                { name: '甘肃', value: 5020.37 },
-                { name: '贵州', value: 5701.84 },
-                { name: '新疆', value: 6610.05 },
-                { name: '云南', value: 8893.12 },
-                { name: '重庆', value: 10011.37 },
-                { name: '吉林', value: 10568.83 },
-                { name: '山西', value: 11237.55 },
-                { name: '天津', value: 11307.28 },
-                { name: '江西', value: 11702.82 },
-                { name: '广西', value: 11720.87 },
-                { name: '陕西', value: 12512.3 },
-                { name: '黑龙江', value: 12582 },
-                { name: '内蒙古', value: 14359.88 },
-                { name: '安徽', value: 15300.65 },
-                { name: '北京', value: 16251.93 },
-                { name: '福建', value: 17560.18 },
-                { name: '上海', value: 19195.69 },
-                { name: '湖北', value: 19632.26 },
-                { name: '湖南', value: 19669.56 },
-                { name: '四川', value: 21026.68 },
-                { name: '辽宁', value: 22226.7 },
-                { name: '河北', value: 24515.76 },
-                { name: '河南', value: 26931.03 },
-                { name: '浙江', value: 32318.85 },
-                { name: '山东', value: 45361.85, selected: true },
-                { name: '江苏', value: 49110.27 },
-                { name: '广东', value: 53210.28 },
-              ],
-            },
-          ],
-        },
-        //世界地图
-        sjdt: {
-          title: {
-            text: '2099年世界GDP（亿元）',
-            subtext: '数据来自vue-admin-beautiful杜撰',
-          },
-          dataRange: {
-            orient: 'horizontal',
-            min: 0,
-            max: 55000,
-            text: ['高', '低'],
-            splitNumber: 0,
-          },
-          tooltip: {
-            trigger: 'item',
-            formatter: '{b}',
-          },
-          series: [
-            {
-              name: '2099年世界GDP（亿元）',
-              type: 'map',
-              mapType: 'world',
-              selectedMode: 'multiple',
-              roam: false,
-              label: {
-                normal: {
-                  show: false,
-                },
-                emphasis: {
-                  show: true,
-                },
-              },
-              data: [{ name: 'China', value: 99999, selected: true }],
-            },
-          ],
-        },
-      }
-    },
-    mounted() {},
-    methods: {},
-  }
-</script>
-
-<style lang="scss" scoped>
-  .echarts {
-    width: 100%;
-  }
-</style>