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

2022年6月28日09:16:35

下载ECharts

Echarts官网:https://echarts.apache.org/zh/index.html
ECharts动态实现图表——折线图、条形图、饼图

条形图

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>echarts图表</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/echarts.js"></script><scripttype="text/javascript">$(function(){$("#barBtn").click(function(){var myChart1= echarts.init(document.getElementById('pic_1'));
			 window.onresize=function(){
					myChart1.resize();};//图表显示提示信息
			myChart1.showLoading();//定义图表optionsvar 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",//返回数据形式为jsonsuccess: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份 --><divclass="col-xs-12 col-sm-12 col-md-9"><buttontype="button"id="barBtn">条形图</button><divclass="tab-content"><divrole="tabpanel"class="tab-pane active"id="k_post_chart"><divid="pic_1"style="width: 100%;height: 400px;"></div></div></div></div></body></html>

折线图

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>echarts图表</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/echarts.js"></script><scripttype="text/javascript">$(function(){$("#lineBtn").click(function(){var myChart2= echarts.init(document.getElementById('pic_2'));
			 window.onresize=function(){
					myChart2.resize();};//图表显示提示信息
			myChart2.showLoading();//定义图表optionsvar 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",//返回数据形式为jsonsuccess: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份 --><divclass="col-xs-12 col-sm-12 col-md-9"><buttontype="button"id="lineBtn">折线图</button><divclass="tab-content"><divrole="tabpanel"class="tab-pane active"id="k_post_chart"><divid="pic_2"style="width: 100%;height: 400px;"></div></div></div></div></body></html>

饼图

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>echarts图表</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/echarts.js"></script><scripttype="text/javascript">$(function(){$("#pieBtn").click(function(){var myChart3= echarts.init(document.getElementById('pic_3'));
			 window.onresize=function(){
					myChart3.resize();};//图表显示提示信息
			myChart3.showLoading();//定义图表optionsvar 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",//返回数据形式为jsonsuccess: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(

作者：沐小侠
原文链接：https://blog.csdn.net/weixin_41092938/article/details/115915569
更新时间：2022年6月28日09:16:35 ，共 6261 字。

相关文章

Android 4.0.1破坏了WebView HTML 5本地存储？ 02/21

通过覆盖的HTML元素
传递鼠标单击 02/21

HTML5画布变形 02/21

Firefox中的HTML5输入类型“数字” 02/20

将HTML5 SVG对准屏幕中心 02/20

随机文章

Gin-使用GORM操作mysql 数据库 01/15

SpringCloud基础（四）Spring Cloud Config：配置中心 10/06

Swagger在SpringBoot中的的一些详细配置 02/26

防止重复提交拦截器 spring boot 08/02

带你了解了解Future和CompletableFuture 06/26

上一篇
总结vue项目引入Vant遇到的坑下一篇
idea配置tomcat启动web项目

文章导航

热门标签

交换网络工程师小助手 NAT OSPF IPV6 VPN IGMP IP GPON 华为路由 Wireshark BGP STP ISIS LACP 组播 Vlan BGP选路 PIM DHCP H3C MPLS 链路聚合 CCNA视频教程交换机 TCP QOS LDP RADIUS

最新文章

Android 4.0.1破坏了WebView HTML 5本地存储？ 02/21

通过覆盖的HTML元素
传递鼠标单击 02/21

HTML5画布变形 02/21

Firefox中的HTML5输入类型“数字” 02/20

将HTML5 SVG对准屏幕中心 02/20

HTML5画布 canvas移动 02/20

Internet Explorer无法为元素呈现任何类型的背景颜色。 02/20

如何使用HTML5 SVG绘制正弦波？ 02/20

如何使用画布HTML5元素从底部中心角度旋转图像？ 02/20

win11系统怎么通过cmd进入d盘 12/30

热门文章

PHP范围解析运算符（：:)
完全删除数组中的多余元素-JavaScript
在不使用库函数的情况下使用真实/伪造的值展平数组-JavaScript
JavaScript在数组的伪索引处插入元素方法详解
PHP整数数据类型
PHP错误控制运算符
PHP类型杂耍详解
PowerShell版本7中引入了哪些新的Null运算符？
PowerShell中$ ErrorView的用途是什么？
PHP执行运算符
Java中的守护程序线程和用户线程之间的区别
如何知道是否在Javascript集中搜索值？
用JavaScript创建Set的方法？
我们如何用Java编码JSON对象？
什么是JavaScript集？

把实用的技术和经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
站点地图

登录找回密码

用户名

密码

记住我的登录信息

输入用户名或电子邮箱地址，您会收到一封新密码链接的电子邮件。

用户名或电子邮件地址

文章目录

繁