98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import echarts from 'echarts4'
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({
|
||
|
|
text: '',
|
||
|
|
subTitle: '',
|
||
|
|
x: '48%',
|
||
|
|
y: '36%'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
series: {
|
||
|
|
required: true,
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
|
||
|
|
this.createChart()
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
jNestedRingChart: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
createChart() {
|
||
|
|
const { title, series } = this
|
||
|
|
const setSeries = (series => {
|
||
|
|
return series.map(item => ({
|
||
|
|
type: 'pie',
|
||
|
|
label: false,
|
||
|
|
center: ['30%', '50%'],
|
||
|
|
radius: item.radius || ['65%', '80%'],
|
||
|
|
roseType: item.roseType,
|
||
|
|
color: item.color,
|
||
|
|
data: item.data
|
||
|
|
}))
|
||
|
|
})(series)
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: title.text,
|
||
|
|
subtext: title.subTitle,
|
||
|
|
x: title.x || '29%',
|
||
|
|
y: title.y || '35%',
|
||
|
|
show: true,
|
||
|
|
textAlign: 'center',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: 'normal',
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: 'normal',
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
type: 'scroll',
|
||
|
|
orient: 'vertical',
|
||
|
|
right: 50,
|
||
|
|
top: 'center',
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
selectedMode: false,
|
||
|
|
icon: 'circle',
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: setSeries
|
||
|
|
}
|
||
|
|
this.jNestedRingChart.setOption(option)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.j-nested-ring-chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|