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 = [
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
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 → 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)",
"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;
......
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