Echarts实现百分比在饼图内部,说明在饼图外部

Echarts怎么实现下面这种效果:

重点在下面代码中的series设置里面,使用两个重合的饼形图实现此种效果。饼形图的大小位置等都一样。唯一不同的就是label中的position属性(说明文字为“outer”,百分比为“inner”)labelLine中的show属性(说明文字为false,百分比为true)和显示文字(一个显示百分比,一个显示说明文字)

    var pieEchart = echarts.init(document.getElementById('residentIDPie'));

    pieoption = {
        title: {
            text: '',
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b}"
        },
        series: [
                //重点在这里,以下代码实现图中效果,使用两个重合的饼形图实现此种效果。饼形图的大小位置等都一样。唯一不同的就是label中的position属性(说明文字为“outer”,百分比为“inner”)labelLine中的show属性(说明文字为false,百分比为true)和显示文字(一个显示百分比,一个显示说明文字)
                  {
                      name: '',
                      type: 'pie',   //饼状图
                      radius: '50%',   //大小
                      center: ['50%', '50%'],    //显示位置
                      data: sexNum,   //数据,我们ajax获取
                      itemStyle: {
                          normal: {
                              label: {
                                  show: true,
                                  position: 'outer',
                                  fontSize: 18,
                                  fontWeight:'bold',
                                  align: "left",
                                  formatter: function (p) {   //指示线对应文字,说明文字
                                      return p.data.name;
                                  }
                              },
                              color: function (params) {
                                  //自定义颜色
                                  var colorList = ['#00CD00', '#FF7F00'];
                                  return colorList[params.dataIndex]
                              },
                              labelLine: {    //指示线状态
                                  show: false,
                                  smooth: 0.2,
                                  length: 10,
                                  length2: 20
                              }
                          }
                      }
                },
                {
                name: '',
                type: 'pie',
                avoidLabelOverlap: true,
                radius: '50%',
                center: ['50%', '50%'],
                data: sexNum,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'inner',
                            fontSize: 26,
                            fontWeight: 'bold',
                            align:"left",
                            formatter: function (p) {   //指示线对应文字,百分比
                                return p.percent + "%";
                            }
                        },
                        color:function(params) {
                            //自定义颜色
                            var colorList = ['#00CD00', '#FF7F00'];
                            return colorList[params.dataIndex]
                        },
                        labelLine: {    //指示线状态
                            show: true,
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    }
                }
            }
        ]
    };


    pieEchart.setOption(pieoption);

 

  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值