解决echarts中饼图标签重叠的问题

北方爷们儿

已于 2022-08-18 09:34:08 修改

阅读量1.2k

点赞数

分类专栏： echarts 文章标签： echarts javascript ecmascript

于 2022-08-15 09:54:46 首次发布

原文链接：https://www.jb51.net/article/186679.htm

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

解决echarts中饼图标签重叠的问题

修改前
在这里插入图片描述
修改后

var option = {
    tooltip: {
     trigger: "item",
     formatter: "{a} <br/>{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
     }
    ]
   };