ECharts动态实现图表——折线图、条形图、饼图

最新推荐文章于 2024-06-28 08:46:07 发布
最新推荐文章于 2024-06-28 08:46:07 发布
阅读量1.8k 收藏 13
点赞数 1
分类专栏： 学习笔记 文章标签： echarts ajax json java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41092938/article/details/115915569
版权

下载ECharts

Echarts官网:https://echarts.apache.org/zh/index.html
在这里插入图片描述

条形图

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts图表</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/echarts.js"></script>
<script type="text/javascript">
	$(function() {
		$("#barBtn").click(function(){
			var myChart1 = echarts.init(document.getElementById('pic_1'));
			 window.onresize = function(){
					myChart1.resize();
				};
			//图表显示提示信息
			myChart1.showLoading();
			//定义图表options
			var options = {
					title : {
						text : "就业城市统计图",
						subtext:'各城市的人数/已就业的总人数*100',
					},
					tooltip : {
						trigger : 'axis'
					},
					legend : {
						data : []
					},
					toolbox : {
						show : true,
						feature : {
							mark : false
						}
					},
					calculable : true,
					xAxis : [ {
						type : 'category',
						data : []
					} ],
					yAxis : [ {
						type : 'value',
						splitArea : {
							show : true
						}, 
					}],
						series : [{
							type: 'bar',
							itemStyle: {
								normal: {
									//定义一个list，然后根据所以取得不同的值，这样就实现了，
									color: function(params) {
										var colorList = [
										      '#FF99CC','#330000','#66CC00','#33CCFF','#999900',
										      '#FF0099','#C1232B','#663333','#E87C25','#FF0033',
										      '#0000FF','#9BCA63','#993333','#FF6600','#7F7F7F',
										      '#660066','#339966','#FF0000','#383838','#336600',
										      '#336666','#990000','#CCCCFF','#FFFF00','#330033',
										      ];
										return colorList[params.dataIndex];
										},
										//以下为是否显示，显示位置和显示格式的设置了
										label: {
											show: true,
											position: 'top',
										}
								}
							},
							//设置柱的宽度，要是数据太少，柱子太宽不美观~
							barWidth : '60%',
							data : []
						}]	
					};
			//通过Ajax获取数据
			$.ajax({
				type: "post",
				url: "cityChart.do",
				data : {
					session: '2018'
				},
				dataType : "json", //返回数据形式为json
				success : function(result) {
					if (result) {
						//将返回的category和series对象赋值给options对象内的category和series
						//因为xAxis是一个数组 这里需要是xAxis[i]的形式
						options.legend.data = result.legend;
						options.xAxis[0].data = result.category;
						options.series[0].data = result.serisData;
						myChart1.hideLoading();
						myChart1.setOption(options);
					}
				},
				error : function(errorMsg) {
					alert("图表请求数据失败啦!");
				}
			});
		})
	});
</script>
</head>
<body>
	<!-- 统计图内容占8份 平板和手机统一占12份 -->
	<div class="col-xs-12 col-sm-12 col-md-9">
		<button type="button" id="barBtn">条形图</button>
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="k_post_chart">
				<div id="pic_1" style="width: 100%; height: 400px;"></div>
			</div>
		</div>
	</div>
</body>
</html>

折线图

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts图表</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/echarts.js"></script>
<script type="text/javascript">
	$(function() {

		$("#lineBtn").click(function(){
			var myChart2 = echarts.init(document.getElementById('pic_2'));
			 window.onresize = function(){
					myChart2.resize();
				};
			//图表显示提示信息
			myChart2.showLoading();
			//定义图表options
			var options = {
					title : {
						text : "就业城市统计图",
						subtext:'各城市的人数/已就业的总人数*100',
					},
					tooltip : {
						trigger : 'axis'
					},
					legend : {
						data : []
					},
					toolbox : {
						show : true,
						feature : {
							mark : false
						}
					},
					calculable : true,
					xAxis : [ {
						type : 'category',
						data : []
					} ],
					yAxis : [ {
						type : 'value',
						splitArea : {
							show : true
						}, 
					}],
						series : [{
							type: 'line',
							itemStyle: {
								normal: {
									//定义一个list，然后根据所以取得不同的值，这样就实现了，
									color: function(params) {
										var colorList = [
										      '#FF99CC','#330000','#66CC00','#33CCFF','#999900',
										      '#FF0099','#C1232B','#663333','#E87C25','#FF0033',
										      '#0000FF','#9BCA63','#993333','#FF6600','#7F7F7F',
										      '#660066','#339966','#FF0000','#383838','#336600',
										      '#336666','#990000','#CCCCFF','#FFFF00','#330033',
										      ];
										return colorList[params.dataIndex];
										},
										//以下为是否显示，显示位置和显示格式的设置了
										label: {
											show: true,
											position: 'top',
										}
								}
							},
							//设置柱的宽度，要是数据太少，柱子太宽不美观~
							barWidth : '60%',
							data : []
						}]	
					};
			//通过Ajax获取数据
			$.ajax({
				type: "post",
				url: "cityChart.do",
				data : {
					session: '2018'
				},
				dataType : "json", //返回数据形式为json
				success : function(result) {
					if (result) {
						//将返回的category和series对象赋值给options对象内的category和series
						//因为xAxis是一个数组 这里需要是xAxis[i]的形式
						options.legend.data = result.legend;
						options.xAxis[0].data = result.category;
						options.series[0].data = result.serisData;
						myChart2.hideLoading();
						myChart2.setOption(options);
					}
				},
				error : function(errorMsg) {
					alert("图表请求数据失败啦!");
				}
			});
		})
	});
</script>
</head>
<body>
		<!-- 统计图内容占8份 平板和手机统一占12份 -->
	<div class="col-xs-12 col-sm-12 col-md-9">
		<button type="button" id="lineBtn">折线图</button>
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="k_post_chart">
				<div id="pic_2" style="width: 100%; height: 400px;"></div>
			</div>
		</div>
	</div>
</body>
</html>

饼图

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts图表</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/echarts.js"></script>
<script type="text/javascript">
	$(function() {
		$("#pieBtn").click(function(){
			var myChart3 = echarts.init(document.getElementById('pic_3'));
			 window.onresize = function(){
					myChart3.resize();
				};
			//图表显示提示信息
			myChart3.showLoading();
			//定义图表options
			var options = {
					title : {
						text : "就业城市统计图",
						subtext:'各城市的人数/已就业的总人数*100',
					},
					tooltip : {
						trigger : 'axis'
					},
					legend : {
						data : []
					},
					toolbox : {
						show : true,
						feature : {
							mark : false
						}
					},
					calculable : true,
						series : [{
							type: 'pie',
							itemStyle: {
								normal: {
									//定义一个list，然后根据所以取得不同的值，这样就实现了，
									color: function(params) {
										var colorList = [
										      '#FF99CC','#330000','#66CC00','#33CCFF','#999900',
										      '#FF0099','#C1232B','#663333','#E87C25','#FF0033',
										      '#0000FF','#9BCA63','#993333','#FF6600','#7F7F7F',
										      '#660066','#339966','#FF0000','#383838','#336600',
										      '#336666','#990000','#CCCCFF','#FFFF00','#330033',
										      ];
										return colorList[params.dataIndex];
										},
										//以下为是否显示，显示位置和显示格式的设置了
										label: {
											show: true,
											position: 'top',
										}
								}
							},
							//设置柱的宽度，要是数据太少，柱子太宽不美观~
							barWidth : '60%',
							data : []
						}]	
					};
			//通过Ajax获取数据
			$.ajax({
				type: "post",
				url: "cityChart.do",
				data : {
					session: '2018'
				},
				dataType : "json", //返回数据形式为json
				success : function(result) {
					var array=[];
					var arr = result.serisData;
					if (result) {
						for(var i=0;i<arr.length;i++){
							array[i]={
									name:result.category[i],
									value:result.serisData[i]
							};
						}
						console.log(array);
						//将返回的category和series对象赋值给options对象内series
						options.legend.data = result.legend;
						options.series[0].data = array;
						myChart3.hideLoading();
						myChart3.setOption(options);
					}
				},
				error : function(errorMsg) {
					alert("图表请求数据失败啦!");
				}
			});
		})
	});
</script>
</head>
<body>
	<!-- 统计图内容占8份 平板和手机统一占12份 -->
	<div class="col-xs-12 col-sm-12 col-md-9">
		<button type="button" id="pieBtn">饼图</button>
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="k_post_chart">
				<div id="pic_3" style="width: 100%; height: 400px;"></div>
			</div>
		</div>
	</div>
</body>
</html>

Controller层代码

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String session = request.getParameter("session");
		Map<String, Object> map= empService.getChartData(session);
		// 解决json中文乱码
		response.setContentType("text/json;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		JSONObject jsonObject =  JSONObject.fromObject(map);
		System.out.println(jsonObject);
		out.print(jsonObject);
		out.flush();
		out.close();
	}

Service层代码

public Map<String, Object> getChartData(String session) {
		Map<String, Object> map = null;
		try {
			List<Chart> chartList = empDao.selectChartCity(session);
			Chart chartOther = empDao.selectOther(session);
			Chart chartCount = empDao.selectCount(session);
			List<String> category = new ArrayList<String>();
			List<String> serisData=new ArrayList<String>();
			DecimalFormat df = new DecimalFormat("#.00"); 
			for (Chart chart : chartList) {
				category.add(chart.getObtaincity());
				serisData.add(df.format(((double)chart.getNum()/chartCount.getCount())*100));
			}
			category.add("其它");
			serisData.add(df.format(((double)chartOther.getNum()/chartCount.getCount())*100));
		    List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "百分比" }));// 数据分组
		    map= new HashMap<String, Object>();
		    map.put("category", category);
		    map.put("serisData", serisData);
		    map.put("legend", legend);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return map ;
		
	}

欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…

沐小侠
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
常用4种基础统计图表——饼图、条形图、直方图、折线图
weixin_37538370的博客
05-18 1万+
饼图（扇形图） 适用情况：对多组数据的基本比例进行比较，且每组差别较大时。展示的往往是类别型数据。 图表含义：每个扇形块表示每组频数，整个圆表示多组数据的频数总和。扇形占圆的百分比表示该组占总体的百分比。 频数：特定组统计对象的数目。 条形图 适用情况：需要精准体现多组数据的频数时，也可以进行一定程度的比较。展示的往往是类别型数据。 图表含义：每个长方形表示一个特定的类，长方形的宽都相等，长方形的长表示对应的数值，越长数值越大。 条形图根据方向不同可分为垂直条形图和水平条形图。 垂直条形图 横轴表示类，纵轴
C# winform使用zedgraph制作饼图条形图和折线图的demo
01-16
ZedGraph库为开发者提供了一种强大的工具，用于创建各种图表，包括饼图、条形图和折线图。这个"C# winform使用zedgraph制作饼图条形图和折线图的demo"正是为了帮助开发者更好地理解和应用ZedGraph库。 ZedGraph是一...
vue项目使用echart实现动态折线的实时数据效果
qq_41920758的博客
08-07 2192
目前有三种方式可以实现：1、定时器不停的刷新，2、是使用scoket实现，3、是使用requestAnimationFrame实现，原理都一样，都是不断循环调用echart对象的setOption方法，每次改变一下series里面的data数据（即每次在data数组最后push一个数据，如果数组总数达到设置的一屏最大数，则先shift开头的一个数据，再结尾push一个数据），达到动态更新曲线图，实现心电图动画效果。offset: 1, color: '#C7ABE4' // 100% 处的颜色。
Echarts图表的动画是如何实现的？一文为你解密，有图有代码
最新发布
贝格前端工场的博客
06-28 1027
Echarts图表是可视化大屏中最常用组件，我们经常看到各种炫酷的图表动画效果，但是你知道这些动画效果叫什么，是如何实现的吗？今天贝格前端工场为大家分享一下。
Tableau2——折线图，饼图
金亮的博客
09-29 1072
绘制折线图，饼图
echarts图表-饼图、柱状图、折线图、散点图之间相互切换
精通前端技术，了解后端接口
11-21 4554
图表简单制作
echarts之折线图、条形图、饼图
weixin_45793065的博客
06-28 797
echarts官网https://echarts.apache.org/zh/index.html Echarts是什么 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据
Echarts+Vue-折线图/柱状图/饼图
weixin_65044153的博客
12-11 771
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。但当前这个案例将三个图表的常用配置项都做了注释,方便读者了解,读者可以直接复制到app.vue组件就可以查看页面的显示了.以上结果是利用Echarts5.js版本将数据图形化,这里采用了三个简单图表(折线图,柱状图,饼图).PPChart 提供 Echarts 收录、图表制作等服务。PPChart - 让图表更简单。Echarts-API-文档。
echarts动态切换柱状图、折线图，动态渲染数据
ada的博客
09-07 3733
echarts动态切换柱状图、折线图，动态渲染数据
Tableau——饼图和折线图的组合图表
weixin_44790641的博客
08-11 1134
一、适用场景： 二、操作步骤： 1.制作折线图：先做一个随着时间变化的销售额折线图 2.编写LOD字段：目的是用来制作饼图 “LOD-销售额”：{EXCLUDE[类别]：SUM（［销售额］）} ＊LOD：在饼图里面添加类别，来表达这个日期销售额是由哪些类别构成、比例分别是多少。为了使饼图跟折线图高度保持一致，所以在计算的时候要用LOD先排除类别对饼图的影响，因此用了EXCLUED函数。 Tips：如果大家不了解LOD，不妨直接用销售额来代替LOD这个计算字段，看看替代后的效果。 我们把这个字段放到销售额的
在VUE项目中使用Echarts简单实现折线图、柱状图、饼图
qq_41611829的博客
06-29 4534
日常练手
C#画图之饼图折线图的实现方法
09-04
本篇文章将探讨如何在C#环境中实现饼图和折线图的绘制。这些图表可以帮助我们直观地展示数据分布和趋势，对数据分析和决策具有极大价值。 首先，我们需要了解用于显示图像的控件。在C#中，这通常通过`PlaceHolder`...
Android 饼图 条形图 折线图
12-14
本项目聚焦于三种常见的数据可视化图形：饼图、条形图和折线图，这些都是数据展示中非常实用的图表类型。下面将详细阐述这三种图形的实现原理及其在Android中的应用。 首先，让我们来看看**饼图(Pie Chart)**。饼图...
java实现各种数据统计图（柱形图，饼图，折线图）
08-30
它支持多种图表类型，如条形图（柱形图）、饼图、线图、散点图、面积图等，并且可以导出为各种格式，如JPEG、PNG、PDF等。`JFreeChart`的强大之处在于其灵活性和自定义能力，可以满足开发者对图表颜色、字体、标签等...
图表 chart 条形图 饼图 雷达图
05-09
XCL Charts基于Android原生Canvas来绘制各种图表 使用简便 定制灵活 目前支持 3D 非3D 背向式 横向 竖向 柱形图 3D 非3D饼图 堆叠图 面积图 折线图 曲线图 环形图 南丁格尔玫瑰图 仪表盘 刻度盘 雷达图 圆形图 弧线...
Eclipse配置Tomcat教程
热门推荐
沐小侠
03-17 1万+
Tomcat的下载及安装，Tomcat启动时，可能遇到的问题：启动窗口一闪而过的解决方案，端口占用的解决方案。Eclipse配置Tomcat
HBuilder X 配置sass/scss
沐小侠
09-13 2608
HBuilder X 配置sass/scss，以及基本使用。 安装过程中的错误解决方案
LayUI实现数据的增删改查功能
沐小侠
03-30 2458
Laiui数据表的使用，实现增删改查功能。 主要使用Layui的数据表格 - layui.table 用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
Java实现猜丁壳小游戏（猜拳）
沐小侠
07-25 1541
剪刀、石头、布又称“猜丁壳”，猜拳小游戏要求用Java编写一个人机对战的猜拳小游戏。人选择性出拳，电脑随机出拳，判断输赢，记录输赢情况。游戏规则中，石头克剪刀，剪刀克布，布克石头。..................
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沐小侠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值