需要实现效果:
在series的配置showInLegend的值为true
series: [
{
type: "pie",
name: '无杆泵井深分布',
data: [
{ name: "<1500米(56口)", y: 40.88 },
{ name: "1500米~3000米(46口)", y: 33.58 },
{ name: ">3000米(35口)", y: 25.55 }
],
showInLegend: true // 是否显示在图例中
},
],
接下来就是图例的一些配置项:
legend: {
// x: 0, // 距离x轴的距离
y: 15, // 距离y轴的距离
layout:"horizontal", // 指定图例的排列方式,horizontal水平排列,vertical垂直排列
align: "center", // 指定图例、文本水平对齐方式,left、center和right
verticalAlign: "bottom", // 指定元素在容器中的垂直对齐方式,top向上对齐,middle居中对齐,bottom向下对齐
itemStyle: {
color: '#fff',
fontSize: '10px'
},
itemDistance: 0, // 调整图例项目间距
itemHoverStyle: { // 鼠标移入图例字体颜色
color: '#fff',
},
data: []
}
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
depth: 40, // 值为0时呈现2d饼图,>0时呈现3d效果
size: 170, // 设置饼图大小
dataLabels: {
enabled: true,
format: "{point.percentage:.2f}%", // format: '值: {point.y} 占比 {point.percentage} %', 小数点后保留一位小数 point.percentage:.1f}%
color: "#fff",
}
},
},