mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-04-05 19:41:43 +08:00
🚀 feat: Complete the home page reconstruction according to echarts 5.0
This commit is contained in:
chuzhixin
parent
21cbc0a0da
commit
fd10db666c
@ -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 = [
|
||||
|
||||
@ -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',
|
||||
|
||||
14
package.json
14
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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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',
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user