lb #14

Merged
gtz217 merged 20 commits from lb into master 2022-11-23 09:44:40 +08:00
Showing only changes of commit 890a1be63c - Show all commits

View File

@ -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%;