Echarts怎么实现下面这种效果:
重点在下面代码中的series设置里面,使用两个重合的饼形图实现此种效果。饼形图的大小位置等都一样。唯一不同的就是label中的position属性(说明文字为“outer”,百分比为“inner”)labelLine中的show属性(说明文字为false,百分比为true)和显示文字(一个显示百分比,一个显示说明文字)
var pieEchart = echarts.init(document.getElementById('residentIDPie'));
pieoption = {
title: {
text: '',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{b}"
},
series: [
//重点在这里,以下代码实现图中效果,使用两个重合的饼形图实现此种效果。饼形图的大小位置等都一样。唯一不同的就是label中的position属性(说明文字为“outer”,百分比为“inner”)labelLine中的show属性(说明文字为false,百分比为true)和显示文字(一个显示百分比,一个显示说明文字)
{
name: '',
type: 'pie', //饼状图
radius: '50%', //大小
center: ['50%', '50%'], //显示位置
data: sexNum, //数据,我们ajax获取
itemStyle: {
normal: {
label: {
show: true,
position: 'outer',
fontSize: 18,
fontWeight:'bold',
align: "left",
formatter: function (p) { //指示线对应文字,说明文字
return p.data.name;
}
},
color: function (params) {
//自定义颜色
var colorList = ['#00CD00', '#FF7F00'];
return colorList[params.dataIndex]
},
labelLine: { //指示线状态
show: false,
smooth: 0.2,
length: 10,
length2: 20
}
}
}
},
{
name: '',
type: 'pie',
avoidLabelOverlap: true,
radius: '50%',
center: ['50%', '50%'],
data: sexNum,
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
fontSize: 26,
fontWeight: 'bold',
align:"left",
formatter: function (p) { //指示线对应文字,百分比
return p.percent + "%";
}
},
color:function(params) {
//自定义颜色
var colorList = ['#00CD00', '#FF7F00'];
return colorList[params.dataIndex]
},
labelLine: { //指示线状态
show: true,
smooth: 0.2,
length: 10,
length2: 20
}
}
}
}
]
};
pieEchart.setOption(pieoption);