如何设置饼状图引导线位置
我们在使用Echarts绘制饼状图时,经常需要确定引导线位置,官网给出的示例并未明确哪些属性决定了引导方式及位置,例如:
如下外部引导线方式:

内部引导线方式
在这里插入图片描述
如何设置这两种引导方式呢?

首先要明确,管控内部显示还是外部显示的属性是: series下的label和labelLine。

方式一:外部显示:
label下的position: 'outside’即表示文本显示位置为外部; labelLine下的 show为true, 即表示显示引导线

    series: [{
          type:'pie',
          label: {        //展示文本设置 
                normal: {
                     show: true,     //展示
                     position: 'outside'      // outside表示文本显示位置为外部
                },
                emphasis: {    //文本样式
                    show: true,    //展示
                    textStyle: {    //文本样式
                        fontSize: '14',
                        fontWeight: '600',
                    }
                 }
           },
           labelLine: {    //引导线设置
                 normal: {
                      show: true,   //引导线显示
                 }
           },
     }]  

方式二:内部显示:
label下的position: 'center’即表示文本显示位置为内部; labelLine下的 show为false, 即表示隐藏引导线

              series: [ {
                            type:'pie',
                            label: {       //文本设置
                                 normal: {
                                     show: false,              //设为false
                                     position: 'center'       //center表示文本显示位置为内部
                                 },
                                 emphasis: {       //文本样式设置
                                      show: true,
                                      textStyle: {
                                           fontSize: '14',
                                           fontWeight: '600',
                                      }
                                  }
                            },
                            labelLine: {           //引导线设置
                                 normal: {
                                     show:false,       //引导线不显示
                                 }
                            },
              }]  

另外,还有引导线长度等属性可进行设置。
参考:Echarts官网配置项:https://echarts.apache.org/zh/option.html#series-pie.labelLine

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐