echarts实现3D饼图

Echarts实现3D饼图


option = {
    backgroundColor:'#fff',
    legend: {
        orient: 'vertical',
        x: '1000', // 'center' | 'left' | {number},
        y: '200', // 'center' | 'bottom' | {number}
        data: ['西宁', '海东', '海北','海南', '果洛', '玉树','海西']

    },
    title: {
        //text: '数字化审计平台',
        left: 'center',
		//标题栏的高度,值越大,距离顶部的距离越大
        top: 50,
		//标题栏字体的颜色
        textStyle: {
            color: '#FFD700'
        }
    },
 
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    
    series : [
        {
            name:'客户访问来源',
            type:'pie',
            radius : '60%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'西宁',itemStyle:{color:'#0bebf9'}},
                {value:310, name:'海东',itemStyle:{color:'#07bcf8'}},
                {value:400, name:'海北',itemStyle:{color:'#f488f2'}},
                {value:235, name:'海南',itemStyle:{color:'#fcf367'}},
                {value:274, name:'果洛',itemStyle:{color:'#fcf912'}},
                {value:258, name:'玉树',itemStyle:{color:'#fa14c6'}},
                {value:280, name:'海西',itemStyle:{color:'#184dfa'}}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
			//饼状图的外围标签
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.3)'
                    }
                }
            },
			//指向外围标签的线条
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(0, 0, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
				   //具体决定了饼状图每一份的颜色显示
                    color: '#FFA07A',
					//饼状图阴影,值越大阴影亮度越高
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
 
            animationType: 'scale',
            animationEasing: 'elasticOut',
        }
    ]
};
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值