ajax+json模拟一个页面多个统计图数据交互

最新推荐文章于 2022-05-02 18:35:24 发布
最新推荐文章于 2022-05-02 18:35:24 发布
阅读量499 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36538012/article/details/100739169
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>五分钟上手饼图</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 引入 echarts.js -->
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>

	</head>

	<body>

		<div class="page-container">

			<!-- 统计图模块	 -->
			<div class="row">
				<div class="col-md-12  col-sm-12  col-xs-12">
					<!-- 左侧饼图 -->
					<div class="col-md-2  col-sm-2  col-xs-2" style="width: 21%">

						<div class="charts2">
							<div id="main1" style="height: 180px;"></div>
						</div>
					</div>

					<!-- 右侧统计图 -->
					<div class="col-md-5  col-sm-5  col-xs-5" style="width: 39%;">
						<div class="charts4">
							<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
							<div id="main" style="width: 500px; height: 200px;"></div>
						</div>
						<div class="charts5">
							<div id="main2" style="width: 500px; height: 200px;"></div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-12  col-sm-12  col-xs-12 charts6">
						<div id="main3" style="width: 500px;height: 200px;"></div>
					</div>
				</div>

				<!-- 底部统计图 -->
				<div class="col-md-12  col-sm-12  col-xs-12  bottom">
					<div class="col-md-7  col-sm-7  col-xs-7  charts7">
						<div id="main4" style=" height: 200px;"></div>
					</div>
					<div class="col-md-5  col-sm-5  col-xs-5  charts8">
						<div id="main5" style="width: 600px; height: 200px;"></div>
					</div>
				</div>
			</div>

		</div>

		<script type="text/javascript">
			$.ajax({
				url: "test.json",
				data: {},
				type: 'GET',
				success: function(data) {
					alert(JSON.stringify(data))
					aFun(data.echatX, data.echatY);
					bFun(data);
					cFun(data.echatX, data.echatY);
					dFun(data.echatX, data.echatY);
					eFun(data.echatX, data.echatY);
					fFun(data.echatX, data.echatY);
				},
			});

			// =============右上侧柱状图==============
			var aChart = echarts.init(document.getElementById('main'));

			function aFun(x_data, y_data) {

				// 指定图表的配置项和数据
				aChart.setOption({
					title: {},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {　
						splitLine: {　　　　 show: false　　 },
						/* 改变x轴颜色 */
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},
						data: x_data,
					},
					yAxis: {　
						splitLine: {　　　　 show: false　　 },
						type: 'value',
						scale: true,
						name: '心率值',
						max: 150,
						min: 0,
						splitNumber: 5,
						// 改变y轴颜色
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},
					},
					series: [{
						name: '巡检达标率',
						type: 'bar',
						// 设置柱状图大小
						barWidth: 20,
						// 设置柱状图渐变颜色
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: "#1268f3" // 0% 处的颜色
								}, {
									offset: 0.6,
									color: "#08a4fa" // 60% 处的颜色
								}, {
									offset: 1,
									color: "#01ccfe" // 100% 处的颜色
								}], false)
							}
						},
						data: y_data,
					}]
				});
			}

			// ==============左侧饼状图==============
			var bChart = echarts.init(document.getElementById('main1'));

			function bFun(param) {
				// 指定图表的配置项和数据
				bChart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					series: [{
						name: '统计人数',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								rich: {
									a: {
										color: '#999',
										lineHeight: 22,
										align: 'center'
									},
									b: {
										fontSize: 16,
										lineHeight: 33
									},
								}
							}
						},
						data: [
							/* { value: 12, name: '管理', itemStyle: { color: '#5f4b9c' } },
							  { value: 3, name: '炼钢工', itemStyle: { color: '#2e73ba' } },
							  { value: 4, name: '操作工', itemStyle: { color: '#7aa83a' } },*/

							{
								value: param.peopleOutline,
								name: '在线',
								itemStyle: {
									color: '#005eff'
								}
							},
							{ value: param.peopleOnline, name: '离线', itemStyle: { color: '#ff9194' } },
						]
					}]
				});
			}

			// ==============右上侧第二个折线图==============
			// 基于准备好的dom，初始化echarts实例
			var cChart = echarts.init(document.getElementById('main2'));

			function cFun(x_data, y_data) {
				// 指定图表的配置项和数据
				cChart.setOption({
					title: {

					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['近七日收益']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},

					xAxis: {　
						splitLine: {　　　　 show: false　　 },
						// 改变x轴颜色
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},

						type: 'category',
						boundaryGap: false,
						data: x_data,
					},
					yAxis: {　
						splitLine: {　　　　 show: false　　 },

						type: 'value',
						scale: true,
						name: '心率值',
						max: 150,
						min: 0,
						splitNumber: 5,
						// 改变y轴颜色
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},
					},
					series: [

						{
							name: '',
							type: 'line',
							symbol: 'circle', // 折线点设置为实心点
							symbolSize: 6, // 折线点的大小
							itemStyle: {
								normal: {
									color: "#1bdaf8", // 折线点的颜色
									lineStyle: {
										color: "#0d427e" // 折线的颜色
									}
								}
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
										offset: 0,
										color: "#0e4b7a" // 0% 处的颜色
									}, {
										offset: 0.6,
										color: "#0d3f70" // 60% 处的颜色
									}, {
										offset: 1,
										color: "#0c3367" // 100% 处的颜色
									}], false)
								}
							},

							stack: '总量',
							data: y_data
						}
					]
				});
			}

			// ==============中间满屏折线图==============
			// 基于准备好的dom，初始化echarts实例

			var dChart = echarts.init(document.getElementById('main3'));
			// 指定图表的配置项和数据
			function dFun(x_data, y_data) {
				dChart.setOption({

					title: {
						left: 'left',
						text: '概率',
						show: false
					},
					tooltip: {
						trigger: 'axis',
						formatter: '{a}:{c}',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					grid: {
						show: false,
						top: '30',
						bottom: '60',
						right: '60',
						left: '60'
					},
					legend: {
						show: true,
						selectedMode: 'single', // 设置显示单一图例的图形，点击可切换
						bottom: 10,
						left: 50,
						textStyle: {
							color: '#666',
							fontSize: 12
						},
						itemGap: 20,
						data: ['设备一', '设备二', '设备三'],
						inactiveColor: '#ccc'
					},
					xAxis: {
						splitLine: {　　　　 show: false　　 },
						type: 'category',
						data: x_data,
						axisPointer: {
							type: 'shadow'

						},
						// 改变x轴颜色
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},

						axisTick: {
							show: true,
							interval: 0
						},

					},

					// 设置两个y轴，左边显示数量，右边显示概率
					yAxis: [{
							splitLine: {　　　　 show: false　　 },
							type: 'value',
							name: '数量',
							max: 1000,
							min: 0,

							show: true,
							interval: 500,
							// 改变y轴颜色
							axisLine: {
								lineStyle: {
									color: '#00a2e2',
									width: 1, // 这里是为了突出显示加上的
								}
							},
						},

						// 右边显示概率
						{
							splitLine: {　　　　 show: false　　 },
							type: 'value',
							name: '概率',
							min: 0,
							max: 100,
							interval: 10,
							// 改变y轴颜色
							axisLine: {
								lineStyle: {
									color: '#00a2e2',
									width: 1, // 这里是为了突出显示加上的
								}
							},
							axisLabel: {
								formatter: '{value} %'
							}
						}

					],

					// 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
					series: [{
							name: '设备一',
							type: 'bar',
							symbol: 'circle', // 折线点设置为实心点
							symbolSize: 6, // 折线点的大小
							itemStyle: {
								normal: {
									color: "#1bdaf8", // 折线点的颜色
									lineStyle: {
										color: "#0d427e" // 折线的颜色
									}
								}
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
										offset: 0,
										color: "#0e4b7a" // 0% 处的颜色
									}, {
										offset: 0.6,
										color: "#0d3f70" // 60% 处的颜色
									}, {
										offset: 1,
										color: "#0c3367" // 100% 处的颜色
									}], false)
								}
							},
							data: y_data,
							barWidth: '50%',

						},
						{
							name: '设备一',
							type: 'line',
							symbol: 'circle', // 折线点设置为实心点
							symbolSize: 6, // 折线点的大小
							itemStyle: {
								normal: {
									color: "#1bdaf8", // 折线点的颜色
									lineStyle: {
										color: "#0d427e" // 折线的颜色
									}
								}
							},

							yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
							data: y_data,
							symbolSize: 10,
							itemStyle: {
								normal: {
									color: "#DDA0DD"
								}

							}
						},

					]

				});
			}

			// ==============底部第一个折线图==============
			// 基于准备好的dom，初始化echarts实例
			var eChart = echarts.init(document.getElementById('main4'));
			// 指定图表的配置项和数据
			function eFun(x_data, y_data) {
				eChart.setOption({
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['近七日收益']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},

					xAxis: {　
						splitLine: {　　　　 show: false　　 },
						// 改变x轴颜色
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},

						type: 'category',
						boundaryGap: false,
						data: x_data,
					},
					yAxis: {　
						splitLine: {　　　　 show: false　　 },

						type: 'value',
						scale: true,
						name: '心率值',
						max: 150,
						min: 0,
						splitNumber: 10,
						// 改变y轴颜色
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},
					},
					series: [

						{
							name: '近七日收益',
							type: 'line',
							symbol: 'circle', // 折线点设置为实心点
							symbolSize: 6, // 折线点的大小
							itemStyle: {
								normal: {
									color: "#1bdaf8", // 折线点的颜色
									lineStyle: {
										color: "#0d427e" // 折线的颜色
									}
								}
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
										offset: 0,
										color: "#0e4b7a" // 0% 处的颜色
									}, {
										offset: 0.6,
										color: "#0d3f70" // 60% 处的颜色
									}, {
										offset: 1,
										color: "#0c3367" // 100% 处的颜色
									}], false)
								}
							},
							stack: '总量',
							data: y_data,
						}
					]
				});
			}
			// ==============底部柱状图==============
			var fChart = echarts.init(document.getElementById('main5'));
			// 指定图表的配置项和数据
			function fFun(x_data, y_data) {
				fChart.setOption({
					title: {

					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {　
						splitLine: {　　　　 show: false　　 },
						// 改变x轴颜色
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},

						data: x_data,
					},
					yAxis: {　
						splitLine: {　　　　 show: false　　 },

						type: 'value',
						scale: true,
						name: '心率值',
						max: 150,
						min: 0,
						splitNumber: 10,
						// 改变y轴颜色
						axisLine: {
							lineStyle: {
								color: '#00a2e2',
								width: 1, // 这里是为了突出显示加上的
							}
						},
					},
					series: [{
						name: '巡检达标率',
						type: 'bar',
						// 设置柱状图大小
						barWidth: 20,
						// 设置柱状图渐变颜色
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: "#e12251" // 0% 处的颜色
								}, {
									offset: 0.6,
									color: "#df635a" // 60% 处的颜色
								}, {
									offset: 1,
									color: "#e79363" // 100% 处的颜色
								}], false)
							}
						},
						data: y_data,
					}]
				});

			}
		</script>
	</body>

</html>

test.json

{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        0,
        10,3,43,5,47,8,39,0,1
    ],
    "echatY2": [
        0
    ],
    "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
}
祈澈菇凉
关注
专栏目录
echart_ajax
12-21
使用jquery ajax 向后台controller发送请求，后台返回数据到页面，使用echarts进行图形展示。可以参考下前后台的数据交互
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
综上所述，这个项目展示了如何整合Echarts、AJAX、Java和MySQL，实现数据驱动的动态图表展示，为数据分析和交互式Web应用提供了一个实用的示例。在实际开发中，这样的组合可以广泛应用于监控系统、报表系统等各种...
统计图实现ajax 变换,使用echarts+ajax实现数据可视化统计
weixin_33282146的博客
08-05 498
第一步 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。第二步 加载ECharts js第三步 通过echarts.init初始化一个通过echarts 然后使用ajax加载后台数据// 基于准备好的dom，初始化echarts实例var myChart = document.getElementById('main');var myContainer = echarts.i...
echarts画圆环统计图并加载动态数据 （ajax获取数据）
热门推荐
小易的博客
11-01 1万+
最近，要用到echarts画饼图统计图，于是学习了会，附上echarts官网 http://echarts.baidu.com/doc/example.html 看到echarts有一些饼图实例，代码如下： option = {     tooltip : {         trigger: 'item',         formatter: "{a} {b} : {c}
Ajax+JSON
Ein_Blatt的博客
12-02 237
Ajax:无刷新:不断刷新整个页面,只刷新局部(只更新部分页面，有效利用带宽，提供连续的用户体验,提供类似C/S的交互效果，操作更方便) XMLHttpRequest 事件 （onreadystatechange）:指定回调函数 常用属性(readyState):XMLHttpRequest的状态信息 整个Ajax技术的核心 提供异步发送请求的能力 常用方法 方...
echart实现ajax动态数据加载(前台js代码)
areen7003的博客
03-10 352
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 显示标题，图例和空的坐标轴 myChart.setOption({ ...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图-Java代码类资源
02-23
- **柱状图**：用于比较不同类别的数量或频率，每一栏代表一个类别，高度表示值的大小，适合于分类数据的定量比较。 在实现过程中，首先，Java后端通过JDBC连接MySQL数据库，执行SQL语句获取数据；然后，将数据...
数据统计报表实时更新springmvc+ajax+highcharts
06-05
在这个项目中，我们使用了SpringMVC、Ajax以及Highcharts这三种技术来实现一个动态更新的数据统计报表系统。 SpringMVC是Spring框架的一部分，是一个模型-视图-控制器（MVC）架构的Web应用框架。它负责处理HTTP请求...
jQuery中将json数据显示到页面表格的方法
10-18
2. **JSON数据的模拟**：示例中使用JavaScript创建了一个名为`stu`的数组，数组中包含多个对象，每个对象代表一条数据记录，具有`name`（姓名）、`sex`（性别）和`age`（年龄）三个属性。 ```javascript var stu = ...
json饼状图数据图表特效代码
03-20
在数据分析和可视化中，饼状图是一个常用且直观的工具。 "json饼状图数据图表特效代码"指的是使用JSON数据来生成带有特效的饼状图的代码示例。这个代码可能使用了jQuery库，一个广泛使用的JavaScript库，它简化了...
Echarts通过Ajax实现动态数据加载
03-29
Echarts通过Ajax实现动态数据加载，Echarts通过Ajax实现动态数据加载。
Echarts实例(ajax)
12-22
Echarts实例，包括js和后台代码，数据库视图，功能为根据多个条件来显示折线图，以及datatable表格
利用ajax做的柱状图，线性统计图，饼状图
weixin_30858241的博客
03-29 249
柱状图，两个不同类型的数据 以下是html页面代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://ww...
利用ajax获取echarts图表的数据
豆豆熊博客
02-06 2204
ECharts是由百度打造的一个纯javascript的图标库，很好用。 下载地址：http://echarts.baidu.com/download.html 1. echarts文件的引入,在javascript块引入，src按需修改 script type="text/javascript" src="./res/js/echarts.js">script> 2. 基于准备好的
echart ajax json,echart多条折线图ajax请求json数据
weixin_42097967的博客
08-06 234
//折线图$.ajax({url:"test.json",data: {},type:‘GET‘,success:function(data) {console.log(JSON.stringify(data))bloodFun(data.echatX, data.echatY,data.echatY2);},});//基于准备好的dom，初始化echarts实例var bloodChart = ...
echarts通过ajax加载数据渲染多个曲线图表（折线图）
wchqzhy99的专栏
01-20 1550
折线图 官网示例 后台返回数据类型 实现echarts效果要求的数据类型 代码部分 最终展示效果 官网示例 官网示例链接 后台返回数据类型 实现echarts效果要求的数据类型 代码部分 分析：X轴月数据 Y轴申请数量 填充数据为—每个月中产品变化趋势 难点： 如果该产品在某月没有对应数量变化，需将数值赋为0 HTML <div class="applicat...
Echart通过Ajax获取数据
qazxsw635241的博客
07-24 540
1、前端页面： var myChartState = null; function getStateChart() { myChartState = echarts.init(document.getElementById('state')); // 定义图表options var options = { title : { ...
echart：表格动态加载（ajax）
冷雨清的博客
12-22 160
echarts.json(模拟数据) { "code": 200, "msg": "请求成功", "data": { "date": [ "2020-12-01", "2020-12-02", "2020-12-03", "2020-12-04", "2020-12-05", "2020-12-06", "2020-12-07", "2020-12-08", "2020-12-09
通过ajax异步交互实现echarts绘图,并附带疫情数据可视化项目。
dyjffgkvfg的博客
05-02 3800
目录前言1.引入库2.flask链接MYSQL读取数据3.HTML页面echarts绘图4.结果实现总结：ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 遵循 Apache-2.0 开源协议，免费商用。ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。AJAX = Asynchronous JavaScript and XML（异步的 JavaS
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值