湖里大屏:更改 jChart/pie/JRingChart.vue 组件
This commit is contained in:
parent
bd70d44507
commit
e83640bd15
@ -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
|
||||
|
||||
@ -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%']"
|
||||
|
||||
@ -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: '' },
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user