ECharts——饼状图(指示线、提示文字、分区样式)
·
option = {
title: {
text: '分布图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)" // 鼠标悬浮在各分区时的提示内容
},
legend: {
bottom: 10,
left: 'center',
data: ['1a', '2b', '3c', '4d', '5e' , '6f']
},
series: [{
name: '',
type: 'pie',
radius: ['50%', '70%'],
labelLine:{
normal:{
length:15, // 指示线宽度
lineStyle: {
color: "#595959" // 指示线颜色
}
},
},
label: {
normal: {
// 各分区的提示内容
// params: 即下面传入的data数组,通过自定义函数,展示你想要的内容和格式
formatter: function(params){
return params.name+"\n\n"+params.percent+"%";
},
textStyle: { // 提示文字的样式
color: '#595959',
fontSize: 14
}
}
},
data: [
// 各分区样式: value值,name表示各分区的标识、itemStyle模块样式
// 注意: name与上面的legend-data中必须保持一致,才可展示按钮组
{ value: 39, name: '1a', percent: '39', itemStyle: { color: '#FFBD1C' }},
{ value: 21, name: '2b', percent: '21', itemStyle: { color: '#13C2C2' }},
{ value: 12, name: '3c', percent: '12', itemStyle: { color: '#267CFF' }},
{ value: 8, name: '4d', percent: '8', itemStyle: { color: '#FF8C16' }},
{ value: 9, name: '5e', percent: '9', itemStyle: { color: '#80B3FF' }},
{ value: 11, name: '6f', percent: '11', itemStyle: { color: '#8543E0' }},
]
}]
};
效果图:
更多推荐
已为社区贡献1条内容
所有评论(0)