<!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>
