Skip to content

V
vipSupplier
Commit fd10db66 by chuzhixin
Options

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

parent 21cbc0a0
Showing with 135 additions and 273 deletions
mock/controller/changeLog.js
...@@ -211,6 +211,14 @@ const data = [ ...@@ -211,6 +211,14 @@ const data = [
content: '遮罩添加高斯模糊', content: '遮罩添加高斯模糊',
timestamp: '2020-10-25', timestamp: '2020-10-25',
}, },
{
content: 'vue3.0 + element-plus版本正式上线',
timestamp: '2020-12-5',
},
{
content: '完成首页重构，根据echarts 5.0',
timestamp: '2020-12-7',
},
] ]
module.exports = [ module.exports = [
......
mock/controller/router.js
...@@ -177,13 +177,6 @@ const data = [ ...@@ -177,13 +177,6 @@ const data = [
meta: { title: '放大镜', permissions: ['admin'] }, meta: { title: '放大镜', permissions: ['admin'] },
}, },
{ {
path: 'echarts',
name: 'Echarts',
component: '@/views/vab/echarts/index',
meta: { title: '图表', permissions: ['admin'] },
},
{
path: 'loading', path: 'loading',
name: 'Loading', name: 'Loading',
component: '@/views/vab/loading/index', component: '@/views/vab/loading/index',
......
package.json
...@@ -41,9 +41,9 @@ ...@@ -41,9 +41,9 @@
"dependencies": { "dependencies": {
"axios": "^0.21.0", "axios": "^0.21.0",
"clipboard": "^2.0.6", "clipboard": "^2.0.6",
"core-js": "^3.8.0", "core-js": "^3.8.1",
"dayjs": "^1.9.6", "dayjs": "^1.9.7",
"echarts": "^4.9.0", "echarts": "^5.0.0",
"echarts-wordcloud": "^1.1.3", "echarts-wordcloud": "^1.1.3",
"element-ui": "^2.14.1", "element-ui": "^2.14.1",
"jsencrypt": "^3.0.0-rc.1", "jsencrypt": "^3.0.0-rc.1",
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
"vuex": "^3.6.0", "vuex": "^3.6.0",
"zx-comparison": "^1.0.3", "zx-comparison": "^1.0.3",
"zx-count": "^0.3.7", "zx-count": "^0.3.7",
"zx-layouts": "^0.6.21", "zx-layouts": "^0.6.23",
"zx-magnifie": "^0.4.0", "zx-magnifie": "^0.4.0",
"zx-markdown-editor": "^0.0.2", "zx-markdown-editor": "^0.0.2",
"zx-player": "^1.0.2", "zx-player": "^1.0.2",
...@@ -78,15 +78,15 @@ ...@@ -78,15 +78,15 @@
"body-parser": "^1.19.0", "body-parser": "^1.19.0",
"chalk": "^4.1.0", "chalk": "^4.1.0",
"chokidar": "^3.4.3", "chokidar": "^3.4.3",
"eslint": "^7.14.0", "eslint": "^7.15.0",
"eslint-plugin-prettier": "^3.2.0", "eslint-plugin-prettier": "^3.2.0",
"eslint-plugin-vue": "^7.2.0", "eslint-plugin-vue": "^7.2.0",
"filemanager-webpack-plugin": "^2.0.5", "filemanager-webpack-plugin": "^2.0.5",
"image-webpack-loader": "^7.0.1", "image-webpack-loader": "^7.0.1",
"lint-staged": "^10.5.2", "lint-staged": "^10.5.3",
"plop": "^2.7.4", "plop": "^2.7.4",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"sass": "^1.29.0", "sass": "^1.30.0",
"sass-loader": "^10.1.0", "sass-loader": "^10.1.0",
"stylelint": "^13.8.0", "stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2", "stylelint-config-prettier": "^8.0.2",
......
src/plugins/echarts.js
import 'echarts' import 'echarts/lib/component/dataset'
import 'echarts/map/js/china' import 'echarts/lib/component/transform'
import 'echarts/map/js/world' import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts-wordcloud' 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 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.registerTheme('vab-echarts-theme', theme)
VabChart.graphic = echarts.graphic
export default VabChart export default VabChart
src/plugins/vab-echarts-theme.json → src/plugins/echarts/theme/vab-echarts-theme.json
{ {
"color": ["#1890FF", "#36CBCB", "#4ECB73"], "color": ["#1890FF", "#36CBCB", "#4ECB73", "#FBD437", "#F2637B", "#975FE5"],
"backgroundColor": "rgba(252,252,252,0)", "backgroundColor": "rgba(252,252,252,0)",
"textStyle": {}, "textStyle": {},
"title": { "title": {
...@@ -12,9 +12,7 @@ ...@@ -12,9 +12,7 @@
}, },
"line": { "line": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": "2"
"borderWidth": "2"
}
}, },
"lineStyle": { "lineStyle": {
"normal": { "normal": {
...@@ -27,9 +25,7 @@ ...@@ -27,9 +25,7 @@
}, },
"radar": { "radar": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": "2"
"borderWidth": "2"
}
}, },
"lineStyle": { "lineStyle": {
"normal": { "normal": {
...@@ -42,117 +38,65 @@ ...@@ -42,117 +38,65 @@
}, },
"bar": { "bar": {
"itemStyle": { "itemStyle": {
"normal": { "barBorderWidth": 0,
"barBorderWidth": 0, "barBorderColor": "#ccc"
"barBorderColor": "#ccc"
},
"emphasis": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
} }
}, },
"pie": { "pie": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": 0,
"borderWidth": 0, "borderColor": "#ccc"
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
} }
}, },
"scatter": { "scatter": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": 0,
"borderWidth": 0, "borderColor": "#ccc"
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
} }
}, },
"boxplot": { "boxplot": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": 0,
"borderWidth": 0, "borderColor": "#ccc"
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
} }
}, },
"parallel": { "parallel": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": 0,
"borderWidth": 0, "borderColor": "#ccc"
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
} }
}, },
"sankey": { "sankey": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": 0,
"borderWidth": 0, "borderColor": "#ccc"
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
} }
}, },
"funnel": { "funnel": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": 0,
"borderWidth": 0, "borderColor": "#ccc"
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
} }
}, },
"gauge": { "gauge": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": 0,
"borderWidth": 0, "borderColor": "#ccc"
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
} }
}, },
"candlestick": { "candlestick": {
"itemStyle": { "itemStyle": {
"normal": { "color": "#e6a0d2",
"color": "#e6a0d2", "color0": "transparent",
"color0": "transparent", "borderColor": "#e6a0d2",
"borderColor": "#e6a0d2", "borderColor0": "#1890FF",
"borderColor0": "#1890FF", "borderWidth": "2"
"borderWidth": "2"
}
} }
}, },
"graph": { "graph": {
"itemStyle": { "itemStyle": {
"normal": { "borderWidth": 0,
"borderWidth": 0, "borderColor": "#ccc"
"borderColor": "#ccc"
}
}, },
"lineStyle": { "lineStyle": {
"normal": { "normal": {
...@@ -165,63 +109,27 @@ ...@@ -165,63 +109,27 @@
"smooth": false, "smooth": false,
"color": ["#1890FF", "#36CBCB", "#4ECB73", "#FBD437", "#F2637B", "#975FE5"], "color": ["#1890FF", "#36CBCB", "#4ECB73", "#FBD437", "#F2637B", "#975FE5"],
"label": { "label": {
"normal": { "color": "#ffffff"
"textStyle": {
"color": "#ffffff"
}
}
} }
}, },
"map": { "map": {
"itemStyle": { "itemStyle": {
"normal": { "areaColor": "#eeeeee",
"areaColor": "#eeeeee", "borderColor": "#aaaaaa",
"borderColor": "#aaaaaa", "borderWidth": 0.5
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(63,177,227,0.25)",
"borderColor": "#1890FF",
"borderWidth": 1
}
}, },
"label": { "label": {
"normal": { "color": "#ffffff"
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "#1890FF"
}
}
} }
}, },
"geo": { "geo": {
"itemStyle": { "itemStyle": {
"normal": { "areaColor": "#eeeeee",
"areaColor": "#eeeeee", "borderColor": "#aaaaaa",
"borderColor": "#aaaaaa", "borderWidth": 0.5
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(63,177,227,0.25)",
"borderColor": "#1890FF",
"borderWidth": 1
}
}, },
"label": { "label": {
"normal": { "color": "#ffffff"
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "#1890FF"
}
}
} }
}, },
"categoryAxis": { "categoryAxis": {
...@@ -239,9 +147,7 @@ ...@@ -239,9 +147,7 @@
}, },
"axisLabel": { "axisLabel": {
"show": true, "show": true,
"textStyle": { "color": "#999999"
"color": "#999999"
}
}, },
"splitLine": { "splitLine": {
"show": true, "show": true,
...@@ -271,9 +177,7 @@ ...@@ -271,9 +177,7 @@
}, },
"axisLabel": { "axisLabel": {
"show": true, "show": true,
"textStyle": { "color": "#999999"
"color": "#999999"
}
}, },
"splitLine": { "splitLine": {
"show": true, "show": true,
...@@ -303,9 +207,7 @@ ...@@ -303,9 +207,7 @@
}, },
"axisLabel": { "axisLabel": {
"show": true, "show": true,
"textStyle": { "color": "#999999"
"color": "#999999"
}
}, },
"splitLine": { "splitLine": {
"show": true, "show": true,
...@@ -335,9 +237,7 @@ ...@@ -335,9 +237,7 @@
}, },
"axisLabel": { "axisLabel": {
"show": true, "show": true,
"textStyle": { "color": "#999999"
"color": "#999999"
}
}, },
"splitLine": { "splitLine": {
"show": true, "show": true,
...@@ -354,12 +254,7 @@ ...@@ -354,12 +254,7 @@
}, },
"toolbox": { "toolbox": {
"iconStyle": { "iconStyle": {
"normal": { "borderColor": "#999999"
"borderColor": "#999999"
},
"emphasis": {
"borderColor": "#666666"
}
} }
}, },
"legend": { "legend": {
...@@ -385,41 +280,20 @@ ...@@ -385,41 +280,20 @@
"width": 1 "width": 1
}, },
"itemStyle": { "itemStyle": {
"normal": { "color": "#4ECB73",
"color": "#4ECB73", "borderWidth": 1
"borderWidth": 1
},
"emphasis": {
"color": "#4ECB73"
}
}, },
"controlStyle": { "controlStyle": {
"normal": { "color": "#4ECB73",
"color": "#4ECB73", "borderColor": "#4ECB73",
"borderColor": "#4ECB73", "borderWidth": 0.5
"borderWidth": 0.5
},
"emphasis": {
"color": "#4ECB73",
"borderColor": "#4ECB73",
"borderWidth": 0.5
}
}, },
"checkpointStyle": { "checkpointStyle": {
"color": "#1890FF", "color": "#1890FF",
"borderColor": "rgba(63,177,227,0.15)" "borderColor": "rgba(63,177,227,0.15)"
}, },
"label": { "label": {
"normal": { "color": "#4ECB73"
"textStyle": {
"color": "#4ECB73"
}
},
"emphasis": {
"textStyle": {
"color": "#4ECB73"
}
}
} }
}, },
"visualMap": { "visualMap": {
...@@ -437,16 +311,7 @@ ...@@ -437,16 +311,7 @@
}, },
"markPoint": { "markPoint": {
"label": { "label": {
"normal": { "color": "#ffffff"
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "#ffffff"
}
}
} }
} }
} }
src/router/index.js
...@@ -209,13 +209,6 @@ export const asyncRoutes = [ ...@@ -209,13 +209,6 @@ export const asyncRoutes = [
meta: { title: '放大镜', permissions: ['admin'] }, meta: { title: '放大镜', permissions: ['admin'] },
}, },
{ {
path: 'echarts',
name: 'Echarts',
component: () => import('@/views/vab/echarts/index'),
meta: { title: '图表', permissions: ['admin'] },
},
{
path: 'loading', path: 'loading',
name: 'Loading', name: 'Loading',
component: () => import('@/views/vab/loading/index'), component: () => import('@/views/vab/loading/index'),
......
src/views/index/index.vue
...@@ -72,34 +72,6 @@ ...@@ -72,34 +72,6 @@
</div> </div>
</el-card> </el-card>
</el-col> </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 <el-col
v-for="(item, index) in iconList" v-for="(item, index) in iconList"
...@@ -121,18 +93,6 @@ ...@@ -121,18 +93,6 @@
</router-link> </router-link>
</el-col> </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-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
<el-card class="card" shadow="never"> <el-card class="card" shadow="never">
<div slot="header"> <div slot="header">
...@@ -213,26 +173,7 @@ ...@@ -213,26 +173,7 @@
</tr> </tr>
</table> </table>
</el-card> </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"> <el-card shadow="never">
<div slot="header"> <div slot="header">
<span>其他信息</span> <span>其他信息</span>
...@@ -254,6 +195,24 @@ ...@@ -254,6 +195,24 @@
<br /> <br />
</el-card> </el-card>
</el-col> </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> </el-row>
</div> </div>
</template> </template>
...@@ -738,14 +697,12 @@ ...@@ -738,14 +697,12 @@
.el-card__body { .el-card__body {
.echarts { .echarts {
width: 100%; width: 100%;
height: 125px; height: 115px;
} }
} }
} }
.card { .card {
min-height: 400px;
::v-deep { ::v-deep {
.el-card__body { .el-card__body {
.echarts { .echarts {
...@@ -787,7 +744,7 @@ ...@@ -787,7 +744,7 @@
} }
.icon-panel { .icon-panel {
height: 100px; height: 117px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment