echarts饼图直观显示数值最实用的方式

默认:echarts饼图直接显示数值(如图 无需光标悬空触发)

 

var optionOne = {
                title : {
                    text: '开通渠道饼图',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'horizontal',
                    x : 'center',
                    y : 'bottom',
                    data:['xxxxAPP','xxxx微信端','xxxxAPP','xxxAPP','xxx机顶盒']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true, 
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'',
                        type:'pie',
                        radius : '65%',
                        center: ['50%', '50%'],
                        /* label: {
                            normal: {
                            show: true,
                            formatter: '{b}: {c}({d}%)'},
                            textStyle : {
                                fontWeight : 'normal',
                                fontSize : 15
                            },labelLine :{show:true}
                        }, */
                        itemStyle:{ 
                            normal:{ 
                               label:{ 
                                  show: true, 
                                  formatter: '{b} : {c} ({d}%)' 
                                  }, 
                                  labelLine :{show:true} 
                                  } 
                             },
                        data:[
                            {value:500, name:'xxxAPP'},
                            {value:400, name:'xxxx微信端'},
                            {value:300, name:'xxxxAPP'},
                            {value:200, name:'xxxAPP'},
                            {value:100, name:'xxx顶盒'}
                        ]
                    }
                ]
            };
        //4.设置加载动画(非必须)
       //VisOneEchart.showLoading(); //数据加载完之前先显示一段简单的loading动画                        
       VisOneEchart.setOption(optionOne);

 

 

 

 

 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值