echart环形图
Posted qq_27449993
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echart环形图相关的知识，希望对你有一定的参考价值。
optionRegis:
title:
text: `title|5name|项\\n\\nlabel|甲级`,
x: 'center',
y: '40.5%',
zlevel: 3, //层级
textStyle:
color: '#77fffc',
fontSize: '24',
rich:
title:
fontSize: 51,
color: '#363636',
padding: [0, 0, 20, 0],
fontWeight: 700,
fontStyle: 'italic'
,
name:
color: "#363636",
fontSize: 28,
padding: [10, 0, 35, 0],
fontStyle: 'italic'
,
label:
color: "#858585",
fontSize: 18,
padding: [10, 0, 35, 0]
,
tooltip:
alwaysShowContent: true,
extraCssText: 'box-shadow:0 0 0 #fff',
borderColor: '#fff',
padding: 0,
formatter: function (params)
return ''
let name = params.data.name
if (name == '')
return ''
let num = params.data.value
return `
<style>
.box
transform:translate(-50%,-46px);
font-size:26px;
color:#8B9198;
line-height:40px;
height:0;
.nums
margin-bottom:12px;
.num
font-size:40px;
font-weight:bold;
color:#363636;
</style>
<div class="box">
<div class="nums"> <span class="num">$num</span>项</div>
<div>$name</div>
</div>`
,
position: ['50%', '50%']
,
legend:
orient: 'horizontal',
x: 'center',
itemHeight: 13,
itemWidth: 14,
data: [],
textStyle:
fontSize: 14,
color: '#858585'
,
series: [
type: 'pie',
radius: ['55%', '75%'],
startAngle: 240,
zlevel: 2,
data: [],
label:
show: false
,
hoverAnimation: false,
color: [
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [ // 渐变颜色
offset: 0,
color: '#FF0B0B',
,
offset: 1,
color: '#FF6934',
],
, 'transparent'],
labelLine:
lentgth: 50,
length2: 80,
,
emphasis:
label:
formatter: "b|b\\nd|d%\\nc|",
show: false,
rich:
d:
color: '#5087EC', fontSize: '24', padding: [0, -60, 10, -60]
,
b:
color: '#8B9198 ', fontSize: '18', lineHeight: 50, padding: [-20, -60, -10, -60]
,
type: 'pie',
radius: ['55% ', '75%'],
center: ['50%', '50%'],
startAngle: 240,
data: [
],
hoverAnimation: false,
label:
show: false
,
tooltip: ,
color: ['#ffe2e1', 'transparent'],
labelLine:
lentgth: 50,
length2: 80,
,
emphasis:
label:
show: false,
,
type: 'pie',
radius: ['80% ', '80%'],
center: ['50%', '50%'],
startAngle: 240,
data: [
],
hoverAnimation: false,
label:
show: false
,
tooltip: ,
color: ['transparent', 'transparent'],
labelLine:
lentgth: 50,
length2: 80,
,
emphasis:
label:
show: false,
]
, this.optionRegis.series[0].data.push(
value: obj.value * 0.7,
name: obj.name
)
this.optionRegis.series[0].data.push(
value: obj.value * 0.3,
name: ''
)
this.optionRegis.series[1].data.push(
...obj, itemStyle:
color: '#ffe2e1',
shadowBlur: 2,
shadowColor: '#FF0B0B',
)
this.optionRegis.series[1].data.push(
value: this.optionRegis.series[0].data[0].value * 0.3,
name: ''
)
this.optionRegis.series[2].data.push(
...obj, itemStyle:
color: '#ffe2e1',
borderColor: '#E8544F',
borderWidth: 2,
borderType: 'dashed',
)
this.optionRegis.series[2].data.push(
value: this.optionRegis.series[0].data[0].value * 0.3,
name: ''
)
以上是关于echart环形图的主要内容，如果未能解决你的问题，请参考以下文章