echarts怎么做实时动态的折线图

Posted 2023-04-11

参考技术A 1、创建折线图的数据区（包括年份和数据）2、仅选择数据区创建折线图（插入选项卡/图表工具组/折线图）3、得到的折线图x坐标不满足要求，在图表区单击鼠标右键，选择“选择数据”，进入“选择数据源”对话框4、单击对话框右侧“水平分类轴标签”下的“编辑”按钮5、选择对应x坐标轴的年份区域6、单击确定可见年份数据更改了图表的x轴坐标系列。

后台获取数据实现实时折线图

　　折线图用的是echarts的折线图。框架用的ssm，连接oracle数据库，将数据实时显示在折线图上。

 

<div id="main" style="width: 95%; height: 60%; margin: auto;"></div>

 

<script>
function showEcharts() {
	　　　　　　　　　　　　　　require(
		　　　　　　　　　　　　　　[ ‘echarts‘, ‘echarts/chart/line‘ ],
								function(ec) {
									// 基于准备好的dom，初始化echarts图表
									var myChart = ec.init(document.getElementById(‘main‘));
									var option = {
										title : {
											text : ‘实时数据‘
										},
										tooltip : {
											trigger : ‘axis‘ //鼠标悬浮的时候出现数据
										},
										legend : {
											data : []
										// data:[‘最新成交价‘，‘最新事件‘]	 可以在这里写多个，然后在magicType中进行切换
										},
										toolbox : {
											show : true,
											feature : {
												mark : {
													show : false
												},
												dataView : {
													show : false,
													readOnly : false
												},
												magicType : {
													show : false,
													type : [ ‘line‘ ]
												},
												restore : {
													show : false
												},
												saveAsImage : {
													show : false
												}
											}
										},
										dataZoom : {
											show : false,
											start : 0,
											end : 100
										},
										xAxis : [
												{
													type : ‘category‘,
													boundaryGap : true,
													data : (function() {
														var now = new Date();
														var res = [];
														var len = 10; //x轴长度为10
														while (len--) {
															res.unshift(now.toLocaleTimeString().replace(
															/^\D*/,	‘‘));
															now = new Date(
																now - 100); //x轴加载时以一秒为单位
														}
														return res;
													})()
												}, ],
										yAxis : [ {
											type : ‘value‘,
											scale : true,
											name : ‘电压‘,
											scale : true,
											boundaryGap : [ 0.2, 0.2 ]
										} ],
										series : [
		 										{
													name : ‘预购队列‘,
													type : ‘bar‘,
													xAxisIndex : 1,
													yAxisIndex : 1,
													data : (function() {
														var res = [];
														var len = 10;
														while (len--) {
															res.push(Math.round(Math.random() * 1000));
														}
														return res;
													})()
												}, {
													name : ‘最新成交价‘,
													type : ‘line‘,
													data : (function() {
														var res = [];
														var len = 10;
														while (len--) {
															res.push(0); //刚加载时x轴的数据设为0
														}
														return res;
													})()
												} ]
									};
									;
									myChart.setOption(option);
										axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, ‘‘);

										// 动态数据接口 addData
										myChart.addData([ [ 0, // 系列索引
										1, // 新增数据
										true, // 新增数据是否从队列头部插入
										false // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
										], [ 1, // 系列索引
										$("#Battery_V").html(), //新增数据（这里是我在后台获取的数据）
										false, // 新增数据是否从队列头部插入
										false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
										axisData // 坐标轴标签
										] ]);
									}, 3000);
								});
					}
					require.config({
						paths : {
							echarts : ‘http://echarts.baidu.com/build/dist‘
						}
					});
				</script>