湖里大屏:更改 jChart/pie/JRingChart.vue 组件

This commit is contained in:
Jack 2022-08-03 17:04:09 +08:00
parent bd70d44507
commit e83640bd15
4 changed files with 20 additions and 21 deletions

View File

@ -15,12 +15,13 @@ export default {
default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
},
title: {
type: String,
default: ''
},
subTitle: {
type: String,
default: ''
type: Object,
default: () => ({
text: '',
subTitle: '',
x: '48%',
y: '36%'
})
},
radius: {
type: Array,
@ -33,21 +34,21 @@ export default {
methods: {
createRingChart() {
const jRingChart = echarts.init(this.$refs.jRingChart)
const { title } = this
const option = {
color: this.color,
title: {
show: true,
text: this.title,
x: '48%',
y: '36%',
text: title.text,
x: title.x || '48%',
y: title.y || '36%',
z: 5,
textAlign: 'center',
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 20
},
subtext: this.subTitle,
subtext: title.subTitle,
subtextStyle: {
color: 'rgba(255, 255, 255, 0.8)',
fontSize: 13

View File

@ -5,8 +5,7 @@
<div class="content">
<div class="chart">
<JRingChart
title="3412"
subTitle="问题总数"
:title="{ text: 3412, subTitle: '问题总数' }"
:color="['#557DEE', '#43D7B5']"
:data="[{ value: 2314 }, { value: 987 }]"
:radius="['55%', '80%']"

View File

@ -4,18 +4,17 @@
<div class="title">{{ title }}</div>
<div class="charts">
<div class="chart">
<JRingChart title="45" subTitle="问题总数" :color="['#3CABFD']" />
<JRingChart :title="{ text: 45, subTitle: '问题总数' }" :color="['#3CABFD']" />
</div>
<div class="chart">
<JRingChart title="45" subTitle="未闭合问题" :color="['#557DEE']" />
<JRingChart :title="{ text: 45, subTitle: '未闭合问题' }" :color="['#557DEE']" />
</div>
<div class="chart">
<JRingChart title="45" subTitle="未整改问题" :color="['#FE6C7F']" />
<JRingChart :title="{ text: 45, subTitle: '未整改问题' }" :color="['#FE6C7F']" />
</div>
<div class="chart">
<JRingChart
title="90%"
subTitle="即时整改问题"
:title="{ text: '90%', subTitle: '即时整改问题' }"
:color="['#557DEE', '#43D7B5']"
:data="[
{ value: 1, name: '' },

View File

@ -5,19 +5,19 @@
<div class="rates">
<div class="rate">
<div class="chart">
<JRingChart title="89%" :data="[{ value: 89 }, { value: 11 }]" :color="['#557DEE', '#182B53']" />
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#557DEE', '#182B53']" />
</div>
<div class="label">项目整改率</div>
</div>
<div class="rate">
<div class="chart">
<JRingChart title="89%" :data="[{ value: 89 }, { value: 11 }]" :color="['#5BE2F6', '#193F54']" />
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#5BE2F6', '#193F54']" />
</div>
<div class="label">项目及时整改率</div>
</div>
<div class="rate">
<div class="chart">
<JRingChart title="89%" :data="[{ value: 89 }, { value: 11 }]" :color="['#FF6C7F', '#39273D']" />
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#FF6C7F', '#39273D']" />
</div>
<div class="label">项目及时复查率</div>
</div>