|
@@ -19,10 +19,18 @@ import * as echarts from 'echarts'; |
|
|
export default { |
|
|
export default { |
|
|
name: 'TotalGraph', |
|
|
name: 'TotalGraph', |
|
|
components: {}, |
|
|
components: {}, |
|
|
props: {}, |
|
|
|
|
|
|
|
|
props: { |
|
|
|
|
|
summaryList: { |
|
|
|
|
|
type: Array, |
|
|
|
|
|
default: () => [], |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
config: {}, |
|
|
config: {}, |
|
|
|
|
|
updata: [], |
|
|
|
|
|
downdata: [], |
|
|
|
|
|
checktotal: [], |
|
|
upChart: null, |
|
|
upChart: null, |
|
|
downChart: null, |
|
|
downChart: null, |
|
|
totalChart: null, |
|
|
totalChart: null, |
|
@@ -34,59 +42,100 @@ export default { |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
init() { |
|
|
init() { |
|
|
|
|
|
this.handleSummaryList(); |
|
|
this.initUpdata(); |
|
|
this.initUpdata(); |
|
|
this.initDowndata(); |
|
|
this.initDowndata(); |
|
|
this.initChecktotal(); |
|
|
this.initChecktotal(); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
handleSummaryList() { |
|
|
|
|
|
this.summaryList.map((item) => { |
|
|
|
|
|
this.updata.push({ name: item.lineName, value: item.sumUp }); |
|
|
|
|
|
this.downdata.push({ name: item.lineName, value: item.sumDown }); |
|
|
|
|
|
this.checktotal.push({ name: item.lineName, value: item.sumCheck }); |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
initUpdata() { |
|
|
initUpdata() { |
|
|
if (!this.upChart) |
|
|
if (!this.upChart) |
|
|
this.upChart = echarts.init(document.getElementById('updata')); |
|
|
this.upChart = echarts.init(document.getElementById('updata')); |
|
|
this.upChart.setOption(this.handleOption({})); |
|
|
|
|
|
|
|
|
this.upChart.setOption( |
|
|
|
|
|
this.handleOption({ |
|
|
|
|
|
title: '上片总数', |
|
|
|
|
|
name: '上片数据', |
|
|
|
|
|
data: this.updata |
|
|
|
|
|
}) |
|
|
|
|
|
); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
initDowndata() { |
|
|
initDowndata() { |
|
|
if (!this.downChart) |
|
|
if (!this.downChart) |
|
|
this.downChart = echarts.init(document.getElementById('downdata')); |
|
|
this.downChart = echarts.init(document.getElementById('downdata')); |
|
|
this.downChart.setOption(this.handleOption({})); |
|
|
|
|
|
|
|
|
this.downChart.setOption( |
|
|
|
|
|
this.handleOption({ |
|
|
|
|
|
title: '下片总数', |
|
|
|
|
|
name: '下片数据', |
|
|
|
|
|
data: this.downdata |
|
|
|
|
|
}) |
|
|
|
|
|
); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
initChecktotal() { |
|
|
initChecktotal() { |
|
|
if (!this.totalChart) |
|
|
if (!this.totalChart) |
|
|
this.totalChart = echarts.init(document.getElementById('checktotal')); |
|
|
this.totalChart = echarts.init(document.getElementById('checktotal')); |
|
|
this.totalChart.setOption(this.handleOption({})); |
|
|
|
|
|
|
|
|
this.totalChart.setOption( |
|
|
|
|
|
this.handleOption({ |
|
|
|
|
|
title: '检测总数', |
|
|
|
|
|
name: '检测数据', |
|
|
|
|
|
data: this.checktotal |
|
|
|
|
|
}) |
|
|
|
|
|
); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
handleOption(option) { |
|
|
|
|
|
|
|
|
handleOption({ title, name, data }) { |
|
|
const defaultOption = { |
|
|
const defaultOption = { |
|
|
|
|
|
title: { |
|
|
|
|
|
text: title, |
|
|
|
|
|
left: '42%', |
|
|
|
|
|
top: 'center', |
|
|
|
|
|
textAlign: 'right', |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
fontSize: 14, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
trigger: 'item', |
|
|
trigger: 'item', |
|
|
}, |
|
|
}, |
|
|
legend: { |
|
|
legend: { |
|
|
top: '5%', |
|
|
|
|
|
left: 'center', |
|
|
|
|
|
|
|
|
top: 'center', |
|
|
|
|
|
right: '10%', |
|
|
|
|
|
orient: 'vertical', |
|
|
|
|
|
itemWidth: 12, |
|
|
|
|
|
itemHeight: 12, |
|
|
|
|
|
icon: 'circle', |
|
|
}, |
|
|
}, |
|
|
series: [ |
|
|
series: [ |
|
|
{ |
|
|
{ |
|
|
name: 'Access From', |
|
|
|
|
|
|
|
|
name: name, |
|
|
type: 'pie', |
|
|
type: 'pie', |
|
|
radius: ['40%', '70%'], |
|
|
radius: ['40%', '70%'], |
|
|
avoidLabelOverlap: false, |
|
|
|
|
|
|
|
|
center: ['35%', '50%'], |
|
|
|
|
|
avoidLabelOverlap: true, |
|
|
label: { |
|
|
label: { |
|
|
show: false, |
|
|
show: false, |
|
|
position: 'center', |
|
|
position: 'center', |
|
|
}, |
|
|
}, |
|
|
emphasis: { |
|
|
|
|
|
label: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
fontSize: 40, |
|
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
// emphasis: { |
|
|
|
|
|
// label: { |
|
|
|
|
|
// show: true, |
|
|
|
|
|
// fontSize: 40, |
|
|
|
|
|
// fontWeight: 'bold', |
|
|
|
|
|
// }, |
|
|
|
|
|
// }, |
|
|
labelLine: { |
|
|
labelLine: { |
|
|
show: false, |
|
|
show: false, |
|
|
}, |
|
|
}, |
|
|
data: [ |
|
|
|
|
|
|
|
|
data: data ?? [ |
|
|
{ value: 1048, name: 'Search Engine' }, |
|
|
{ value: 1048, name: 'Search Engine' }, |
|
|
{ value: 735, name: 'Direct' }, |
|
|
{ value: 735, name: 'Direct' }, |
|
|
{ value: 580, name: 'Email' }, |
|
|
{ value: 580, name: 'Email' }, |
|
@@ -108,29 +157,29 @@ export default { |
|
|
margin-top: 8px; |
|
|
margin-top: 8px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
// height: 400px; |
|
|
// height: 400px; |
|
|
background: #ccc; |
|
|
|
|
|
|
|
|
// background: #ccc; |
|
|
display: grid; |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
grid-template-rows: repeat(2, 240px); |
|
|
grid-template-rows: repeat(2, 240px); |
|
|
row-gap: 20px; |
|
|
|
|
|
|
|
|
// row-gap: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.updata { |
|
|
.updata { |
|
|
width: 240px; |
|
|
|
|
|
justify-self: center; |
|
|
|
|
|
background: rgba($color: #f00, $alpha: 0.3); |
|
|
|
|
|
|
|
|
// width: 320px; |
|
|
|
|
|
// justify-self: center; |
|
|
|
|
|
// background: rgba($color: #f00, $alpha: 0.3); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.downdata { |
|
|
.downdata { |
|
|
width: 240px; |
|
|
|
|
|
justify-self: center; |
|
|
|
|
|
background: rgba($color: #0f0, $alpha: 0.3); |
|
|
|
|
|
|
|
|
// width: 240px; |
|
|
|
|
|
// justify-self: center; |
|
|
|
|
|
// background: rgba($color: #0f0, $alpha: 0.3); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.checktotal { |
|
|
.checktotal { |
|
|
width: 240px; |
|
|
|
|
|
background: rgba($color: #00f, $alpha: 0.3); |
|
|
|
|
|
grid-column: span 2; |
|
|
|
|
|
|
|
|
width: 320px; |
|
|
justify-self: center; |
|
|
justify-self: center; |
|
|
|
|
|
// background: rgba($color: #00f, $alpha: 0.3); |
|
|
|
|
|
grid-column: span 2; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |