CN-626 feat: 完善 Dashboard - network overview 功能及样式
This commit is contained in:
@changcode
@@ -19,6 +19,7 @@
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.line-select__operation {
|
||||
height: 24px;
|
||||
@@ -80,7 +81,7 @@
|
||||
span:nth-of-type(1) {
|
||||
font-size: 28px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
margin-right: 4px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
|
||||
@@ -13,6 +13,9 @@
|
||||
background: #E2E5EC;
|
||||
}
|
||||
}
|
||||
.pie-button.el-button {
|
||||
width: 96px;
|
||||
}
|
||||
.el-button {
|
||||
width: 117px;
|
||||
min-height: 28px;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,27 +5,58 @@
|
||||
<div class="performance-event-pie-hr"></div>
|
||||
<div id="chart2"></div>
|
||||
</div>
|
||||
<el-button size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
|
||||
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/pie.js'
|
||||
import * as echarts from 'echarts'
|
||||
import { shallowRef } from 'vue'
|
||||
export default {
|
||||
name: 'NetworkOverviewPerformanceEvent',
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null),
|
||||
myChart2: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartOption: {},
|
||||
chartOption2: {},
|
||||
chartData: [
|
||||
{ value: 1048, name: '666', describe: 'Critical' },
|
||||
{ value: 735, name: '777', describe: 'High' },
|
||||
{ value: 580, name: '888', describe: 'Medium' },
|
||||
{ value: 484, name: '999', describe: 'Low' },
|
||||
{ value: 300, name: '100', describe: 'Info' }
|
||||
],
|
||||
chartData2: [
|
||||
{ value: 1048, name: '111', describe: 'name1' },
|
||||
{ value: 735, name: '222', describe: 'name2' },
|
||||
{ value: 580, name: '333', describe: 'name3' },
|
||||
{ value: 484, name: '444', describe: 'name4' },
|
||||
{ value: 300, name: '555', describe: 'name5' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const dom1 = document.getElementById('chart1')
|
||||
const dom = document.getElementById('chart1')
|
||||
const dom2 = document.getElementById('chart2')
|
||||
const myChart1 = echarts.init(dom1)
|
||||
const myChart2 = echarts.init(dom2)
|
||||
myChart1.setOption(pieChartOption1)
|
||||
myChart2.setOption(pieChartOption2)
|
||||
if (dom) {
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = pieChartOption1
|
||||
this.chartOption.series[0].data = this.chartData
|
||||
this.myChart.setOption(pieChartOption1)
|
||||
}
|
||||
if (dom2) {
|
||||
this.myChart2 = echarts.init(dom2)
|
||||
this.chartOption2 = pieChartOption2
|
||||
this.chartOption2.series[0].data = this.chartData2
|
||||
this.myChart2.setOption(pieChartOption2)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@@ -1,21 +1,48 @@
|
||||
import { chartColor1, chartColor2, chartColor3 } from '@/utils/constants'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export const pieChartOption1 = {
|
||||
color: chartColor1,
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 35,
|
||||
left: '55%',
|
||||
itemGap: 8,
|
||||
top: 45,
|
||||
left: '50%',
|
||||
itemGap: 4,
|
||||
itemWidth: 15,
|
||||
itemHeight: 7
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
fontFamily: 'SimHei',
|
||||
rich: {
|
||||
a: {
|
||||
width: 35,
|
||||
align: 'left'
|
||||
},
|
||||
b: {
|
||||
width: 6,
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
color: '#575757'
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name) {
|
||||
const data = pieChartOption1.series[0].data
|
||||
let value
|
||||
data.forEach(t => {
|
||||
if (t.name === name) {
|
||||
value = t.describe
|
||||
}
|
||||
})
|
||||
const arr = ['{a|' + ' ' + name + '}' + '{b|' + value + '}']
|
||||
return arr
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
right: '40%',
|
||||
right: '50%',
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['30%', '50%'],
|
||||
radius: ['40%', '60%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false
|
||||
@@ -23,32 +50,52 @@ export const pieChartOption1 = {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
export const pieChartOption2 = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 35,
|
||||
left: '55%',
|
||||
itemGap: 8,
|
||||
top: 45,
|
||||
left: '50%',
|
||||
itemGap: 4,
|
||||
itemWidth: 15,
|
||||
itemHeight: 7
|
||||
itemHeight: 7,
|
||||
textStyle: {
|
||||
fontFamily: 'SimHei',
|
||||
rich: {
|
||||
a: {
|
||||
width: 35,
|
||||
align: 'left'
|
||||
},
|
||||
b: {
|
||||
width: 6,
|
||||
align: 'left',
|
||||
fontSize: 12,
|
||||
color: '#575757'
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name) {
|
||||
const data = pieChartOption2.series[0].data
|
||||
let value
|
||||
data.forEach(t => {
|
||||
if (t.name === name) {
|
||||
value = t.describe
|
||||
}
|
||||
})
|
||||
const arr = ['{a|' + ' ' + name + '}' + '{b|' + value + '}']
|
||||
return arr
|
||||
}
|
||||
},
|
||||
color: chartColor2,
|
||||
series: [
|
||||
{
|
||||
right: '40%',
|
||||
right: '50%',
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['30%', '50%'],
|
||||
radius: ['40%', '60%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false
|
||||
@@ -56,13 +103,7 @@ export const pieChartOption2 = {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -81,8 +122,8 @@ export const stackedLineChartOption = {
|
||||
type: 'scroll',
|
||||
top: 10,
|
||||
left: 20,
|
||||
itemGap: 57,
|
||||
itemWidth: 14,
|
||||
itemGap: 60,
|
||||
itemWidth: 11,
|
||||
itemHeight: 14
|
||||
},
|
||||
grid: {
|
||||
@@ -94,9 +135,16 @@ export const stackedLineChartOption = {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
type: 'time',
|
||||
splitNumber: 12,
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
const data = new Date(value)
|
||||
const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
|
||||
const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
|
||||
return h + ':' + m
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
@@ -109,92 +157,146 @@ export const stackedLineChartOption = {
|
||||
name: 'Total',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbolSize: 8,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
lineStyle: {
|
||||
color: chartColor3[0],
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[0]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[0]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'Inbound',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbolSize: 8,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
lineStyle: {
|
||||
color: chartColor3[1],
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[1]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[1]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'Outbound',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbolSize: 8,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
lineStyle: {
|
||||
color: chartColor3[2],
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[2]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[2]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'Internal',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbolSize: 8,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#35ADDA'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
lineStyle: {
|
||||
color: chartColor3[3],
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[3]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[3]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'Other',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbolSize: 8,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
lineStyle: {
|
||||
color: chartColor3[4],
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: chartColor3[4]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: chartColor3[4]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user