ECharts 中间空心饼状图
官网:https://www.echartsjs.com/examples/zh/index.html
<template>
<div id="zdry-chart"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'zajcChart',
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String
// default: "chart"
}
},
data() {
return {}
},
created() {},
mounted() {
this.init()
},
methods: {
init() {
let option = {
tooltip: {},
color: ['#4F9AFF', '#5ADBDC'],
title: {
text: '下发数',
// subtext: 7789,
subtext: 1772,
textStyle: {
color: '#f2f2f2',
fontSize: 13,
top: '10px'
// align: 'center'
},
subtextStyle: {
fontSize: 20,
color: ['#ff9d19'],
fontWeight: 800
},
x: 'center',
y: 'center'
},
grid: {
bottom: 150,
left: 100,
right: '10%'
},
series: [
// 主要展示层的
{
radius: ['40%', '81%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: true,
formatter: '{b}{d}%',
textStyle: {
fontSize: 15
},
position: 'outside'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length: 5,
length2: 25
},
emphasis: {
show: true
}
},
data: [
{
name: '完成数',
value: 1151
},
{
name: '未检查数',
value: 620
}
]
},
// 边框的设置
{
radius: ['40%', '44%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [
{
value: 1,
itemStyle: {
color: 'rgba(250,250,250,0.3)'
}
}
]
},
{
name: '外边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['65%', '65%'],
label: {
normal: {
show: false
}
},
data: [
{
value: '',
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0b5263'
}
}
}
]
}
]
}
this.cszaChart = echarts.init(document.getElementById('zdry-chart'))
this.cszaChart.setOption(option)
}
}
</script>
<style></style>