Echarts饼状图视觉引导线设置

如何设置饼状图引导线位置
我们在使用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

  • 15
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值