echarts的折线图一个横坐标，多个纵坐标，纵坐标值使用文字的实战2

最新推荐文章于 2024-06-07 11:23:28 发布

勤快的小蚂蚁

最新推荐文章于 2024-06-07 11:23:28 发布

阅读量5k

点赞数 2

分类专栏： FrontEnd

本文链接：https://blog.csdn.net/fxzzq/article/details/103061974

版权

FrontEnd 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>当前的指标查看</title>
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>

	<body>
		<div id="main" style="width: 100%;height: 340px; ">
			<!-- 曲线 -->
		</div>
		<script>
			var myChart = echarts.init(document.getElementById('main'),'dark');
			
			var warnTime = [];
			var base = +new Date(1968, 9, 3);
			var oneDay = 24 * 3600 * 1000;

			var data = [Math.random() * 300];
			
			
			for(var i = 1; i < 8; i++) {
				var now = new Date(base += oneDay);
				warnTime.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
				
			}
			
					//warnTime.push((new Date(data[i].warnTime)).Format("yyyy/MM/dd hh:mm:ss"));
				
			
			option = {
				title: {
					text: '历史报警曲线'
				},
				tooltip: { //框浮层内容格式器  提示框组件
					trigger: 'axis',
					formatter: '{b}'+'<br>'+'{a0}:{c0}' + '<br>' + '{a1}:{c1}' + '<br>' + '{a2}:{c2}' + '<br>'+'{a3}:{c3}'
				},
				legend: {
					x: 'right',
					data: ['指标1', '指标2', '指标3', '指标4'],
					textStyle: {
						color: "#fff",
						fontsize: 25
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				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
					}
				}],

				xAxis: {
					type: 'category',
					boundaryGap: true,
					data: warnTime
				},
				yAxis: [{
						boundaryGap: [0, '50%'],
						axisLine: {
							lineStyle: {
								color: '#0B438B'
							}
						},
						type: 'category',
						name: '指标1',
						position: 'left',
						offset: 50,
						//splitNumber: 1,
						//min: 0,
						//max: 1,
						axisLabel: {
							formatter: function(value, index) {
								//	var lg_warnflag= [','异常'];

								return value;
							},

							textStyle: {
								color: '#fff'
							}
						},
						splitLine: {
							show: false,
						},
					},
					{
						boundaryGap: [0, '50%'],
						axisLine: {
							lineStyle: {
								color: '#0B438B'
							}
						},
						splitLine: {
							show: false,
						},
						type: 'category',
						name: '指标2',
						position: 'left',
						//            min:0,
						//            max:100,
						axisLabel: {
							formatter: function(value, index) {

								return value;
							}
						}
					},
					{
						boundaryGap: [0, '50%'],
						axisLine: {
							lineStyle: {
								color: '#0B438B'
							}
						},
						splitLine: {
							show: false,
						},
						type: 'category',
						name: '指标3',
						position: 'right',
						//            min:0,
						//            max:600,
						axisLabel: {
							formatter: function(value, index) {
								//	var lg_warnflag= [','异常'];

								return value;
							}
						},
						axisTick: {
							inside: 'false',
							length: 10,
						}
					}, {
						boundaryGap: [0, '50%'],
						axisLine: {
							lineStyle: {
								color: '#0B438B'
							}
						},
						splitLine: {
							show: false,
						},
						type: 'category',
						name: '指标4',
						offset: 50, //坐标轴移动50mm
						position: 'right',
						//            min:0,
						//            max:600,
						axisLabel: {
							formatter: function(value, index) {
								//	var lg_warnflag= [','异常'];

								return value;
							}
						},
						axisTick: {
							inside: 'false',
							length: 10,
						}
					},
				],
				series: [{
						name: '指标1',
						type: 'line',
					//	step: 'middle',
						data: ['正常', '正常', '正常', '异常', '正常', '正常', '正常'],
						yAxisIndex: 0,
					},
					{
						name: '指标2',
						type: 'line',
						//step: 'start',
						data: ['正常', '正常', '正常', '异常', '正常', '正常', '正常'],
						yAxisIndex: 1,
					},
					{
						name: '指标3',
						type: 'line',
						//step: 'end',
						data: ['正常', '正常', '正常', '一级', '正常', '正常', '正常'],
						yAxisIndex: 2,
					},
					{
						name: '指标4',
						type: 'line',
					//	step: 'end',
						data: ['正常', '正常', '正常', '一级', '二级', '正常', '正常'],
						yAxisIndex: 3,
					}
				]
			};
			myChart.setOption(option);
			window.onresize = myChart.resize;
		</script>
	</body>
</html>

折现效果图

勤快的小蚂蚁

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts的折线图一个横坐标，多个纵坐标，纵坐标值使用文字的实战2

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>当前的指标查看</title> <script type="text/javascript" src="js/echarts.js"></script> </he...
复制链接

扫一扫