前台展示echarts折线图

最新推荐文章于 2024-01-09 09:47:20 发布

Mr_ZhangAdd

最新推荐文章于 2024-01-09 09:47:20 发布

阅读量565

点赞数

分类专栏：前端 Echarts

本文链接：https://blog.csdn.net/Mr_ZhangAdd/article/details/88571849

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Echarts

2 篇文章 0 订阅

订阅专栏

刚开始使用的是morris后来发现，x轴传时间怎么传都显式不完整，遂采用echarts

效果如下：

首先引入echarts.common.min.js

然后定义 <div id="container" style="height: 100%"></div>

然后进行设置：具体代码如下

<!DOCTYPE html>
<html style="height: 100%">

	<head>
		<meta charset="utf-8">
	</head>

	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 100%"></div>
		<script type="text/javascript" src="js/echarts.common.min.js"></script>

		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('container'));
			// 指定图表的配置项和数据
			var option = {
				tooltip: {
					trigger: 'axis',
					position: function(pt) {
						return [pt[0], '10%'];
					}
				},
				title: {
					left: 'center',
					text: '展示图',
				},
				toolbox: {
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value',
					boundaryGap: [0, '100%']
				},
				dataZoom: [{
					type: 'inside',
					start: 0,
					end: 100
				}, {
					start: 0,
					end: 10,
					handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
					handleSize: '80%',
					handleStyle: {
						color: '#fff',
						shadowBlur: 3,
						shadowColor: 'rgba(0, 0, 0, 0.6)',
						shadowOffsetX: 2,
						shadowOffsetY: 2
					}
				}],
				series: [{
					name: '模拟数据',
					type: 'line',
					smooth: true,
					symbol: 'none',
					sampling: 'average',
					itemStyle: {
						color: 'rgb(255, 70, 131)'
					},
					areaStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgb(255, 158, 68)'
						}, {
							offset: 1,
							color: 'rgb(255, 70, 131)'
						}])
					},
					data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据
				}]
			};
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}

// 下面是一个完整的ajax 赋值操作
/*			$("#search").click(function() {
				// 开始时间
				var startTime = $("#beginTime").val();
				// 结束时间
				var endTime = $("#endTime").val();
				// 指标名称
				var indicatorsName = $("#indicatorsName").val();
				// CMDN配置名称
				var nameforCMDB = $("#nameforCMDB").val();

				if(nameforCMDB && indicatorsName) {
					var indicatorsData = {
						startTime: startTime,
						endTime: endTime,
						indicatorId: indicatorsName,
						configId: nameforCMDB
					};

					$.ajax({
						url: "/dbPerformance/dbIndicatorsData", // 请求url
						type: "get", // 提交方式
						dataType: "json", // 数据类型
						data: indicatorsData,
						success: function(res) { // 提交成功的回调函数
							var datae = res.data;
							var date = [];
							var data = [];
							// for循环后台台数据 进行重组
							for(var i = 0; i < datae.length; i++) {
								date.push(datae[i].time)
								data.push(datae[i].indicatorValue)
							}
							
							// 给x轴赋值时间
							option.xAxis.data = date
							// 给y轴赋值 value
							option.series[0].data = data
							// 当鼠标移上去显式   $("#indicatorsName").find("option:selected").text() 的值   【可以自定义】
							option.series[0].name = $("#indicatorsName").find("option:selected").text()
							// 将设置好的echart赋值生效
							myChart.setOption(option);
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							alert(textStatus);
						}
					});
				}
			});*/
		</script>
	</body>

</html>

Mr_ZhangAdd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前台展示echarts折线图

刚开始使用的是morris后来发现，x轴传时间怎么传都显式不完整，遂采用echarts效果如下：首先引入echarts.common.min.js然后定义&lt;div id="container" style="height: 100%"&gt;&lt;/div&gt;然后进行设置：具体代码如下&lt;!DOCTYPE html&gt;&lt;html style...
复制链接

扫一扫