94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="j-bar-chart" ref="jBarChart"></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: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
subTitle: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
radius: {
|
||
|
|
type: Array,
|
||
|
|
default: () => ['65%', '80%']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.jBarChart = echarts.init(this.$refs.jBarChart)
|
||
|
|
this.createRingChart()
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return { jBarChart: null }
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
createRingChart() {
|
||
|
|
const option = {
|
||
|
|
color: this.color,
|
||
|
|
title: {
|
||
|
|
show: true,
|
||
|
|
text: this.title,
|
||
|
|
x: '48%',
|
||
|
|
y: '36%',
|
||
|
|
z: 5,
|
||
|
|
textAlign: 'center',
|
||
|
|
textStyle: {
|
||
|
|
color: 'rgba(255, 255, 255, 1)',
|
||
|
|
fontSize: 20
|
||
|
|
},
|
||
|
|
subtext: this.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
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
this.jBarChart.setOption(option)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.j-bar-chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|