mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-20 01:23:47 +08:00
v1.0.4
This commit is contained in:
zhuoda
43
smart-admin-web/src/views/home/components/card.vue
Normal file
43
smart-admin-web/src/views/home/components/card.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="card-main">
|
||||
<div class="title">
|
||||
{{title}}
|
||||
<span>{{desc}}</span>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
desc: {
|
||||
type: String,
|
||||
default: '描述'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='less'>
|
||||
.card-main {
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.title {
|
||||
color: #060606;
|
||||
font-size: 16px;
|
||||
padding: 20px 32px;
|
||||
span {
|
||||
padding-left: 17px;
|
||||
font-size: 12px;
|
||||
color: #dededf;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
smart-admin-web/src/views/home/components/chart-bar.vue
Normal file
140
smart-admin-web/src/views/home/components/chart-bar.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="bar-main"
|
||||
id="box"
|
||||
ref="dom"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import tdTheme from './theme.json';
|
||||
import { on, off } from '@/lib/util';
|
||||
echarts.registerTheme('tdTheme', tdTheme);
|
||||
export default {
|
||||
props: {
|
||||
value: Object,
|
||||
text: String,
|
||||
subtext: String
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
resize() {
|
||||
this.dom.resize();
|
||||
},
|
||||
initChart() {
|
||||
this.$nextTick(() => {
|
||||
let xAxisData = Object.keys(this.value);
|
||||
let seriesData = Object.values(this.value);
|
||||
let option = {
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '2%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
text: this.text,
|
||||
subtext: this.subtext,
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{c}人',
|
||||
// position: ['30%', '90%'],
|
||||
position: 'top',
|
||||
backgroundColor: '#FAFBFE',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#6d6d6d'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// show: false,
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
// show: false,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// 设置刻度线粗度(粗的宽度)
|
||||
width: 1,
|
||||
// 颜色数组，数组数量要比刻度线数量大才能不循环使用
|
||||
color: [
|
||||
'rgba(0, 0, 0, 0)',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: seriesData,
|
||||
type: 'bar',
|
||||
barWidth: 36,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#f2f5ff' },
|
||||
{ offset: 1, color: '#fff' }
|
||||
])
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [50],
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#3AA1FF' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#36CBCB' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.dom = echarts.init(this.$refs.dom, 'tdTheme');
|
||||
this.dom.setOption(option);
|
||||
on(window, 'resize', this.resize);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bar-main {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
padding: 28px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
106
smart-admin-web/src/views/home/components/chart-funnel.vue
Normal file
106
smart-admin-web/src/views/home/components/chart-funnel.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="funnel-main"
|
||||
id="box"
|
||||
ref="dom"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import tdTheme from './theme.json';
|
||||
import { on, off } from '@/lib/util';
|
||||
echarts.registerTheme('tdTheme', tdTheme);
|
||||
export default {
|
||||
props: {
|
||||
value: Array,
|
||||
text: String,
|
||||
subtext: String
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
resize() {
|
||||
this.dom.resize();
|
||||
},
|
||||
initChart() {
|
||||
this.$nextTick(() => {
|
||||
let legend = this.value.map(_ => _.name);
|
||||
let option = {
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '2%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
text: this.text,
|
||||
subtext: this.subtext,
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: 'item',
|
||||
formatter: '{c} ({d}%)',
|
||||
// position: ['30%', '90%'],
|
||||
position: 'right',
|
||||
backgroundColor: 'transparent',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
bottom: 0,
|
||||
|
||||
// data: legend,
|
||||
backgroundColor: 'transparent',
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'funnel',
|
||||
radius: ['50%', '65%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'right',
|
||||
formatter: '{c} ({d}%)'
|
||||
}
|
||||
},
|
||||
// labelLine: {
|
||||
// normal: {
|
||||
// show: false
|
||||
// }
|
||||
// },
|
||||
data: [
|
||||
{ value: 400, name: '交易完成' },
|
||||
{ value: 300, name: '支付订单' },
|
||||
{ value: 200, name: '生成订单' },
|
||||
{ value: 100, name: '放入购物车' },
|
||||
{ value: 100, name: '浏览网站' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.dom = echarts.init(this.$refs.dom, 'tdTheme');
|
||||
this.dom.setOption(option);
|
||||
on(window, 'resize', this.resize);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.funnel-main {
|
||||
width: 100%;
|
||||
height: 295px;
|
||||
padding: 28px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
87
smart-admin-web/src/views/home/components/chart-gauge.vue
Normal file
87
smart-admin-web/src/views/home/components/chart-gauge.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="gauge-main"
|
||||
id="box"
|
||||
ref="dom"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import tdTheme from './theme.json';
|
||||
import { on, off } from '@/lib/util';
|
||||
echarts.registerTheme('tdTheme', tdTheme);
|
||||
export default {
|
||||
props: {
|
||||
value: Object,
|
||||
text: String,
|
||||
subtext: String
|
||||
},
|
||||
mounted () {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
resize () {
|
||||
this.dom.resize();
|
||||
},
|
||||
initChart () {
|
||||
this.$nextTick(() => {
|
||||
let option = {
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
// containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {},
|
||||
series: [
|
||||
{
|
||||
name: '业务指标',
|
||||
startAngle: 195,
|
||||
endAngle: -15,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: [[0.6, '#4ECB73'], [0.8, '#FBD437'], [1, '#F47F92']],
|
||||
width: 16
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
length: '80%',
|
||||
width: 3,
|
||||
color: 'auto'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: { show: false },
|
||||
type: 'gauge',
|
||||
detail: {
|
||||
formatter: '{value}%',
|
||||
textStyle: {
|
||||
color: '#595959',
|
||||
fontSize: 32
|
||||
}
|
||||
},
|
||||
data: [{ value: 10 }]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.dom = echarts.init(this.$refs.dom, 'tdTheme');
|
||||
this.dom.setOption(option);
|
||||
on(window, 'resize', this.resize);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.gauge-main {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
123
smart-admin-web/src/views/home/components/chart-line.vue
Normal file
123
smart-admin-web/src/views/home/components/chart-line.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="line-main"
|
||||
id="box"
|
||||
ref="dom"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import tdTheme from './theme.json';
|
||||
import { on, off } from '@/lib/util';
|
||||
echarts.registerTheme('tdTheme', tdTheme);
|
||||
export default {
|
||||
props: {
|
||||
value: Object,
|
||||
text: String,
|
||||
subtext: String
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
resize() {
|
||||
this.dom.resize();
|
||||
},
|
||||
initChart() {
|
||||
this.$nextTick(() => {
|
||||
let xAxisData = Object.keys(this.value);
|
||||
let seriesData = Object.values(this.value);
|
||||
let option = {
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '2%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
text: this.text,
|
||||
subtext: this.subtext,
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{c}人',
|
||||
// position: ['30%', '90%'],
|
||||
position: 'top',
|
||||
backgroundColor: '#387DE1',
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// show: false,
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
// show: false,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// 设置刻度线粗度(粗的宽度)
|
||||
width: 1,
|
||||
// 颜色数组，数组数量要比刻度线数量大才能不循环使用
|
||||
color: [
|
||||
'rgba(0, 0, 0, 0)',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee',
|
||||
'#eee'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: seriesData,
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#f2f5ff' },
|
||||
{ offset: 1, color: '#fff' }
|
||||
])
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 5,
|
||||
color: '#36CBCB'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.dom = echarts.init(this.$refs.dom, 'tdTheme');
|
||||
this.dom.setOption(option);
|
||||
on(window, 'resize', this.resize);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.line-main {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
padding: 28px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
110
smart-admin-web/src/views/home/components/chart-pie.vue
Normal file
110
smart-admin-web/src/views/home/components/chart-pie.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="pie-main"
|
||||
id="box"
|
||||
ref="dom"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import tdTheme from './theme.json';
|
||||
import { on, off } from '@/lib/util';
|
||||
echarts.registerTheme('tdTheme', tdTheme);
|
||||
export default {
|
||||
props: {
|
||||
value: Array,
|
||||
text: String,
|
||||
subtext: String
|
||||
},
|
||||
mounted () {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
resize () {
|
||||
this.dom.resize();
|
||||
},
|
||||
initChart () {
|
||||
this.$nextTick(() => {
|
||||
let legend = this.value.map(_ => _.name);
|
||||
let option = {
|
||||
title: {
|
||||
text: this.text,
|
||||
subtext: this.subtext,
|
||||
x: 'center'
|
||||
},
|
||||
position: {
|
||||
top: 40
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{c} ({d}%)',
|
||||
// position: ['30%', '90%'],
|
||||
position: function (point, params, dom, rect, size) {
|
||||
console.log(size);
|
||||
let leftWidth = size.viewSize[0] / 2 - size.contentSize[0] / 2;
|
||||
console.log(leftWidth);
|
||||
return { left: leftWidth, bottom: 0 };
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
top: 0,
|
||||
data: legend,
|
||||
backgroundColor: 'transparent',
|
||||
icon: 'circle'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: ['45%', '60%'],
|
||||
center: ['50%', '52%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '24'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 335, name: '直接访问' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 234, name: '联盟广告' },
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1548, name: '搜索引擎' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.dom = echarts.init(this.$refs.dom, 'tdTheme');
|
||||
this.dom.setOption(option);
|
||||
on(window, 'resize', this.resize);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pie-main {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
padding: 28px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
41
smart-admin-web/src/views/home/components/home-circle.vue
Normal file
41
smart-admin-web/src/views/home/components/home-circle.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="circle-main">
|
||||
<i-circle :percent="80"
|
||||
:size="164"
|
||||
:trail-width="1"
|
||||
stroke-color="#3AA1FF"
|
||||
stroke-linecap="round"
|
||||
trail-color="#ededed">
|
||||
<span class="demo-Circle-inner"
|
||||
style="font-size:24px">80%</span>
|
||||
</i-circle>
|
||||
<div>
|
||||
<button>查看详情</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.circle-main {
|
||||
background: #fff;
|
||||
height: 295px;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
button {
|
||||
margin-top: 45px;
|
||||
width: 156px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
height: 36px;
|
||||
background: rgba(241, 241, 241, 1);
|
||||
border-radius: 18px;
|
||||
color: #808080;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
smart-admin-web/src/views/home/components/home-progress.vue
Normal file
59
smart-admin-web/src/views/home/components/home-progress.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="progress-list">
|
||||
<div :key="item.name"
|
||||
class="item"
|
||||
v-for="item in value">
|
||||
<p>
|
||||
<i :style="{background:item.color}"></i>
|
||||
{{item.name}}
|
||||
<span>{{item.value}}</span>
|
||||
</p>
|
||||
<Progress :percent="45"
|
||||
:stroke-color="item.color"
|
||||
:stroke-width="16"
|
||||
class="progress"
|
||||
hide-info
|
||||
status="active" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Array
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.progress-list {
|
||||
height: 295px;
|
||||
padding: 28px;
|
||||
.item {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
color: #595959;
|
||||
margin-bottom: 16px;
|
||||
span {
|
||||
color: #808080;
|
||||
margin: 0 29px;
|
||||
}
|
||||
p {
|
||||
width: 400px;
|
||||
i {
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 13px;
|
||||
background: #f66;
|
||||
}
|
||||
padding-right: 200px;
|
||||
}
|
||||
.progress {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
490
smart-admin-web/src/views/home/components/theme.json
Normal file
490
smart-admin-web/src/views/home/components/theme.json
Normal file
@@ -0,0 +1,490 @@
|
||||
{
|
||||
"color": [
|
||||
"#2d8cf0",
|
||||
"#19be6b",
|
||||
"#ff9900",
|
||||
"#E46CBB",
|
||||
"#9A66E4",
|
||||
"#ed3f14"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#516b91"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#93b7e3"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"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": "#edafda",
|
||||
"color0": "transparent",
|
||||
"borderColor": "#d680bc",
|
||||
"borderColor0": "#8fd3e8",
|
||||
"borderWidth": "2"
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 1,
|
||||
"color": "#aaa"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true,
|
||||
"color": [
|
||||
"#2d8cf0",
|
||||
"#19be6b",
|
||||
"#f5ae4a",
|
||||
"#9189d5",
|
||||
"#56cae2",
|
||||
"#cbb0e3"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"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": 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)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"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": "#999"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#666"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "rgba(138,124,168,0.37)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#516b91",
|
||||
"#59c4e6",
|
||||
"#a5e7f0"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"dataBackgroundColor": "rgba(255,255,255,0.3)",
|
||||
"fillerColor": "rgba(167,183,204,0.4)",
|
||||
"handleColor": "#a7b7cc",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
154
smart-admin-web/src/views/home/home.vue
Normal file
154
smart-admin-web/src/views/home/home.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div>
|
||||
<Row>
|
||||
<Col>
|
||||
<HomeCard desc="Pending transaction" title="用户活跃量">
|
||||
<ActivePlate :infoList="infoCardData" />
|
||||
</HomeCard>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row :gutter="20">
|
||||
<i-col :lg="6" :md="24">
|
||||
<HomeCard desc="User from" title="用户来源">
|
||||
<ChartPie :value="pieData" />
|
||||
</HomeCard>
|
||||
</i-col>
|
||||
<i-col :lg="18" :md="24">
|
||||
<HomeCard desc="User active" title="每周用户活跃量">
|
||||
<ChartLine :value="lineData" />
|
||||
</HomeCard>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row :gutter="20">
|
||||
<i-col :lg="18" :md="24">
|
||||
<HomeCard desc="User from" title="柱状图">
|
||||
<ChartBar :value="lineData" />
|
||||
</HomeCard>
|
||||
</i-col>
|
||||
<i-col :lg="6" :md="24">
|
||||
<HomeCard desc="complete" title="完成率">
|
||||
<ChartGauge />
|
||||
</HomeCard>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row :gutter="20">
|
||||
<i-col :lg="12" :md="24">
|
||||
<HomeCard desc="progress" title="进度条">
|
||||
<HomeProgress :value="pieData" />
|
||||
</HomeCard>
|
||||
</i-col>
|
||||
<i-col :lg="6" :md="24">
|
||||
<HomeCard desc="progress" title="目标完成度">
|
||||
<Home-circle />
|
||||
</HomeCard>
|
||||
</i-col>
|
||||
<i-col :lg="6" :md="24">
|
||||
<HomeCard desc="progress" title="漏斗图">
|
||||
<ChartFunnel :value="pieData" />
|
||||
</HomeCard>
|
||||
</i-col>
|
||||
</Row>
|
||||
|
||||
|
||||
<Modal
|
||||
v-model="adModal" width="800">
|
||||
<Ad/>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActivePlate from '_c/active-plate/active-plate';
|
||||
import CountTo from '_c/count-to';
|
||||
import HomeCard from './components/card';
|
||||
import ChartPie from './components/chart-pie';
|
||||
import ChartLine from './components/chart-line';
|
||||
import ChartGauge from './components/chart-gauge';
|
||||
import ChartBar from './components/chart-bar';
|
||||
import HomeCircle from './components/home-circle';
|
||||
import HomeProgress from './components/home-progress';
|
||||
import ChartFunnel from './components/chart-funnel';
|
||||
import Ad from '@/components/smart-admin-ad';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HomeCard,
|
||||
ActivePlate,
|
||||
CountTo,
|
||||
ChartPie,
|
||||
ChartFunnel,
|
||||
ChartLine,
|
||||
HomeCircle,
|
||||
ChartGauge,
|
||||
ChartBar,
|
||||
HomeProgress,
|
||||
Ad
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
adModal:true,
|
||||
infoCardData: [
|
||||
{
|
||||
title: '新增用户',
|
||||
icon: 'md-person-add',
|
||||
count: 803,
|
||||
color: '#11A0F8'
|
||||
},
|
||||
{ title: '累计点击', icon: 'md-locate', count: 232, color: '#FFBB44 ' },
|
||||
{
|
||||
title: '新增问答',
|
||||
icon: 'md-help-circle',
|
||||
count: 142,
|
||||
color: '#7ACE4C'
|
||||
},
|
||||
{ title: '分享统计', icon: 'md-share', count: 657, color: '#11A0F8' },
|
||||
{
|
||||
title: '新增互动',
|
||||
icon: 'md-chatbubbles',
|
||||
count: 12,
|
||||
color: '#91AFC8'
|
||||
},
|
||||
{ title: '新增页面', icon: 'md-map', count: 14, color: '#91AFC8' }
|
||||
],
|
||||
pieData: [
|
||||
{ value: 335, name: '直接访问', color: '#3AA1FF' },
|
||||
{ value: 310, name: '邮件营销', color: '#36CBCB' },
|
||||
{ value: 234, name: '联盟广告', color: '#4ECB73' },
|
||||
{ value: 135, name: '视频广告', color: '#F47F92' },
|
||||
{ value: 1548, name: '搜索引擎', color: '#FBD437' }
|
||||
],
|
||||
lineData: {
|
||||
Mon: 13253,
|
||||
Tue: 34235,
|
||||
Wed: 26321,
|
||||
Thu: 12340,
|
||||
Fri: 24643,
|
||||
Sat: 1322,
|
||||
Sun: 1324
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
filters: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
beforeCreate() {},
|
||||
beforeMount() {},
|
||||
beforeUpdate() {},
|
||||
updated() {},
|
||||
beforeDestroy() {},
|
||||
destroyed() {},
|
||||
activated() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.count-style {
|
||||
font-size: 50px;
|
||||
}
|
||||
</style>
|
||||
2
smart-admin-web/src/views/home/index.js
Normal file
2
smart-admin-web/src/views/home/index.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import home from './home.vue';
|
||||
export default home;
|
||||
Reference in New Issue
Block a user