先上一张效果图
上代码
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
name: '文件分类',
type: 'pie',
radius: ['36%', '49%'],
center: ['50%', '45%'],
avoidLabelOverlap: false,
animation: false,
label: {
fontSize: 16,
formatter: '{d}%',
color: 'black',
padding: [-15, -24, 0, -30],
position: 'outer',
alignTo: 'labelLine',
bleedMargin: 5,
margin: 20
},
labelLine: {
normal: {
length: 35,
length2: 75
}
},
emphasis: {
label: {
show: true,
fontSize: 25,
fontWeight: 'bold'
}
},
data: [{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }]
},
{// 下面几部分属于样式
name: '内圈',
type: 'pie',
radius: ['0%', '28%'],
center: ['50%', '45%'],
avoidLabelOverlap: false,
minShowLabelAngle: 180,
tooltip: {
show: false,
trigger: 'none',
showContent: false,
triggerOn: 'none'
},
label: {
show: false
},
cursor: 'auto',
emphasis: {
disabled: true,
label: {
show: false,
fontSize: '0'
},
labelLine: {
show: false
}
},
labelLine: {
show: false
},
itemStyle: {
borderWidth: 0,
borderColor: 'white',
borderType: 'solid'
},
data: [
{ value: 105, name: '', itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#123863' // 0% 处的颜色
}, {
offset: 1, color: '#1648A3' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}}
]
},
{
type: 'gauge',
min: 0,
max: 100,
splitNumber: 50,
radius: '33%',
startAngle: 0,
endAngle: 1,
center: ['50%', '45%'],
axisLine: {
lineStyle: {
color: [[1, '#f00']],
width: 18, // 需要和splitLine.distance 值一样 保证分辨率不同时位置一样
opacity: 0
}
},
splitLine: {
distance: -18,
length: 4,
lineStyle: {
color: '#16CEF3'
}
},
axisLabel: {
show: false
},
detail: {
show: false
},
axisTick: {
show:false,
},
},
{
name: '',
type: 'pie',
hoverAnimation: false,
radius: ['58%', '59%'],
center: ['50%', '45%'],
avoidLabelOverlap: false,
minShowLabelAngle: 180,
startAngle: 40,
cursor: 'auto',
tooltip: {
show: false,
trigger: 'none',
showContent: false,
triggerOn: 'none'
},
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: '0'
},
labelLine: {
show: false
}
},
labelLine: {
show: false
},
itemStyle: {
borderWidth: 0,
borderColor: 'white',
borderType: 'solid'
},
data: [
{ value: 200, name: '', itemStyle: { color: '#11537C' }},
{ value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }},
{ value: 200, name: '', itemStyle: { color: '#11537C' }},
{ value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }},
{ value: 200, name: '', itemStyle: { color: '#11537C' }},
{ value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}
]
},
{
name: '',
type: 'pie',
hoverAnimation: false,
radius: ['56%', '61%'],
center: ['50%', '45%'],
avoidLabelOverlap: false,
minShowLabelAngle: 180,
startAngle: 40,
cursor: 'auto',
tooltip: {
show: false,
trigger: 'none',
showContent: false,
triggerOn: 'none'
},
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: '0'
},
labelLine: {
show: false
}
},
labelLine: {
show: false
},
itemStyle: {
borderRadius: 10,
// borderColor: '#fff',
// borderWidth: 2,
borderType: 'solid'
},
data: [
{ value: 12, name: '', itemStyle: { color: '#3284A8' }},
{ value: 190, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }},
{ value: 12, name: '', itemStyle: { color: '#3284A8' }},
{ value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }},
{ value: 12, name: '', itemStyle: { color: '#3284A8' }},
{ value: 190, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }},
{ value: 12, name: '', itemStyle: { color: '#3284A8' }},
{ value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }},
{ value: 12, name: '', itemStyle: { color: '#3284A8' }},
{ value: 190, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }},
{ value: 12, name: '', itemStyle: { color: '#3284A8' }},
{ value: 100, name: '', itemStyle: { color: 'rgba(250,250,250,0)' }}
]
}
]
};
说明:
1 复制代码到echarts示例中,全部粘贴替换就可看到效果
2 echarts需要5以上版本
3 axisLine.lineStyle.width 需要和splitLine.distance 值一样 保证分辨率不同时位置一样
以此记录,需要拿走不谢