html5 canvas动态的饼状图动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5 canvas动态的饼状图动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.11.1.min.js"></script>
<!--ECharts单文件引入-->
<script src="echarts-all.js" type="text/javascript"></script>
<title>html5 canvas动态的饼状图动画特效</title>
<style type="text/css">
.echarts_pie{
	height:570px;
	width:1000px;
	background: #E6E6E6;
}
#echart{
	height:538px;
	width:100%;
}
.echarts_pie ul{
	float:left;
	list-style:none;
}
.echarts_pie ul li{
	float:left;
}
.echarts_pie .government{
	margin-top:-500px;
	width:200px;
	height:60px;
	font-size: 15px;
	color: #4A4A4A;
	letter-spacing: 0px;
	line-height: 20px;
}
.echarts_pie .government_img{
	margin-top:-920px;
	margin-left:235px;
}
.echarts_pie .bussiness{
	width:195px;
	height:60px;
	font-size: 15px;
	color: #4A4A4A;
	letter-spacing: 0px;
	line-height: 20px;
	margin-top:140px;
}
.echarts_pie .bussiness_img{
	margin-top:-560px;
	margin-left:-170px;
}
.echarts_pie .industry{
	width:195px;
	height:60px;
	font-size: 15px;
	color: #4A4A4A;
	letter-spacing: 0px;
	line-height: 20px;
	margin-top:160px;
}
.echarts_pie .industry_img{
	margin-top:-180px;
	margin-left:-110px;
}
.echarts_pie .hospital_img{
	margin-top:-950px;
	margin-left:620px;
}
.echarts_pie .school_img{
	margin-top:-680px;
	margin-left:690px;
}
.echarts_pie .hotel_img{
	margin-top:-300px;
	margin-left:620px;
}
.echarts_pie .hospital{
	margin-top:-570px;
	margin-left:800px;
	font-size: 15px;
	color: #4A4A4A;
	letter-spacing: 0px;
	line-height: 20px;
}
.echarts_pie .school{
	font-size: 15px;
	color: #4A4A4A;
	letter-spacing: 0px;
	line-height: 20px;
	margin-left:800px;
	margin-top:110px;
}
.echarts_pie .hotel{
	font-size: 15px;
	color: #4A4A4A;
	letter-spacing: 0px;
	line-height: 20px;
	margin-left:810px;
	margin-top:190px;
}
</style>
</head>

<body>
<center>
<!--饼形图-->
<div class="echarts_pie">
	<div class="content">
		<div id="echart"></div>
	   
	</div>
</div>

<script>
//饼形图
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('echart'));
option = {
    legend: {
        orient : 'vertical',
        x : 'left',
        data:[]
    }, 
  	color:['#4A5873','#F76666','#16CF45','#119FD9','#E5D117','#FF7C41', '#FF5151'],
    
    calculable : false,
    series : [
        {
            name:'',
            type:'pie',
            selectedMode: 'single',
            radius : [0, 90],
            // for funnel
            x: '20%',
            width: '40%',
			y: '90%',
            funnelAlign: 'right',
            max: 1548,
            
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner',
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data:[
                {value:335, name:'六大解\n决方案\n\n\n'}
            ]
        },
        {
            name:'',
            type:'pie',
            radius : [100, 200],
            
            // for funnel
            x: '80%', 
            width: '70%',
            funnelAlign: 'left',
            max: 1048,
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner'
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data:[
                { value:500, name:'医院'},
				{ value:500,name:'校园'},
				{ value:500, name:'酒店'},
				{ value:500, name:'工业'},
				{ value:500,name:'商业\n建筑'},
				{ value:500,name:'政府'},
            ]
        }
    ]
};
// 为echarts对象加载数据 
myChart.setOption(option);
</script>
</center>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)