最简单的echart 饼图实现

142 阅读 0 评论 94 点赞

我是靠谱客的博主清秀诺言，这篇文章主要介绍最简单的echart 饼图实现，现在分享给大家，希望可以做个参考。

话不多说，先看效果图：

实现步骤如下：

1.在echart官网下载echart.min.js ，下载网址：https://echarts.baidu.com/download.html

2.引入echart.min.js

3.写前端代码，完整代码如下：

复制代码

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>值域代码分类占比</title>
<script src="${ctxStatic}/plugin/echart4/echarts.min.js"></script>
</head>
<body>
	<div id="div"
		style="width: 50%; height: 70%; margin-left: 20px; margin-top: 20px"></div>
	<script type="text/javascript">
		var json = [];
		var datas = [];
		$(function() {
			//ajax调用
			ajaxGetData();
		});

myecharts.setOption(option);
		}
	</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>值域代码分类占比</title>
<script src="${ctxStatic}/plugin/echart4/echarts.min.js"></script>
</head>
<body>
	<div id="div"
		style="width: 50%; height: 70%; margin-left: 20px; margin-top: 20px"></div>
	<script type="text/javascript">
		var json = [];
		var datas = [];
		$(function() {
			//ajax调用
			ajaxGetData();
		});

		function ajaxGetData() {
			$.ajax({
				url : "${ctx}/baseData/statistical/getBaseDataData",
				type : "get",
				success : function(data) {
					var jsonObject = eval("(" + data + ")");
					for (var i = 0; i < jsonObject.length; i++) {
						json.push({
							value : jsonObject[i].baseDataCategoryNum,
							name : jsonObject[i].baseDataCategory
						});
						datas.push(jsonObject[i].name);
					}
					printPie();
				}
			});
		}
		function printPie() {
			var myecharts = echarts.init(document.getElementById("div"));
			option = {
				title : {
					text : '值域代码分类占比',
					subtext : '',
					x : 'center'
				},
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b} : {c} ({d}%)"
				},
				legend : {
					orient : 'vertical',
					left : 'left',
					data : datas.baseDataCategory
				},
				series : [ {
					name : '值域占比',
					type : 'pie',
					radius : '55%',
					center : [ '50%', '70%' ],
					data : json
						/* [ {
						value : 335,
						name : 'CV'
					}, {
						value : 310,
						name : '非CV'
					}, {
						value : 234,
						name : 'ICD-10'
					}, {
						value : 135,
						name : 'GB'
					} ] */,
					itemStyle : {
						emphasis : {
							shadowBlur : 10,
							shadowOffsetX : 0,
							shadowColor : 'rgba(0, 0, 0, 0.5)'
						},
						normal : {
							label : {
								show : true,
								formatter : '{b}-{d}%',
								textStyle : {
									fontWeight : 300,
									fontSize : 16
								//文字的字体大小
								},
							},
							lableLine : {
								show : true
							}
						}
					}
				} ]
			};

			myecharts.setOption(option);
		}
	</script>
</body>
</html>

4.后端代码后台数据是写死的，大家查表赋值就行，很简单。另外饼图的样式，属性可以去官网查看，这里不多赘述。

复制代码

@Controller
@RequestMapping(value = "${adminPath}/baseData/statistical")
public class BaseDataStatisticalController extends BaseController {

@RequestMapping(value = { "list", "" })
	public String list() {
		return "modules/baseData/statisticalList";
	}

@RequestMapping("getBaseDataData")
	public String getData(HttpServletResponse response) {
		List<BaseDataClass> list = new ArrayList<>();// 等基础导入数据弄好，再查表赋值

BaseDataClass baseDataClass = new BaseDataClass();
		baseDataClass.setBaseDataCategory("GB");
		baseDataClass.setBaseDataCategoryNum(996);
		list.add(baseDataClass);
		
		baseDataClass = new BaseDataClass();
		baseDataClass.setBaseDataCategory("CV");
		baseDataClass.setBaseDataCategoryNum(233);
		list.add(baseDataClass);

baseDataClass = new BaseDataClass();
		baseDataClass.setBaseDataCategory("非CV");
		baseDataClass.setBaseDataCategoryNum(433);
		list.add(baseDataClass);

baseDataClass = new BaseDataClass();
		baseDataClass.setBaseDataCategory("ICD-10");
		baseDataClass.setBaseDataCategoryNum(99);
		list.add(baseDataClass);

// response.setCharacterEncoding("UTF-8");
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		out.write(JSONArray.fromObject(list).toString());// 饼图
		out.flush();

return null;
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@Controller
@RequestMapping(value = "${adminPath}/baseData/statistical")
public class BaseDataStatisticalController extends BaseController {

	@RequestMapping(value = { "list", "" })
	public String list() {
		return "modules/baseData/statisticalList";
	}

	@RequestMapping("getBaseDataData")
	public String getData(HttpServletResponse response) {
		List<BaseDataClass> list = new ArrayList<>();// 等基础导入数据弄好，再查表赋值

		BaseDataClass baseDataClass = new BaseDataClass();
		baseDataClass.setBaseDataCategory("GB");
		baseDataClass.setBaseDataCategoryNum(996);
		list.add(baseDataClass);
		
		baseDataClass = new BaseDataClass();
		baseDataClass.setBaseDataCategory("CV");
		baseDataClass.setBaseDataCategoryNum(233);
		list.add(baseDataClass);

		baseDataClass = new BaseDataClass();
		baseDataClass.setBaseDataCategory("非CV");
		baseDataClass.setBaseDataCategoryNum(433);
		list.add(baseDataClass);

		baseDataClass = new BaseDataClass();
		baseDataClass.setBaseDataCategory("ICD-10");
		baseDataClass.setBaseDataCategoryNum(99);
		list.add(baseDataClass);

		// response.setCharacterEncoding("UTF-8");
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		out.write(JSONArray.fromObject(list).toString());// 饼图
		out.flush();

		return null;
	}
}