120 lines
2.3 KiB
Vue
120 lines
2.3 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%",
|
|
fontSize: 20
|
|
})
|
|
},
|
|
radius: {
|
|
type: Array,
|
|
default: () => ["65%", "80%"]
|
|
},
|
|
legend:{
|
|
type:Boolean,
|
|
default: () => true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.createRingChart();
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
this.createRingChart();
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
title: {
|
|
handler(newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
this.createRingChart();
|
|
}
|
|
},
|
|
deep: 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: title.fontSize || 20
|
|
},
|
|
subtext: title.subTitle,
|
|
subtextStyle: {
|
|
color: "rgba(255, 255, 255, 0.8)",
|
|
fontSize: 13
|
|
}
|
|
},
|
|
grid: {
|
|
right: 0
|
|
},
|
|
legend: {
|
|
show: this.legend
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
name:this.data.name,
|
|
radius: this.radius,
|
|
avoidLabelOverlap: false,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
position: "center"
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: this.data
|
|
}
|
|
]
|
|
};
|
|
jRingChart.setOption(option);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.j-ring-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|