From fd10db666ce7c3f9ecec6d08d2e26f6b0b6fa9f1 Mon Sep 17 00:00:00 2001
From: chuzhixin <1204505056@qq.com>
Date: Mon, 7 Dec 2020 10:04:15 +0800
Subject: [PATCH] 🚀 feat: Complete the home page reconstruction according to echarts 5.0
---
mock/controller/changeLog.js | 8 ++++++++
mock/controller/router.js | 7 -------
package.json | 14 +++++++-------
src/plugins/echarts.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++-------
src/plugins/echarts/theme/vab-echarts-theme.json | 317 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/plugins/vab-echarts-theme.json | 452 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/router/index.js | 7 -------
src/views/index/index.vue | 83 ++++++++++++++++++++---------------------------------------------------------------
src/views/vab/echarts/index.vue | 652 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
9 files changed, 405 insertions(+), 1195 deletions(-)
create mode 100644 src/plugins/echarts/theme/vab-echarts-theme.json
delete mode 100644 src/plugins/vab-echarts-theme.json
delete mode 100644 src/views/vab/echarts/index.vue
diff --git a/mock/controller/changeLog.js b/mock/controller/changeLog.js
index 5511686..7032b42 100644
--- a/mock/controller/changeLog.js
+++ b/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 = [
diff --git a/mock/controller/router.js b/mock/controller/router.js
index 8561956..08ee905 100644
--- a/mock/controller/router.js
+++ b/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',
diff --git a/package.json b/package.json
index 0111ef6..0b266ef 100644
--- a/package.json
+++ b/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",
diff --git a/src/plugins/echarts.js b/src/plugins/echarts.js
index ee025ae..79e00e7 100644
--- a/src/plugins/echarts.js
+++ b/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
diff --git a/src/plugins/echarts/theme/vab-echarts-theme.json b/src/plugins/echarts/theme/vab-echarts-theme.json
new file mode 100644
index 0000000..199c109
--- /dev/null
+++ b/src/plugins/echarts/theme/vab-echarts-theme.json
@@ -0,0 +1,317 @@
+{
+ "color": ["#1890FF", "#36CBCB", "#4ECB73", "#FBD437", "#F2637B", "#975FE5"],
+ "backgroundColor": "rgba(252,252,252,0)",
+ "textStyle": {},
+ "title": {
+ "textStyle": {
+ "color": "#666666"
+ },
+ "subtextStyle": {
+ "color": "#999999"
+ }
+ },
+ "line": {
+ "itemStyle": {
+ "borderWidth": "2"
+ },
+ "lineStyle": {
+ "normal": {
+ "width": "3"
+ }
+ },
+ "symbolSize": "8",
+ "symbol": "emptyCircle",
+ "smooth": false
+ },
+ "radar": {
+ "itemStyle": {
+ "borderWidth": "2"
+ },
+ "lineStyle": {
+ "normal": {
+ "width": "3"
+ }
+ },
+ "symbolSize": "8",
+ "symbol": "emptyCircle",
+ "smooth": false
+ },
+ "bar": {
+ "itemStyle": {
+ "barBorderWidth": 0,
+ "barBorderColor": "#ccc"
+ }
+ },
+ "pie": {
+ "itemStyle": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ },
+ "scatter": {
+ "itemStyle": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ },
+ "boxplot": {
+ "itemStyle": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ },
+ "parallel": {
+ "itemStyle": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ },
+ "sankey": {
+ "itemStyle": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ },
+ "funnel": {
+ "itemStyle": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ },
+ "gauge": {
+ "itemStyle": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ },
+ "candlestick": {
+ "itemStyle": {
+ "color": "#e6a0d2",
+ "color0": "transparent",
+ "borderColor": "#e6a0d2",
+ "borderColor0": "#1890FF",
+ "borderWidth": "2"
+ }
+ },
+ "graph": {
+ "itemStyle": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ },
+ "lineStyle": {
+ "normal": {
+ "width": "1",
+ "color": "#cccccc"
+ }
+ },
+ "symbolSize": "8",
+ "symbol": "emptyCircle",
+ "smooth": false,
+ "color": ["#1890FF", "#36CBCB", "#4ECB73", "#FBD437", "#F2637B", "#975FE5"],
+ "label": {
+ "color": "#ffffff"
+ }
+ },
+ "map": {
+ "itemStyle": {
+ "areaColor": "#eeeeee",
+ "borderColor": "#aaaaaa",
+ "borderWidth": 0.5
+ },
+ "label": {
+ "color": "#ffffff"
+ }
+ },
+ "geo": {
+ "itemStyle": {
+ "areaColor": "#eeeeee",
+ "borderColor": "#aaaaaa",
+ "borderWidth": 0.5
+ },
+ "label": {
+ "color": "#ffffff"
+ }
+ },
+ "categoryAxis": {
+ "axisLine": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisTick": {
+ "show": false,
+ "lineStyle": {
+ "color": "#333"
+ }
+ },
+ "axisLabel": {
+ "show": true,
+ "color": "#999999"
+ },
+ "splitLine": {
+ "show": true,
+ "lineStyle": {
+ "color": ["#eeeeee"]
+ }
+ },
+ "splitArea": {
+ "show": false,
+ "areaStyle": {
+ "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+ }
+ }
+ },
+ "valueAxis": {
+ "axisLine": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisTick": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisLabel": {
+ "show": true,
+ "color": "#999999"
+ },
+ "splitLine": {
+ "show": true,
+ "lineStyle": {
+ "color": ["#eeeeee"]
+ }
+ },
+ "splitArea": {
+ "show": false,
+ "areaStyle": {
+ "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+ }
+ }
+ },
+ "logAxis": {
+ "axisLine": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisTick": {
+ "show": false,
+ "lineStyle": {
+ "color": "#333"
+ }
+ },
+ "axisLabel": {
+ "show": true,
+ "color": "#999999"
+ },
+ "splitLine": {
+ "show": true,
+ "lineStyle": {
+ "color": ["#eeeeee"]
+ }
+ },
+ "splitArea": {
+ "show": false,
+ "areaStyle": {
+ "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+ }
+ }
+ },
+ "timeAxis": {
+ "axisLine": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisTick": {
+ "show": false,
+ "lineStyle": {
+ "color": "#333"
+ }
+ },
+ "axisLabel": {
+ "show": true,
+ "color": "#999999"
+ },
+ "splitLine": {
+ "show": true,
+ "lineStyle": {
+ "color": ["#eeeeee"]
+ }
+ },
+ "splitArea": {
+ "show": false,
+ "areaStyle": {
+ "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+ }
+ }
+ },
+ "toolbox": {
+ "iconStyle": {
+ "borderColor": "#999999"
+ }
+ },
+ "legend": {
+ "textStyle": {
+ "color": "#999999"
+ }
+ },
+ "tooltip": {
+ "axisPointer": {
+ "lineStyle": {
+ "color": "#ffffff",
+ "width": 1
+ },
+ "crossStyle": {
+ "color": "#ffffff",
+ "width": 1
+ }
+ }
+ },
+ "timeline": {
+ "lineStyle": {
+ "color": "#4ECB73",
+ "width": 1
+ },
+ "itemStyle": {
+ "color": "#4ECB73",
+ "borderWidth": 1
+ },
+ "controlStyle": {
+ "color": "#4ECB73",
+ "borderColor": "#4ECB73",
+ "borderWidth": 0.5
+ },
+ "checkpointStyle": {
+ "color": "#1890FF",
+ "borderColor": "rgba(63,177,227,0.15)"
+ },
+ "label": {
+ "color": "#4ECB73"
+ }
+ },
+ "visualMap": {
+ "color": ["#1890FF", "#afe8ff"]
+ },
+ "dataZoom": {
+ "backgroundColor": "rgba(255,255,255,0)",
+ "dataBackgroundColor": "rgba(222,222,222,1)",
+ "fillerColor": "rgba(114,230,212,0.25)",
+ "handleColor": "#cccccc",
+ "handleSize": "100%",
+ "textStyle": {
+ "color": "#999999"
+ }
+ },
+ "markPoint": {
+ "label": {
+ "color": "#ffffff"
+ }
+ }
+}
diff --git a/src/plugins/vab-echarts-theme.json b/src/plugins/vab-echarts-theme.json
deleted file mode 100644
index 4005617..0000000
--- a/src/plugins/vab-echarts-theme.json
+++ /dev/null
@@ -1,452 +0,0 @@
-{
- "color": ["#1890FF", "#36CBCB", "#4ECB73"],
- "backgroundColor": "rgba(252,252,252,0)",
- "textStyle": {},
- "title": {
- "textStyle": {
- "color": "#666666"
- },
- "subtextStyle": {
- "color": "#999999"
- }
- },
- "line": {
- "itemStyle": {
- "normal": {
- "borderWidth": "2"
- }
- },
- "lineStyle": {
- "normal": {
- "width": "3"
- }
- },
- "symbolSize": "8",
- "symbol": "emptyCircle",
- "smooth": false
- },
- "radar": {
- "itemStyle": {
- "normal": {
- "borderWidth": "2"
- }
- },
- "lineStyle": {
- "normal": {
- "width": "3"
- }
- },
- "symbolSize": "8",
- "symbol": "emptyCircle",
- "smooth": false
- },
- "bar": {
- "itemStyle": {
- "normal": {
- "barBorderWidth": 0,
- "barBorderColor": "#ccc"
- },
- "emphasis": {
- "barBorderWidth": 0,
- "barBorderColor": "#ccc"
- }
- }
- },
- "pie": {
- "itemStyle": {
- "normal": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- },
- "emphasis": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- }
- }
- },
- "scatter": {
- "itemStyle": {
- "normal": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- },
- "emphasis": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- }
- }
- },
- "boxplot": {
- "itemStyle": {
- "normal": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- },
- "emphasis": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- }
- }
- },
- "parallel": {
- "itemStyle": {
- "normal": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- },
- "emphasis": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- }
- }
- },
- "sankey": {
- "itemStyle": {
- "normal": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- },
- "emphasis": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- }
- }
- },
- "funnel": {
- "itemStyle": {
- "normal": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- },
- "emphasis": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- }
- }
- },
- "gauge": {
- "itemStyle": {
- "normal": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- },
- "emphasis": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- }
- }
- },
- "candlestick": {
- "itemStyle": {
- "normal": {
- "color": "#e6a0d2",
- "color0": "transparent",
- "borderColor": "#e6a0d2",
- "borderColor0": "#1890FF",
- "borderWidth": "2"
- }
- }
- },
- "graph": {
- "itemStyle": {
- "normal": {
- "borderWidth": 0,
- "borderColor": "#ccc"
- }
- },
- "lineStyle": {
- "normal": {
- "width": "1",
- "color": "#cccccc"
- }
- },
- "symbolSize": "8",
- "symbol": "emptyCircle",
- "smooth": false,
- "color": ["#1890FF", "#36CBCB", "#4ECB73", "#FBD437", "#F2637B", "#975FE5"],
- "label": {
- "normal": {
- "textStyle": {
- "color": "#ffffff"
- }
- }
- }
- },
- "map": {
- "itemStyle": {
- "normal": {
- "areaColor": "#eeeeee",
- "borderColor": "#aaaaaa",
- "borderWidth": 0.5
- },
- "emphasis": {
- "areaColor": "rgba(63,177,227,0.25)",
- "borderColor": "#1890FF",
- "borderWidth": 1
- }
- },
- "label": {
- "normal": {
- "textStyle": {
- "color": "#ffffff"
- }
- },
- "emphasis": {
- "textStyle": {
- "color": "#1890FF"
- }
- }
- }
- },
- "geo": {
- "itemStyle": {
- "normal": {
- "areaColor": "#eeeeee",
- "borderColor": "#aaaaaa",
- "borderWidth": 0.5
- },
- "emphasis": {
- "areaColor": "rgba(63,177,227,0.25)",
- "borderColor": "#1890FF",
- "borderWidth": 1
- }
- },
- "label": {
- "normal": {
- "textStyle": {
- "color": "#ffffff"
- }
- },
- "emphasis": {
- "textStyle": {
- "color": "#1890FF"
- }
- }
- }
- },
- "categoryAxis": {
- "axisLine": {
- "show": true,
- "lineStyle": {
- "color": "#cccccc"
- }
- },
- "axisTick": {
- "show": false,
- "lineStyle": {
- "color": "#333"
- }
- },
- "axisLabel": {
- "show": true,
- "textStyle": {
- "color": "#999999"
- }
- },
- "splitLine": {
- "show": true,
- "lineStyle": {
- "color": ["#eeeeee"]
- }
- },
- "splitArea": {
- "show": false,
- "areaStyle": {
- "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
- }
- }
- },
- "valueAxis": {
- "axisLine": {
- "show": true,
- "lineStyle": {
- "color": "#cccccc"
- }
- },
- "axisTick": {
- "show": true,
- "lineStyle": {
- "color": "#cccccc"
- }
- },
- "axisLabel": {
- "show": true,
- "textStyle": {
- "color": "#999999"
- }
- },
- "splitLine": {
- "show": true,
- "lineStyle": {
- "color": ["#eeeeee"]
- }
- },
- "splitArea": {
- "show": false,
- "areaStyle": {
- "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
- }
- }
- },
- "logAxis": {
- "axisLine": {
- "show": true,
- "lineStyle": {
- "color": "#cccccc"
- }
- },
- "axisTick": {
- "show": false,
- "lineStyle": {
- "color": "#333"
- }
- },
- "axisLabel": {
- "show": true,
- "textStyle": {
- "color": "#999999"
- }
- },
- "splitLine": {
- "show": true,
- "lineStyle": {
- "color": ["#eeeeee"]
- }
- },
- "splitArea": {
- "show": false,
- "areaStyle": {
- "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
- }
- }
- },
- "timeAxis": {
- "axisLine": {
- "show": true,
- "lineStyle": {
- "color": "#cccccc"
- }
- },
- "axisTick": {
- "show": false,
- "lineStyle": {
- "color": "#333"
- }
- },
- "axisLabel": {
- "show": true,
- "textStyle": {
- "color": "#999999"
- }
- },
- "splitLine": {
- "show": true,
- "lineStyle": {
- "color": ["#eeeeee"]
- }
- },
- "splitArea": {
- "show": false,
- "areaStyle": {
- "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
- }
- }
- },
- "toolbox": {
- "iconStyle": {
- "normal": {
- "borderColor": "#999999"
- },
- "emphasis": {
- "borderColor": "#666666"
- }
- }
- },
- "legend": {
- "textStyle": {
- "color": "#999999"
- }
- },
- "tooltip": {
- "axisPointer": {
- "lineStyle": {
- "color": "#ffffff",
- "width": 1
- },
- "crossStyle": {
- "color": "#ffffff",
- "width": 1
- }
- }
- },
- "timeline": {
- "lineStyle": {
- "color": "#4ECB73",
- "width": 1
- },
- "itemStyle": {
- "normal": {
- "color": "#4ECB73",
- "borderWidth": 1
- },
- "emphasis": {
- "color": "#4ECB73"
- }
- },
- "controlStyle": {
- "normal": {
- "color": "#4ECB73",
- "borderColor": "#4ECB73",
- "borderWidth": 0.5
- },
- "emphasis": {
- "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"
- }
- }
- }
- },
- "visualMap": {
- "color": ["#1890FF", "#afe8ff"]
- },
- "dataZoom": {
- "backgroundColor": "rgba(255,255,255,0)",
- "dataBackgroundColor": "rgba(222,222,222,1)",
- "fillerColor": "rgba(114,230,212,0.25)",
- "handleColor": "#cccccc",
- "handleSize": "100%",
- "textStyle": {
- "color": "#999999"
- }
- },
- "markPoint": {
- "label": {
- "normal": {
- "textStyle": {
- "color": "#ffffff"
- }
- },
- "emphasis": {
- "textStyle": {
- "color": "#ffffff"
- }
- }
- }
- }
-}
diff --git a/src/router/index.js b/src/router/index.js
index 8d4c321..e89c45c 100644
--- a/src/router/index.js
+++ b/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'),
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index e3c095b..27971d2 100644
--- a/src/views/index/index.vue
+++ b/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;
diff --git a/src/views/vab/echarts/index.vue b/src/views/vab/echarts/index.vue
deleted file mode 100644
index f4741f3..0000000
--- a/src/views/vab/echarts/index.vue
+++ /dev/null
@@ -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>
--
libgit2 0.26.0