echarts.js扁平图形统计图表特效js和jquery代码

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

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

以下是 echarts.js扁平图形统计图表特效js和jquery代码的示例演示效果:

当前平台(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" />
<title>echarts.js扁平图形统计图表特效</title>

<link type="text/css" rel="stylesheet" href="./css/index.css" />
</head>
<body>

<p>环形统计图</p>
<div id="ring" style="width:450px;height:164px;"></div>

<p>折线统计图</p>
<div id="line" style="width:822px;height:492px;"></div>

<p>柱状统计图1</p>
<div id="pillar1" style="width:838px;height:305px;"></div>

<p>柱状统计图2</p>
<div id="pillar2" style="width:838px;height:305px;"></div>
<div class="null"></div>
<script type="text/javascript" src="./js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

JS代码(index.js):

// JavaScript Document// echarts// create for AgnesXu at 20161115//环状图var ring = echarts.init(document.getElementById('ring'));
	var labelTop ={
	normal:{
	label:{
	show:true,position:'center',formatter:'{
	b}
',textStyle:{
	baseline:'bottom'}
}
,labelLine:{
	show:false}
}
}
;
	var labelFromatter ={
	normal:{
	label:{
	formatter:function (params){
	return 100 - params.value + '%'}
,textStyle:{
	baseline:'top'}
}
}
,}
var labelBottom ={
	normal:{
	color:'#ccc',label:{
	show:true,position:'center'}
,labelLine:{
	show:false}
}
,emphasis:{
	color:'rgba(0,0,0,0)'}
}
;
	var radius = [40,55];
	ring.setOption({
	color:["#33bb9f","#ffa259","#4cbbe6"],series:[{
	type:'pie',center:['15%','58%'],radius:radius,x:'0%',// for funnel itemStyle:labelFromatter,data:[{
	name:'other',value:26,itemStyle:labelBottom}
,{
	name:'完成',value:84,itemStyle:labelTop}
]}
,{
	type:'pie',center:['45%','58%'],radius:radius,x:'20%',// for funnel itemStyle:labelFromatter,data:[{
	name:'other',value:76,itemStyle:labelBottom}
,{
	name:'退回',value:24,itemStyle:labelTop}
]}
,{
	type:'pie',center:['75%','58%'],radius:radius,x:'40%',// for funnel itemStyle:labelFromatter,data:[{
	name:'other',value:35,itemStyle:labelBottom}
,{
	name:'未完成',value:65,itemStyle:labelTop}
]}
]}
);
	//折线图var line = echarts.init(document.getElementById('line'));
	line.setOption({
	color:["#32d2c9"],title:{
	x:'left',text:'成绩统计',textStyle:{
	fontSize:'18',color:'#4c4c4c',fontWeight:'bolder'}
}
,tooltip:{
	trigger:'axis'}
,toolbox:{
	show:true,feature:{
	dataZoom:{
	yAxisIndex:'none'}
,dataView:{
	readOnly:false}
,magicType:{
	type:['line','bar']}
}
}
,xAxis:{
	type:'category',boundaryGap:false,data:['周一','周二','周三','周四','周五','周六','周日'],axisLabel:{
	interval:0}
}
,yAxis:{
	type:'value'}
,series:[{
	name:'成绩',type:'line',data:[23,42,18,45,48,49,100],markLine:{
	data:[{
	type:'average',name:'平均值'}
]}
}
]}
);
	//柱状图var pillar1 = echarts.init(document.getElementById('pillar1'));
	pillar1.setOption({
	color:["#ce6e73","#ee804b","#ffc668"],title:{
	subtext:'平均分（分）'}
,tooltip:{
	trigger:'axis'}
,legend:{
	x:'right',data:['您的班级','全市','全国']}
,calculable:true,xAxis:[{
	type:'category',data:['语言','词汇','词汇1','词汇2','词汇3','词汇4','词汇5','词汇6','词汇7','词汇8','词汇9','词汇10']}
],yAxis:[{
	type:'value'}
],series:[{
	name:'您的班级',type:'bar',data:[74,62,56,79,80,30,55,35,38,41,75,89]}
,{
	name:'全市',type:'bar',data:[70,65,80,71,70,40,35,46,58,40,56,30]}
,{
	name:'全国',type:'bar',data:[60,55,70,61,60,30,45,36,48,50,56,40]}
]}
);
	//柱状图2var pillar2 = echarts.init(document.getElementById('pillar2'));
	pillar2.setOption({
	color:["#00afff"],tooltip:{
	trigger:'axis'}
,calculable:true,xAxis:[{
	type:'category',data:['语言','词汇','词汇1','词汇2','词汇3','词汇4','词汇5','词汇6','词汇7']}
],yAxis:[{
	type:'value'}
],series:[{
	name:'您的班级',type:'bar',data:[74,62,56,79,80,30,55,35,38]}
]}
);

CSS代码(index.css):

@charset "utf-8";/* CSS Document */
body{font-size:14px;color:#000;user-select:none;-webkit-user-select:none;-webkit-text-size-adjust:none;background-color:#fff;}
html,body{height:100%;}
*{font-family:"微软雅黑","华文细黑",Arial,Helvetica,sans-serif;}
a,input,div,textarea{outline:none;}
html,body,h1,h2,h3,h4,h5,h6,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea,a{margin:0;padding:0}
input,textarea,select{text-decoration:none;outline:0 none;resize:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;border-radius:0;}
ul,dl,ol{list-style:none;}
ul,li{list-style:none;}
fieldset,img{border:0;}
a{text-decoration:none;outline:0 none;}
body{background-color:#faf9f4;}
p{color:#3d3d3d;font-size:20px;text-align:center;padding:100px 0 10px 0;}
#ring,#line,#pillar1,#pillar2{margin:0 auto;}
.null{padding-bottom:100px;}

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