【Echarts教程】Ajax实现动态加载环状饼图

一、GIF图

二、前台码

// 调用方法
workOrderPie();

// 定时刷新
setInterval(function () {
	workOrderPie();
},5000);

function workOrderPie(){
	// 初始化图表元素
	var workOrderPie = echarts.init(document.getElementById('workOrderPie_id'));
	$.get('${pageContext.request.getContextPath()}/m/gongdan.do', function (res) {
		// 工单数量
		var total = 0;
		// 超期数量计算
		var chaoqi = parseInt(res[1].value) - parseInt(res[0].value);
		$('#workOrderPie-overDate').html(chaoqi);
		for(var i=0;i<res.length;i++){
			total += parseInt(res[i].value);
		}
		var option = {
			// 提示框组件，鼠标经过饼图时会出现提示框
			tooltip : {
				// 触发类型（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）
				trigger: 'item',
				// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			// 图例组件
			legend: {
				// 是否显示
				show: true,
				// 纵向显示
				orient: 'vertical',
				// 放在左边
				left: 'left',
				// 内容
				data: ['户内','户外'],
				// 样式
				textStyle:{
					color: '#66ffff'
				}
			},
			// 系列列表
			series : [
				{
					// 图表类型
					type: 'pie',
					// 饼图的半径，数组的第一项是内半径，第二项是外半径
					radius : ['70%', '50%'],
					// 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
					center: ['50%', '60%'],
					// 回调数据
					data: res,
					// 图形样式
					itemStyle: {
						emphasis: {
							// 图形阴影的模糊大小
							shadowBlur: 10,
							// 阴影水平方向上的偏移距离
							shadowOffsetX: 0,
							// 阴影颜色
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					},
					// 饼图图形上的文本标签
					label:{
						// 是否显示
						show:true,
						// 字体大小
						fontSize:12,
						// 字体颜色
						color: defaultColor,
						// 格式化，如：户内 56.1%
						formatter: '{b}\n {d}%'
						
					}
				}
			],
			// 是原生图形元素组件
			graphic:{
				// 类型
				type:'text',
				style:{
					// 显示的文字
					text:'工单数量\n'+total,
					// 对齐方式
					textAlign:'center',
					// 横坐标偏移
					x:110,
					// 纵坐标偏移
					y:75,
					// 字号
					fontSize:14,
					// 颜色
					fill: defaultColor
				}
			},
			// 饼图各扇形块颜色
		   color: ['rgb(255,246,143)','rgb(72,118,255)']
		};
		workOrderPie.setOption(option);
	});
}

<div class="cont cont01 box-border">
	<div class="con-gongdan">工单</div>
	<div class="sub-tab" id="workOrderPie_id"></div>
	<div class="sub-footer">
		<div class="tag">超 期</div>
		<div class="tag-num" id="workOrderPie-overDate">8</div>
	</div>
</div>

三、后台代码

@RequestMapping("/m/gongdan.do")
@ResponseBody
public JSONArray gongdan() {
	List<ValueNameForm> list = new ArrayList<ValueNameForm>();
	int huwai = 10 + new Random().nextInt(10);
	list.add(new ValueNameForm("户外", huwai));
	int hunei = 20 + new Random().nextInt(10);
	list.add(new ValueNameForm("户内", hunei));
	return JSONArray.fromObject(list);
}

数据格式：

[{"value":16, "name":"户外"},{"value":22, "name":"户内"}]

public class ValueNameForm {
	
	private String name;
	
	private int value;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getValue() {
		return value;
	}

	public void setValue(int value) {
		this.value = value;
	}

	public ValueNameForm(String name, int value) {
		super();
		this.name = name;
		this.value = value;
	}

	public ValueNameForm() {
		super();
	}
}