test #47
@ -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%',
|
top: 'center',
|
||||||
left: '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: {
|
// emphasis: {
|
||||||
label: {
|
// label: {
|
||||||
show: true,
|
// show: true,
|
||||||
fontSize: 40,
|
// fontSize: 40,
|
||||||
fontWeight: 'bold',
|
// 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;
|
// width: 320px;
|
||||||
justify-self: center;
|
// justify-self: center;
|
||||||
background: rgba($color: #f00, $alpha: 0.3);
|
// background: rgba($color: #f00, $alpha: 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.downdata {
|
.downdata {
|
||||||
width: 240px;
|
// width: 240px;
|
||||||
justify-self: center;
|
// justify-self: center;
|
||||||
background: rgba($color: #0f0, $alpha: 0.3);
|
// background: rgba($color: #0f0, $alpha: 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checktotal {
|
.checktotal {
|
||||||
width: 240px;
|
width: 320px;
|
||||||
background: rgba($color: #00f, $alpha: 0.3);
|
|
||||||
grid-column: span 2;
|
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
|
// background: rgba($color: #00f, $alpha: 0.3);
|
||||||
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="graph-page">
|
<div class="graph-page">
|
||||||
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
||||||
<TotalGraph />
|
<TotalGraph :summary-list="summaryList" />
|
||||||
</DetailGraph>
|
</DetailGraph>
|
||||||
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据" />
|
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据" />
|
||||||
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
|
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
|
||||||
@ -23,7 +23,12 @@ import TotalGraph from './components/graphs/total.vue';
|
|||||||
export default {
|
export default {
|
||||||
name: 'GraphPage',
|
name: 'GraphPage',
|
||||||
components: { DetailGraph, TotalGraph },
|
components: { DetailGraph, TotalGraph },
|
||||||
props: {},
|
props: {
|
||||||
|
summaryList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
|
@ -33,7 +33,7 @@
|
|||||||
</base-table>
|
</base-table>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<GraphPage v-else />
|
<GraphPage v-else :summary-list="summaryList" />
|
||||||
</transition>
|
</transition>
|
||||||
|
|
||||||
<!-- todo: 数据总览,用弹窗包裹的 table 实现 -->
|
<!-- todo: 数据总览,用弹窗包裹的 table 实现 -->
|
||||||
|
Loading…
Reference in New Issue
Block a user