115 lines
2.2 KiB
Vue
115 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="j-ring-chart" ref="jRingChart"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import echarts from 'echarts4'
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [{ value: 1, name: '' }]
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: Array,
|
||
|
|
default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({
|
||
|
|
text: '',
|
||
|
|
subTitle: '',
|
||
|
|
x: '48%',
|
||
|
|
y: '36%'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
radius: {
|
||
|
|
type: Array,
|
||
|
|
default: () => ['65%', '80%']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.createRingChart()
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
data:{
|
||
|
|
handler(newVal,oldVal){
|
||
|
|
if(newVal != oldVal){
|
||
|
|
this.createRingChart();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deep:true,
|
||
|
|
immediate:true,
|
||
|
|
},
|
||
|
|
title:{
|
||
|
|
handler(newVal,oldVal){
|
||
|
|
if(newVal != oldVal){
|
||
|
|
this.createRingChart();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deep:true,
|
||
|
|
immediate:true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
createRingChart() {
|
||
|
|
const jRingChart = echarts.init(this.$refs.jRingChart)
|
||
|
|
const { title } = this
|
||
|
|
const option = {
|
||
|
|
color: this.color,
|
||
|
|
title: {
|
||
|
|
show: true,
|
||
|
|
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: title.subTitle,
|
||
|
|
subtextStyle: {
|
||
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
||
|
|
fontSize: 13
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
right: 0
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '',
|
||
|
|
type: 'pie',
|
||
|
|
radius: this.radius,
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
hoverAnimation: false,
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: 'center'
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: this.data
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(option, '草')
|
||
|
|
jRingChart.setOption(option)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.j-ring-chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|