代码随便写了一下，网上大部分解决间隔办法是控制background，有时候实际用不了，像是渐变背景等等，直接贴代码了，需要的可以看一下，投机取巧的小办法
renderPieChart() {
let value = 0
let centerName = ''
// color: [
// '#02FDFF',
// '#006CED',
// '#0090B2',
// '#00B8BA',
// '#FFE000',
// ],
let pieData = [
{
value: 0,
name: 'Sear',
itemStyle: { color: 'rgba(0,0,0,0)' },
},
{
value: 3312,
name: 'Sear',
itemStyle: {
color: '#02FDFF',
shadowColor: '#02FDFF',
shadowBlur: 7,
},
},
{ value: 0, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
{
value: 1231,
name: 'Dire',
itemStyle: {
color: '#006CED',
shadowColor: '#006CED',
shadowBlur: 7,
},
},
{ value: 0, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
{
value: 4454,
name: 'Eml',
itemStyle: {
color: '#0090B2',
shadowColor: '#0090B2',
shadowBlur: 7,
},
},
{ value: 0, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
{
value: 5435,
name: 'Unio',
itemStyle: {
color: '#00B8BA',
shadowColor: '#00B8BA',
shadowBlur: 7,
},
},
{ value: 0, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
{
value: 7645,
name: 'Vide',
itemStyle: {
color: '#FFE000',
shadowColor: '#FFE000',
shadowBlur: 7,
},
},
{ value: 0, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
]
let total = 0
for (let i in pieData) {
total += pieData[i].value
}
let small = total / 100
pieData[0].value = small / 2
pieData[2].value = small
pieData[4].value = small
pieData[6].value = small
pieData[8].value = small
pieData[10].value = small / 2
console.log(pieData)
console.log(small, total)
const pieData2 = [
{
value: 1,
name: 'Sear',
itemStyle: {
color: 'rgba(0,0,0,0)',
},
},
{ value: 4, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
{ value: 100, name: 'Sear' },
{ value: 10, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
{ value: 100, name: 'Sear' },
{ value: 10, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
{ value: 100, name: 'Dire' },
{ value: 10, name: 'Eml', itemStyle: { color: 'rgba(0,0,0,0)' } },
{ value: 100, name: 'Unio' },
{ value: 5, name: 'Sear', itemStyle: { color: 'rgba(0,0,0,0)' } },
// { value: 300, name: 'Vide' },
]
this.$echarts
.init(this.$refs.pieChart, null, {
renderer: 'canvas',
useDirtyRect: false,
})
.setOption({
tooltip: {
show: false,
},
// backgroundColor: '#fff',
legend: {
orient: 'vertical',
x: 'left',
left: '150px',
y: 'center',
itemGap: 8, //每个之间的距离
// itemHeight: 5, //控制小颜色块的宽度
formatter: function(name) {
// 添加
for (let i = 0; i < pieData.length; i++) {
if (pieData[i].name === name) {
value = pieData[i].value
}
}
var arr = [`{a|${value}}`, `{b|value}`, `{c|BOPS}`]
return arr.join(' ')
},
textStyle: {
// 添加
padding: [0, 0, 0, 0],
rich: {
a: {
fontSize: 15,
width: 40,
color: '#c1c1c1',
},
b: {
fontSize: 15,
// width: 20,
color: 'red',
},
c: {
fontSize: 15,
},
},
},
},
title: {
text: '75',
textStyle: {
color: 'red',
fontSize: 20,
},
// subtext: '总分：100分',
// subtextStyle: {
// color: '#909090',
// },
// itemGap: -10, // 主副标题距离
left: '53',
top: 'center',
},
series: [
{
name: 'Access From',
type: 'pie',
center: '70%,0',
radius: ['63%', '70%'],
avoidLabelOverlap: false,
data: pieData,
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
// borderColor:'#172b4c',
borderWidth: 4,
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// shadowBlur: 10,
// shadowColor:'red',
// shadowBlur:'10'
},
emphasis: {
show: false,
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
label: {
show: false,
},
// radius: '100%',
labelLine: {
show: false,
},
},
{
type: 'pie',
cursor: 'default',
radius: ['50%', '52%'],
center: '70%,0',
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
// borderColor: '#182d4f',
// borderColor: '#fff',
borderWidth: 6,
color: '#02FDFF',
},
emphasis: {
label: {
show: false,
},
},
labelLine: {
show: false,
},
label: {
show: false,
},
data: pieData2,
},
],
})
},
推荐阅读
发表评论