echarts的简单使用案例

 

环境

js中引入

<!-- 引入 echarts.js --> 
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

1.需求图

2.代码实现

//以下是主要的代码，其他部分没摘
<!--饼图 -->
		<div class="row">
			<div id="loading1" style="margin-bottom: 20px;"></div>
		</div>

<script type="text/javascript">

// 查询数据，从后台查询数据，并且符合条件则显示饼图，不满足则隐藏
		function loadGrid(){
			var param = getLoadGridParam();
			Tool.asyncLoad("<%=path%>/serv/phone/TC/TCAction/loadTableDataQuota.json",param,function(data) {
				var json = Tool.toJSON(data);
				if (json.code == 0) {
					var rows = json.data;
					domGrid.loadData(rows);
					var result = $("#table_grid tr");
					result.children("th").get(1).innerHTML = flag.unitName
							+ '<img alt="" src="/nesale/serv/phone/img/timg2.png">';
				} else {
					layer.msg(json.msg);
				}
			});
			
			if(param.UNIT == 'PROVINCE'){
				getPieData();
			}else{
				$("#loading1").hide();
			}
		};


//传递饼图参数 
		function getPieData(){
			var param = getLoadGridParam();
//ajax请求后台，如果请求成功，将数据显示在饼图中
			 $.ajax({
				async:true,
	           	type: "post",
	           	data:{"QUOTA":param.QUOTA,"STAGE":param.STAGE,"DATE":param.DATE},
	           	url: '<%=path%>/serv/phone/TC/TCAction/getAreaPie.json',
	           	dataType: "json",
	           	success:function(data){
	           		console.log(data);
	           		getPie(data);
	           		layer.closeAll('loading');  //关闭 load 等待层
	           	}
			}); 
		}
		
//获得饼图，主要的饼图显示方式
			function getPie(data){
				var width = $("#loading1").parent().width();
		        $("#loading1").height(180).width(width);
		         if(data.rs==null||data.rs==""||data.rs.legend==null || data.rs.seriesList.length == 0){
		        	$("#loading1").html(emptyMsg);
		        	return;
		        } 
		        
		    	var option = {
		    		    tooltip: {
		    		        trigger: 'item',
		    		        formatter: '{a} <br/>{b}: {c} ({d}%)'
		    		    },
		    		    legend: {
		    		        orient: 'vertical',
		    		        right: 10,
		    		        data: [
		    		               //{name: '工作', value: 8},
		    		               {name : data.rs.seriesList[1].name, value: data.rs.seriesList[1].value}, 
		    		               {name : data.rs.seriesList[0].name, value: data.rs.seriesList[0].value}
		    		               ]
		    		    },
		    		    series: [
		    		        {
		    		            name: '访问来源',
		    		            type: 'pie',
		    		            radius: ['50%', '90%'],
		    		            avoidLabelOverlap: false,
		    		            label: {
		    		            	position : 'inner',
		    		                normal: {
		    		                    //show: false,
		    		                    //position: 'center'
		    		                	position:'inside',
		    		                	formatter: '{d}%'
		    		                },
		    		                emphasis: {
		    		                    show: true,
		    		                    textStyle: {
		    		                        fontSize: '30',
		    		                        fontWeight: 'bold'
		    		                    }
		    		                }
		    		            },
		    		            labelLine: {
		    		                normal: {
		    		                    show: false
		    		                }
		    		            },
		    		            data: [
		    		                {value: data.rs.seriesList[0].value, name: '直销',itemStyle:{normal:{color:'#FF0000'}}},
		    		                {value: data.rs.seriesList[1].value, name: '店销',itemStyle:{normal:{color:'#02B0ED'}}}
		    		              
		    		            ]
		    		        }
		    		    ]
		    		};
		    	var myChart = echarts.init(document.getElementById("loading1") );
				myChart.setOption(option);
			}
	</script>