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 @@ -176,13 +176,6 @@ const data = [ component: '@/views/vab/magnifier/index', meta: { title: '放大镜', permissions: ['admin'] }, }, - { - path: 'echarts', - name: 'Echarts', - component: '@/views/vab/echarts/index', - meta: { title: '图表', permissions: ['admin'] }, - }, - { path: 'loading', name: 'Loading', 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/vab-echarts-theme.json b/src/plugins/echarts/theme/vab-echarts-theme.json similarity index 53% rename from src/plugins/vab-echarts-theme.json rename to src/plugins/echarts/theme/vab-echarts-theme.json index 4005617..199c109 100644 --- a/src/plugins/vab-echarts-theme.json +++ b/src/plugins/echarts/theme/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" } } } 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 @@ -208,13 +208,6 @@ export const asyncRoutes = [ component: () => import('@/views/vab/magnifier/index'), meta: { title: '放大镜', permissions: ['admin'] }, }, - { - path: 'echarts', - name: 'Echarts', - component: () => import('@/views/vab/echarts/index'), - meta: { title: '图表', permissions: ['admin'] }, - }, - { path: 'loading', name: 'Loading', 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 @@ - - -
- 词云 -
- -
- - 词云数量: - - -
- - - - -
- GDP分布图 -
- - -
@@ -213,26 +173,7 @@ - - - -
- 更新日志 -
- - - {{ activity.content }} - - - - -
其他信息 @@ -254,6 +195,24 @@
+ + + +
+ 更新日志 +
+ + + {{ activity.content }} + + + +
@@ -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 @@ - - - - -