echarts 实现可左右滚动折线图，适用app布局

最新推荐文章于 2024-06-08 21:17:27 发布

FullStack-KJ

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量3.9k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/dashenid/article/details/106671805

版权

html 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

效果图：

主要代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<style>
			html,body {
				width: 100%;
				height: 100%;
				background-color: skyblue;
			}
			body {
				font-size: 12px;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			#container {
				width: 100%;
				height: 50%;
			}
		</style>
	</head>

	<body>

		<div id="container"></div>
		<script type="text/javascript">
			mui.init();
		</script>

		<script type="text/javascript">
			var dom = document.getElementById("container");
			console.log(dom.clientWidth);
			var myChart = echarts.init(dom);

			var date = [];
			var pictorialBar = [];
			var data = [];

			for (var i = 1; i < 240; i++) {
				date.push(i + ":00");
				if (i == 21 || i == 19) {
					data.push("—");
					pictorialBar.push("—");
				} else {
					var number = Math.ceil(Math.random() * 100);
				
					pictorialBar.push({
						value: number
					})
					data.push({
						value: number,
						itemStyle: {
							color: "blue"
						},
						label: {
							color: "white"
						}
					});
				}

			}

			var max = Math.max.apply(Math, data);
			var min = Math.min.apply(Math, data);

			option = {
				animation: false,

				grid: {

					left: '0',
					right: '0',
					bottom: '30px',

				},
				tooltip: {
					trigger: 'axis',
					position: function(pt) {
						return [pt[0], '10%'];
					}
				},
				title: {
					left: 'center',
					text: null,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					show: false
				},
				// tooltip: {
				// 	show:false
				// },
				xAxis: {
					type: 'category',
					// boundaryGap: false,
					data: date,
					axisLabel: {
						color: "white"
					},
					axisLine: {
						lineStyle: {
							color: "white"
						}
					}
				},
				yAxis: {
					type: 'value',
					boundaryGap: [0, '100%'],
					max: 110,
					min: 0,
					show: false
				},
				dataZoom: [{
					type: 'inside',
					start: 100 - 100 / data.length * (dom.clientWidth / 40),
					end: 100,
					zoomOnMouseWheel: false,
					zoomLock: true,
				}],
				series: [{
					name: '值',
					type: 'line',
					// smooth: true,
					sampling: 'average',
					symbol: "circle",
					symbolSize: 12,
					itemStyle: {
						color: 'white'
					},
					lineStyle: {
						color: "white",
						width: 1,
						opacity: 0.8
					},
					label: {
						show: true,
						position: "top",
						// distance:10,
						formatter: "{c}",
					},
					areaStyle: {
						color: 'rgb(255, 255, 255)',
						opacity: 0.2
						// new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						// 	offset: 0,
						// 	color: 'rgb(255, 158, 68)'
						// }, {
						// 	offset: 1,
						// 	color: 'rgb(255, 70, 131)'
						// }])
					},
					data: data
				}, {
					name: 'dotted',
					type: 'pictorialBar',
					symbol: 'rect',
					itemStyle: {
						normal: {
							color: 'rgba(255,255,255,0.5)'
						}
					},
					symbolRepeat: true,
					symbolSize: [1, 4],
					symbolMargin: 1,
					z: -10,
					data: pictorialBar
				}]
			};

			myChart.setOption(option, true);
			myChart.on('click', function(params) {
				// 控制台打印数据的名称
				console.log(params.name);
			});
		</script>
	</body>

</html>

FullStack-KJ

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts 实现可左右滚动折线图，适用app布局

效果图：主要代码：<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
复制链接

扫一扫