<template>
<div ref="main" class="rate-chart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
methods: {
setOption(totalParts, completedRate, colors = ['#ffc02c', '#ddd']) {
completedRate = Math.max(0, Math.min(1, completedRate / 100))
let completedParts = Math.round(completedRate * totalParts)
let remainingParts = totalParts - completedParts
let eachCompletedPartValue = 100 / totalParts
let eachRemainingPartValue = (100 - completedParts * eachCompletedPartValue) / remainingParts
let colorArray = []
let dataArray = []
for (let i = 0; i < completedParts; i++) {
colorArray.push(colors[0])
dataArray.push({
value: eachCompletedPartValue,
name: '已完成部分 ' + (i + 1)
})
}
for (let j = 0; j < remainingParts; j++) {
colorArray.push(colors[1])
dataArray.push({
value: eachRemainingPartValue,
name: '未完成部分 ' + (j + 1 + completedParts)
})
}
return {
colors: colorArray,
data: dataArray
}
},
init() {
const myChart = echarts.init(this.$refs.main)
const completedRate = 60
const { colors, data } = this.setOption(12, completedRate)
let option = {
series: [
{
label: {
position: 'center',
fontSize: 18,
color: '#fff',
formatter: function () {
return completedRate + '%'
}
},
clockwise: true,
hoverAnimation: false,
legendHoverLink: false,
hoverOffset: 0,
type: 'pie',
radius: ['90%', '65%'],
color: colors,
data: [],
emphasis: {
show: false
},
itemStyle: {
borderColor: '#010219',
borderWidth: 4,
shadowBlur: 0,
shadowColor: '#000'
}
},
{
backgroundColor: 'transparent',
clockwise: true,
hoverAnimation: false,
legendHoverLink: false,
hoverOffset: 0,
name: '外层空心圆',
type: 'pie',
radius: ['100%', '100%'], // 设置内外半径
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [{ value: 0, name: '' }],
itemStyle: {
borderColor: '#414141',
borderWidth: 2,
color: 'none'
}
},
{
backgroundColor: 'transparent',
clockwise: true,
hoverAnimation: false,
legendHoverLink: false,
hoverOffset: 0,
name: '内层空心圆',
type: 'pie',
radius: ['55%', '55%'], // 设置内外半径
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [{ value: 0, name: '' }],
itemStyle: {
borderColor: '#414141',
borderWidth: 2,
color: 'none'
}
}
]
}
option.series[0].data = data
myChart.setOption(option)
}
},
mounted() {
this.init()
}
}
</script>
<style scoped lang="less">
.rate-chart {
width: 100%;
height: 100%;
}
</style>
vue3.x + echarts 通过饼图绘制完成率
最新推荐文章于 2024-05-20 20:44:11 发布