Echarts图形报表设计(饼图)

在最近的工作中，我接触了echarts的饼状图设计，闲暇之余，对这段时间的收获做了一个总结，和大家分享一下。。

关于这个饼状图的设计，我主要实现的功能：

1、图形统计功能

2、图表点击跳转功能

3、根据天、月、季、年和日期进行查询统计

这里我主要将1、2和日期统计功能的代码展示如下：

<body>
    <div>
        <input class="easyui-datebox" name="startTime"/>
        <input class="easyui-datebox" name="endTime"/>	 	
        <input type="button" value="查询" onclick="search()"/>
    </div>
    <div id="main" class="main" style="margin-left: 100px;margin-top:20px;"></div>
</body>

<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));
var option = {
   		//去除气泡
   		noDataLoadingOption:{
            text: '暂无数据',
            effect: 'bubble',
            effectOption:
            {
                effect:
                {
                    n: 0
                }
            }
        },
	    title : {
	        text: '',
	        subtext: '',
	        x:'center',
	        subtarget :'blank',
	        subtextStyle : {    //副标题的样式设置
	            color :'black',
	            fontWeight :'normal',
	            fontSize :'14'
	        }     
	    },
	    tooltip : {
	        trigger: 'item',
	        //formatter: "{a}{b} : {c}"
	        formatter:'{b} : {c}次 ({d}%)'
	    },
	    legend: {
	        orient : 'vertical',
	        x : 'left',
	    },
	    
	    calculable : false,
	    series : [
	        {
	            name:'',
	            type:'pie',
	            radius : '70%',
	            center: ['50%', '60%'],
	            data:option,
	            itemStyle:{
		            normal:{
		            	label:{
		            		show:true,
		            		formatter: "{b}\n{c}次 ({d}%)",
		            	},
		            	labelLine :{show:true},
		            	emphasis:{
		            		label:{
		            			show:true,
		            			position:'center',
		            			formatter: "{b}\n{c}次 ({d}%)",
		            			textStyle: {
		                            fontSize: '30',
		                            fontWeight: 'bold'
		                        }
		            			
		            		}
		            	},
		            }
	            }
	        }
	    ]
};

//图表初始化数据显示
$.post('url',{参数},function(data){
	if(data.list!=null){
		option.series[0].data=data.list; //list为后台传入的数据
		option.legend.data=data.datalenget;
		option.title.subtext="副标题";
		myChart.clear();
		myChart.setOption(option);
	}
});



//图表点击跳转事件
myChart.on('click', function (param){
    var name=param.name;
    if(name=="张三"){
      	window.location.href="url";
    }else if(name=="李四"){
       	window.location.href="url";
    }else if(name=="王五"){
       	window.location.href="url";
    }                  	
});
myChart.on('click',eConsole);



//日期查询统计
function search(dom){
	var startTime = $('input[name=startTime]').val();
	var endTime = $('input[name=endTime]').val();
	loadOptionTime(startTime,endTime)
}

function loadOptionTime(startTime,endTime){
	$.post('url',{
		 'startTime':startTime,
		 'endTime':endTime
	     },function(data){
		 if(data.list!=null){
			option.series[0].data=data.list;
			option.legend.data=data.datalenget;
			option.title.subtext="副标题";
			myChart.clear();//图表数据清除
			myChart.hideLoading();//遮盖层隐藏
		    myChart.setOption(option,true);	
		}
	});
}


</script>

有看不懂的地方，欢迎前来询问，一起探讨、学习，共同进步。

Echarts图形报表设计(饼图)

猜你喜欢