首页图表改造
This commit is contained in:
zCans
@@ -22,7 +22,7 @@ export default {
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '160px'
|
||||
default: '250px'
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
@@ -57,60 +57,70 @@ export default {
|
||||
const option = {
|
||||
title: {
|
||||
text: this.data.text,
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
subtext: '上行：' + this.data.upload + '\n\n' + '下行：' + this.data.download,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
fontSize: 18,
|
||||
fontWeight: 800,
|
||||
color: '#6c7a89'
|
||||
align: 'center'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
data: ['上行', '下行'],
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
left: 'right'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.data.text,
|
||||
type: 'pie',
|
||||
radius: '68%',
|
||||
radius: [45, 65],
|
||||
center: ['50%', '58%'],
|
||||
// 隐藏指示线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 隐藏圆环上文字
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
formatter: (data) => {
|
||||
return `${data.name}${data.value > 1000 ? '：\n\n' : '：'}${data.value}`
|
||||
}
|
||||
show: false,
|
||||
position: 'center'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.data.upload,
|
||||
name: '上行'
|
||||
name: '上行',
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2B81B1'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2B81B1'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: this.data.download,
|
||||
name: '下行'
|
||||
name: '下行',
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#dbebf7'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#dbebf7'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div :class="className" id="license-div" :style="{height:height,width:width}"></div>
|
||||
<div>
|
||||
<div :class="className" id="license-div" :style="{height:height,width:width}"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -18,7 +20,7 @@ export default {
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '160px'
|
||||
default: '250px'
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
@@ -51,33 +53,30 @@ export default {
|
||||
this.myChart = echarts.init(this.chartDom)
|
||||
const option = {
|
||||
title: {
|
||||
text: this.data.onLine,
|
||||
subtext: 'License在线数',
|
||||
left: 'center',
|
||||
top: '32%',
|
||||
text: 'License统计',
|
||||
subtext: '在线数：' + this.data.onLine + '\n\n' + '离线数：' + (this.data.total - this.data.onLine),
|
||||
textStyle: {
|
||||
fontSize: 22,
|
||||
fontSize: 18,
|
||||
fontWeight: 800,
|
||||
color: '#c23531',
|
||||
align: 'center'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: 800,
|
||||
color: '#6c7a89'
|
||||
}
|
||||
// bottom:'0'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
data: ['在线数', '离线数'],
|
||||
orient: 'vertical',
|
||||
left: 'right'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 第一张圆环
|
||||
name: 'License',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
radius: [45, 65],
|
||||
center: ['50%', '58%'],
|
||||
avoidLabelOverlap: false,
|
||||
// 隐藏指示线
|
||||
labelLine: {
|
||||
normal: {
|
||||
@@ -87,18 +86,48 @@ export default {
|
||||
// 隐藏圆环上文字
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
show: false,
|
||||
position: 'center'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
// value当前进度 + 颜色
|
||||
{
|
||||
name: '在线数',
|
||||
value: this.data.onLine
|
||||
value: this.data.onLine,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2B81B1'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2B81B1'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '离线数',
|
||||
value: this.data.total - this.data.onLine
|
||||
value: this.data.total - this.data.onLine,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#dbebf7'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#dbebf7'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ export default {
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '160px'
|
||||
default: '250px'
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
@@ -51,33 +51,30 @@ export default {
|
||||
this.myChart = echarts.init(this.chartDom)
|
||||
const option = {
|
||||
title: {
|
||||
text: this.data.onLine,
|
||||
subtext: '端口映射在线数',
|
||||
left: 'center',
|
||||
top: '32%',
|
||||
text: '端口映射统计',
|
||||
subtext: '在线数：' + this.data.onLine + '\n\n' + '离线数：' + (this.data.total - this.data.onLine),
|
||||
textStyle: {
|
||||
fontSize: 22,
|
||||
fontSize: 18,
|
||||
fontWeight: 800,
|
||||
color: '#c23531',
|
||||
align: 'center'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: 800,
|
||||
color: '#6c7a89'
|
||||
}
|
||||
// bottom:'0'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
data: ['在线数', '离线数'],
|
||||
orient: 'vertical',
|
||||
left: 'right'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 第一张圆环
|
||||
name: '端口映射',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
radius: [45, 65],
|
||||
center: ['50%', '58%'],
|
||||
avoidLabelOverlap: false,
|
||||
// 隐藏指示线
|
||||
labelLine: {
|
||||
normal: {
|
||||
@@ -87,18 +84,39 @@ export default {
|
||||
// 隐藏圆环上文字
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
show: false,
|
||||
position: 'center'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
// value当前进度 + 颜色
|
||||
{
|
||||
name: '在线数',
|
||||
value: this.data.onLine
|
||||
value: this.data.onLine,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2B81B1'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2B81B1'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '离线数',
|
||||
value: this.data.total - this.data.onLine
|
||||
value: this.data.total - this.data.onLine,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#dbebf7'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#dbebf7'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chartDom: null,
|
||||
colorList: ['#75ddfa', '#2B81B1', '#53a7e3', '#029fe8', '#015dae']
|
||||
colorList: ['#2B81B1', '#75ddfa', '#53a7e3', '#029fe8', '#015dae']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -59,7 +59,7 @@ export default {
|
||||
data: item.value,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: this.colorList[index] + '7f'
|
||||
color: this.colorList[index] + '1f'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
|
||||
@@ -128,6 +128,9 @@ export default {
|
||||
}
|
||||
.pie-chart{
|
||||
padding-top: 16px;
|
||||
.el-card{
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user