lb #14
@ -1,6 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="right-content-quality-analysis">
|
<div
|
||||||
<div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
|
:id="id"
|
||||||
|
ref="fault-pie-chart"
|
||||||
|
class="right-content-quality-analysis"
|
||||||
|
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
|
||||||
|
>
|
||||||
|
<!-- <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" /> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -101,8 +106,8 @@ export default {
|
|||||||
configs: {
|
configs: {
|
||||||
title: {
|
title: {
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
left: '63%',
|
left: '64%',
|
||||||
top: '35%',
|
top: '48%',
|
||||||
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -117,10 +122,11 @@ export default {
|
|||||||
fontWeight: 'lighter'
|
fontWeight: 'lighter'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
top: 0,
|
top: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
left: -15,
|
left: 0,
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
itemGap: 8,
|
itemGap: 8,
|
||||||
@ -204,8 +210,8 @@ export default {
|
|||||||
{
|
{
|
||||||
name: 'PieForm',
|
name: 'PieForm',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
center: ['65%', '50%'],
|
center: ['65%', '60%'],
|
||||||
radius: ['60%', '80%'],
|
radius: ['42%', '60%'],
|
||||||
avoidLabelOverlap: true,
|
avoidLabelOverlap: true,
|
||||||
label: {
|
label: {
|
||||||
formatter: params => {
|
formatter: params => {
|
||||||
@ -287,19 +293,21 @@ export default {
|
|||||||
const fs5 = this.calcFontsize(5 /** px*/)
|
const fs5 = this.calcFontsize(5 /** px*/)
|
||||||
const fs8 = this.calcFontsize(8 /** px*/)
|
const fs8 = this.calcFontsize(8 /** px*/)
|
||||||
const fs10 = this.calcFontsize(10 /** px*/)
|
const fs10 = this.calcFontsize(10 /** px*/)
|
||||||
const fs14 = this.calcFontsize(14 /** px*/)
|
const fs12 = this.calcFontsize(12 /** px*/)
|
||||||
const fs16 = this.calcFontsize(16 /** px*/)
|
const fs16 = this.calcFontsize(16 /** px*/)
|
||||||
|
const titleSize = this.calcFontsize(22 /** px*/)
|
||||||
|
const subtitleSize = this.calcFontsize(14 /** px*/)
|
||||||
|
|
||||||
this.configs.title.textStyle.fontSize = fs14
|
this.configs.title.textStyle.fontSize = titleSize
|
||||||
this.configs.title.subtextStyle.fontSize = fs10
|
this.configs.title.subtextStyle.fontSize = subtitleSize
|
||||||
|
|
||||||
this.configs.legend.top = '10%'
|
this.configs.legend.top = '24%'
|
||||||
this.configs.legend.itemGap = 0
|
this.configs.legend.itemGap = fs8
|
||||||
this.configs.legend.itemWidth = fs8
|
this.configs.legend.itemWidth = fs8
|
||||||
|
|
||||||
this.configs.legend.textStyle.rich.a.fontSize = fs10
|
this.configs.legend.textStyle.rich.a.fontSize = fs12
|
||||||
this.configs.legend.textStyle.rich.a.lineHeight = fs16
|
this.configs.legend.textStyle.rich.a.lineHeight = fs16
|
||||||
this.configs.legend.textStyle.rich.b.fontSize = fs10
|
this.configs.legend.textStyle.rich.b.fontSize = fs12
|
||||||
// this.configs.legend.textStyle.rich.b.lineHeight = fs16
|
// this.configs.legend.textStyle.rich.b.lineHeight = fs16
|
||||||
this.configs.legend.textStyle.rich.c.width = fs8
|
this.configs.legend.textStyle.rich.c.width = fs8
|
||||||
this.configs.legend.textStyle.rich.c.height = fs8
|
this.configs.legend.textStyle.rich.c.height = fs8
|
||||||
@ -317,11 +325,11 @@ export default {
|
|||||||
this.configs.legend.textStyle.rich.g.height = fs8
|
this.configs.legend.textStyle.rich.g.height = fs8
|
||||||
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
||||||
|
|
||||||
this.configs.series[0].label.rich.first.fontSize = fs10
|
this.configs.series[0].label.rich.first.fontSize = fs12
|
||||||
this.configs.series[0].label.rich.second.fontSize = fs10
|
this.configs.series[0].label.rich.second.fontSize = fs12
|
||||||
this.configs.series[0].label.rich.third.fontSize = fs10
|
this.configs.series[0].label.rich.third.fontSize = fs12
|
||||||
this.configs.series[0].label.rich.fourth.fontSize = fs10
|
this.configs.series[0].label.rich.fourth.fontSize = fs12
|
||||||
this.configs.series[0].label.rich.fifth.fontSize = fs10
|
this.configs.series[0].label.rich.fifth.fontSize = fs12
|
||||||
|
|
||||||
this.chart.setOption(this.configs)
|
this.chart.setOption(this.configs)
|
||||||
}
|
}
|
||||||
@ -330,9 +338,9 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.right-content-quality-analysis {
|
/* .right-content-quality-analysis {
|
||||||
height: calc(100% - 32px);
|
height: calc(100% - 32px);
|
||||||
}
|
} */
|
||||||
|
|
||||||
.fault-pie-chart {
|
.fault-pie-chart {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
Loading…
Reference in New Issue
Block a user