echarts设置饼状图的标示线以及标示文字的颜色等相关样式

一.代码和注释如下:

var option ={
  series: [
          {
            name: 'KR完成比例',
            type: 'pie',//类型为饼图
            radius: ['30%', '50%'],//饼图的半径,一般写一个,若写成有2个半径的数组,则变成了环形图
            label: {
                formatter: '{per|{d}%}  {ng|{c}}',
              //标识内容;若要设置标识内容的样式,则需要像这样设置一个变量per或者ng,在rich配置项里去设置这2个变量的样式,则会改变对应标识内容的样式
                backgroundColor: '#fff',
                rich: { //设置标识内容样式
                    per: {
                        color: 'rgba(133, 138, 155, 1)',//设置变量per的颜色,即设置{d}%的颜色
                        padding: [2, 4],
                        borderRadius: 2 
                    },
                    ng:{
                      color: 'rgba(92, 164, 252, 1)',
                      //设置变量ng的颜色,即设置{c}的颜色
                    }
                }
            },
            labelLine:{//指示线样式设置
              normal: {
					length: 40,//设置指示线的长度
					lineStyle: {
                       color: "red"  // 设置标示线的颜色
                    }
              }
			},
            data: this.indexList[i].pies//数据源
         }
   ]
}
  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在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}%)',表示标示文字的显示内容为数据项名称、数据项值和占比。同时,还可以设置其他样式属性来调整标示线标示文字样式
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值