ECharts - 饼状图隐藏标示线和标示文字

在这里插入图片描述

            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在echarts饼图中显示指定的标示线标示文字,可以使用labelLine对象和label对象来控制标示线标示文字的样式和位置。具体的实现步骤如下: 1. 找到需要设置的饼图系列,通过设置series[i].data[j].labelLine.position属性来控制该数据点的标示线位置。position属性可以设置为'inner'表示在饼图扇形内部显示标示线,设置为'outer'表示在扇形外部显示标示线。 2. 将labelLine的emphasis属性中的show属性设置为true,并设置length属性来控制标示线长度。同时,还可以设置lineStyle属性来调整标示线的样式。 3. 将label的emphasis属性中的show属性设置为true,并设置position属性来控制标示文字的位置。position属性可以设置为'inside'表示在扇形内部显示标示文字,设置为'outside'表示在扇形外部显示标示文字。同时,还可以设置formatter属性来控制标示文字的显示内容。 示例代码如下: ```javascript option = { series: [{ type: 'pie', data: [ {value: 335, name: '直接访问', labelLine: {position: 'inner'}, label: {position: 'inner'}}, {value: 310, name: '邮件营销', labelLine: {position: 'outer', length: 40}, label: {position: 'outer', formatter: '{b}: {c} ({d}%)'}}, {value: 234, name: '联盟广告', labelLine: {position: 'outer', length: 40}, label: {position: 'outer', formatter: '{b}: {c} ({d}%)'}}, {value: 135, name: '视频广告', labelLine: {position: 'outer', length: 40}, label: {position: 'outer', formatter: '{b}: {c} ({d}%)'}}, {value: 1548, name: '搜索引擎', labelLine: {position: 'outer', length: 40}, label: {position: 'outer', formatter: '{b}: {c} ({d}%)'}} ], labelLine: { show: false // 不显示默认标示线 }, emphasis: { labelLine: { show: true, // 显示标示线 length: 40, // 标示线长度 lineStyle: { color: '#999', // 设置标示线颜色 width: 2 // 设置标示线宽度 } }, label: { show: true, // 显示标示文字 fontSize: 14, // 设置标示文字字号 fontWeight: 'bold' // 设置标示文字字重 } } }] }; ``` 以上代码中,第一个数据点的标示线标示文字都被设置在饼图扇形内部;其余数据点的标示线标示文字都被设置在扇形外部。在labelLine的emphasis属性中,length属性被设置为40,表示标示线长度为40像素。在label的emphasis属性中,formatter属性被设置为'{b}: {c} ({d}%)',表示标示文字的显示内容为数据项名称、数据项值和占比。同时,还可以设置其他样式属性来调整标示线标示文字的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值