136 lines
2.8 KiB
Vue
136 lines
2.8 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: '11',
|
|
subTitle: '22',
|
|
x: '48%',
|
|
y: '36%'
|
|
})
|
|
},
|
|
legend: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
showLegend: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
series: {
|
|
required: true,
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
|
|
this.drawChart()
|
|
this.createChart()
|
|
this.timer = setInterval(() => {
|
|
this.doing()
|
|
}, 200)
|
|
},
|
|
destroyed() {
|
|
clearInterval(this.timer)
|
|
this.timer = ''
|
|
},
|
|
data() {
|
|
return {
|
|
jNestedRingChart: null
|
|
}
|
|
},
|
|
methods: {
|
|
createChart() {
|
|
const { title, legend, series, showLegend } = this
|
|
const setSeries = ((series) => {
|
|
return series.map((item) => ({
|
|
type: 'pie',
|
|
label: false,
|
|
center: item.center || ['30%', '50%'],
|
|
radius: item.radius || ['65%', '80%'],
|
|
roseType: item.roseType,
|
|
color: item.color,
|
|
data: item.data
|
|
}))
|
|
})(series)
|
|
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
|
|
|
|
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,
|
|
itemGap: 25,
|
|
selectedMode: false,
|
|
icon: 'circle',
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
fontSize: 14
|
|
},
|
|
formatter: legend.formatter
|
|
},
|
|
series: setSeries
|
|
}
|
|
if (!showLegend) {
|
|
delete option.legend
|
|
}
|
|
this.jNestedRingChart.setOption(option)
|
|
},
|
|
drawChart() {
|
|
this.myChart = echarts.init(this.$refs.jNestedRingChart)
|
|
this.option = {
|
|
series: this.series
|
|
}
|
|
},
|
|
doing() {
|
|
//转动饼图内圈
|
|
this.series[0].startAngle = this.series[0].startAngle - 5
|
|
this.myChart.setOption(this.option)
|
|
}
|
|
},
|
|
watch: {
|
|
series() {
|
|
this.createChart()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.j-nested-ring-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|