echarts中饼图标签重叠的解决方案

饼图中的series有个avoidLabelOverlap属性,

avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。

avoidLabelOverlap设置为false时会出现以下情况

echarts中饼图标签重叠的解决方案_第1张图片

改为true之后就不会重叠 

echarts中饼图标签重叠的解决方案_第2张图片

代码如下

var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} 
{b} : {c} ({d}%)" }, legend: { //orient: "vertical", x: "0%", //y: "25%", //y: "5%", itemWidth: 14, itemHeight: 14, align: "left", data: xData, textStyle: { color: "#fff" } }, series: [ { name: "危险源状态", type: "pie", radius: ["25%", "45%"], center: ["50%", "60%"], avoidLabelOverlap: true,//对,就是这里avoidLabelOverlap label: { normal: { show: true, position: "center" }, emphasis: { show: true, textStyle: { fontSize: "12", fontWeight: "bold" } } }, labelLine: { normal: { show: true } }, data: pieData } ] };

 

你可能感兴趣的:(饼图标签重叠的解决方案,echart,饼图,echart,饼图标签重叠的解决方案,echart,饼图)