echarts 拖动markline，并计算中间区域的差值，标注红色虚线

最新推荐文章于 2024-05-23 12:02:30 发布
最新推荐文章于 2024-05-23 12:02:30 发布
阅读量208 收藏
点赞数 3
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43086723/article/details/138346850
版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入 echarts.js -->
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow">
		</script>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;" class="mychart"></div>
		<script type="text/javascript">
			var id = "main";
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			// 指定图表的配置项和数据
			var yName = '单位';
			var seriesData = [
				[0, 1],
				[1, 5],
				[2, 4],
				[3, 8],
				[4, 6]
			];
			var colors = ['#EE6666', '#48D1CC', '#FAC858', '#91CC75', '#EA7CCC',
				'#9A60B4', '#3BA272', '#FC8452', '#E53E71', '#5470C6'
			];
			var option = {
				color: colors,
				title: {
					text: "",
					textStyle: {
						// color: 'white',
						color: 'black',
						fontWeight: 400,
						fontSize: 16
					},
					left: 'center',
					top: '0%'
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						lineStyle: {
							color: "#888888"
						}
					}
				},
				legend: {
					top: "30",
					x: "center",
					textStyle: {
						//color: "white",
						color: "black",
						fontSize: 12
					},
				},
				toolbox: {
					show: true,
					feature: {
						dataView: {
							readOnly: false
						},
						magicType: {
							type: ['line', 'bar']
						},
						restore: {},
						saveAsImage: {}
					}
				},
				grid: {
					top: '20%',
					bottom: '15%',
					left: '2%',
					right: '10%',
					containLabel: true
				},
				xAxis: [{
					id: 'x0',
					type: "category",
					boundaryGap: true,
					axisLabel: {
						textStyle: {
							//color: "#FFF",
							color: "black",
							fontSize: 12
						}
					},
					axisLine: {
						show: true,
						lineStyle: {
							//color: "black",
							color: "black"
						}
					},
					axisTick: {
						show: false
					},
				}, {
					axisPointer: {
						show: false
					},
					axisLine: {
						show: false
					},
					position: "bottom",
					offset: 20
				}],
				yAxis: [{
					id: '2',
					name: yName,
					nameTextStyle: {
						//color: '#FFF',
						color: "black",
						fontSize: 12,
					},
					type: "value",
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: "black"
						}
					},
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							//color: "#FFF",
							color: 'black',
							fontSize: 12
						}
					},
					splitLine: {
						show: false
					}
				}],
				dataZoom: [{
					type: 'inside',
					xAxisIndex: 0,
					zoomLock: false,
					filterMode: 'empty',
				}],
				series: [{
					id: 'serie0',
					type: 'line',
					z: 1,
					data: seriesData,
					symbolSize: 10,
					symbol: 'circle',
					smooth: true,
					itemStyle: {
						normal: {
							color: '#EE6666'
							//color: 'rgba(0,245,255,0.9)' 蓝色
						}
					},
					emphasis: {
						focus: 'series'
					},
					markPoint: {
						symbol: 'pin',
						// 标记的数据，可以是最大值最小值也可以是自定义的坐标
						data: []
					},
				}, {
					id: 'vline',
					z: 2,
					data: seriesData,
					type: 'line',
					// 隐藏series
					symbolSize: 0,
					showSymbol: false,
					lineStyle: {
						width: 0,
						color: 'rgba(0, 0, 0, 0)'
					},
					markPoint: {
						symbol: 'pin',
						// 标记的数据，可以是最大值最小值也可以是自定义的坐标
						data: []
					},
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);

			//绘制垂直markLine
			myChart.setOption(getVlineOpt(0, 2));

			function getMarkAxis() {
				var result = new Object();
				var option = myChart.getOption();
				$.each(option.series, function(i, series) {
					if (series.id == 'vline') {
						var markLine = series.markLine;
						result['L1'] = markLine.data[0].xAxis;
						result['L2'] = markLine.data[1].xAxis;
						return false;
					}
				});
				return result;
			}

			function getVlineOpt(x1, x2, select) {
				if (x1 == null || x1 == undefined) {
					x1 = getMarkAxis()['L1'];
				}
				if (x2 == null || x2 == undefined) {
					x2 = getMarkAxis()['L2'];
				}
				var color1 = '#FFBE00';
				var color2 = '#FFBE00';
				if (select == 'L1') {
					color1 = '#111111';
				}
				if (select == 'L2') {
					color2 = '#111111';
				}

				var option = {
					series: [{
						id: 'vline',
						markLine: {
							symbol: 'none',
							silent: true,
							label: {
								show: true,
							},
							data: [{
								xAxis: x1,
								name: 'L1',
								lineStyle: {
									normal: {
										type: "dashed",
										width: 1,
										color: color1
									}
								}
							}, {
								xAxis: x2,
								name: 'L2',
								lineStyle: {
									normal: {
										type: "dashed",
										width: 1,
										color: color2
									}
								}
							}]
						},
						markPoint: {
							symbol: 'pin',
							// 标记的数据，可以是最大值最小值也可以是自定义的坐标
							data: []
						},
					}]
				};
				return option;
			}

			//绘制L值的graphic line
			var myHeight = myChart.getHeight() - 50;
			var myWidth = myChart.getWidth() - 50;
			
			myChart.setOption({
				graphic: {
					elements: [{
						type: 'rect',
						id: 'rect1',
						name: 'rect1',
						bottom: -myHeight,
						z: 10,
						invisible: true,
						shape: {
							width: 0,
							height: myHeight * 2
						},
						style: {
							fill: 'rgba(128,128,128,1)',
							stroke: 'rgba(128,128,128,1)',
							lineWidth: 6
						},
						// 转换坐标系上的点到像素坐标值
						position: [myChart.convertToPixel({
							xAxisId: 'x0'
						}, getMarkAxis()['L1']), 0],
						bouding: 'all',
						cursor: 'move',
						draggable: true,
						ondragstart: onLineDragStart,
						ondragend: onLineDragEnd
					}, {
						type: 'rect',
						id: 'rect2',
						name: 'rect2',
						bottom: -myHeight,
						z: 9,
						invisible: true,
						shape: {
							width: 0,
							height: myHeight * 2
						},
						style: {
							fill: 'rgba(128,128,128,1)',
							stroke: 'rgba(128,128,128,1)',
							lineWidth: 6
						},
						//转换坐标系上的点到像素坐标值
						position: [myChart.convertToPixel({
							xAxisId: 'x0'
						}, getMarkAxis()['L2']), 0],
						bouding: 'all',
						cursor: 'move',
						draggable: true,
						ondragstart: onLineDragStart,
						ondragend: onLineDragEnd
					}]
				}
			});

			//拖拽开始markline变色
			function onLineDragStart() {
				var graphicId = this.__ecGraphicId;
				if (graphicId == 'rect1') {
					myChart.setOption(getVlineOpt(null, null, 'L1'));
				} else if (graphicId == 'rect2') {
					myChart.setOption(getVlineOpt(null, null, 'L2'));
				}
			}

			//垂直线重新定位，拖拽结束markLine和graphic确定位置
			function onLineDragEnd() {
				//console.log(this.position);
				try {
					//转换像素坐标值到逻辑坐标系上的点，是convertToPixel的逆运算
					var x = getXAxis(this.position[0]);

					//markLine重新定位
					var vline_opt = {};
					var graphicId = this.__ecGraphicId;
					if (graphicId == 'rect1') {
						vline_opt = getVlineOpt(x, null);
					} else if (graphicId == 'rect2') {
						vline_opt = getVlineOpt(null, x);
					}
					myChart.setOption(vline_opt);

					//graphic重新定位
					var graph_opt = getGraphicOpt();
					myChart.setOption(graph_opt);


				} catch (e) {
					console.log('垂直线移动失败。');
					console.log(e);
				}
			}

			function getXAxis(Xpx) {
				var seriesData = getSeriesData(myChart, 'serie0');
				var x = myChart.convertFromPixel({
					xAxisId: 'x0'
				}, Xpx);
				if (x <= 0) {
					x = 0;
				} else if (x >= seriesData.length) {
					x = seriesData.length - 1;
				}
				return x;
			}

			function getSeriesData(myChart, serieId) {
				var data = [];
				try {
					var series = myChart.getOption().series;
					$.each(series, function(i, serie) {
						if (serie.id == serieId) {
							data = serie.data;
							return false;
						}
					});
				} catch (e) {
					console.log("获取数据失败。");
					console.log(e);
				}
				return data;
			}


			function onAreaDragEnd() {
				try {
					var x_start = getXAxis(this.position[0] - 5);
					var x_end = getXAxis(this.position[0] + this.shape.width + 5);

					//markLine重新定位
					var vline_opt = {};
					var result = getMarkAxis();
					if (result['L1'] < result['L2']) {
						vline_opt = getVlineOpt(x_start, x_end);
					} else {
						vline_opt = getVlineOpt(x_end, x_start);
					}
					myChart.setOption(vline_opt);

					//graphic重新定位
					var graph_opt = getGraphicOpt();
					myChart.setOption(graph_opt);

					//getX(id, x_start, x_end);
				} catch (e) {
					console.log('垂直线移动失败。');
					console.log(e);
				}
			}
			//graphic重新定位
			function getGraphicOpt() {
				var result = getMarkAxis();
				var option = {
					graphic: {
						elements: [{
								id: 'rect1',
								$action: 'merge',
								position: [myChart.convertToPixel({
									xAxisId: 'x0'
								}, result['L1']), 0]
							},
							{
								id: 'rect2',
								$action: 'merge',
								position: [myChart.convertToPixel({
									xAxisId: 'x0'
								}, result['L2']), 0]
							}
						]
					}
				};
				return option;
			}
			// 防止datazoom缩放，markline无法拖动
			myChart.on('dataZoom', (param) => {
				var graph_opt = getGraphicOpt();
				myChart.setOption(graph_opt);
			})
		</script>
	</body>
</html>
Mr.LiLong
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echart markline 设置不同颜色_CAD中设置好图层对于绘制一张漂亮的图纸非常重要！...
weixin_39887748的博客
12-24 261
有时候看到别人的图纸，图层设置得很漂亮，非常羡慕?其实，只要你肯花些时间，也可以把图层设置得非常好，下面我们一些来看看在AutoCAD中如何设置图层。对于新手或图形非常简单的情况，通常只需要设置如下几个图层就可以了：1、设置粗实线层，用来画轮廓线，标题栏，明细栏等表格外框。设置粗实线层时，需要选择线宽、线型和颜色。根据机械制图标准，线宽一般选0.5mm。线型不用多说，默认值不用改。颜色根据个人喜好...
echarts 虚实结合的折线图
大小都是愁的成长之路
01-05 2602
遇到实际与预测的需求时，经常会有趋势图实线与虚线结合的需求，分享一下实现关键点 首先，我们需要两条折线，一条实线(默认就是实线)，一条虚线 其次，处理数据（L1实线数据，L3虚线数据） 可以看见‘20’，‘55’是虚线的数据点，但是两点才能确定一条线，所以处于中间数据的‘20’ ，需要自己补充前后的数据‘40’，‘10’；处于最后的数据‘55’，需要自己补充前面的数据‘55’，其余数据补充为空、-、null都可以。 最后，处理一下tooltip让它只显示一条数据，而不是两条 ...
echart markline 标识线上增加文字的显示效果
YSH的专栏
10-24 2万+
echart 使用markline 标示线，增加标示线的文字显示，官方示例中没有，采用在标识线上增加一个散列点的方式来实现。 function filldata() { var max = 65; var label = '温度预警线'; $.showLoading("获取数据"); $.pos...
【Echarts】echarts渐变色平滑折线图，端点虚线标注
weixin_44100002的博客
03-09 774
echarts渐变色平滑折线图，端点虚线标注 echarts随意一个示例代码 直接点击上方链接↑↑↑将此段代码↓↓↓放到echarts的示例代码编辑框里： let dataList5 = { total: "123", list: [ { name: "00:00", value: 333, value1: 123 }, { name: "02:00", value: 144, value1: 23 }, { name: "04:00", value: 444, value
echarts添加多条辅助线（MarkLine）
夕降巫咸的博客
01-13 1万+
先上效果图 下面贴option代码 option = { title: { text: '多条MarkLine实例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}' },...
绘制多条Markline 并拖动
05-30
在echart中设置多条markline，并可以拖动（结合graphic实现）实时更新markline位置。代码简单易懂，不晦涩。
echarts实现折线图的拖拽效果
10-15
主要为大家详细介绍了echarts实现折线图的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
echarts图形上绘制可以拖动的游标线
10-31
通过echarts绘制曲线，在此基础上绘制n条可拖动的游标线，拖动游标线可在表格上显示当前游标对应曲线的y值
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
06-14
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题），大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run ...
echarts5.0 + vue 实现可拖拽点折线图并映射到K线
12-06
echarts5.0 + vue 实现可拖拽点折线图vuejavascript折线图数据映射到K线图
echarts 实线改变成虚线
热门推荐
行言Tang、
06-17 6万+
option = {     title: {         text: '折线图堆叠'     },     tooltip: {         trigger: 'axis'     },     legend: {         data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']     },     grid: {        
Vue + Echarts 使用markLine标线(precision精度问题)的填坑经历
罗锦天的博客
02-01 8768
Echarts 使用markLine标线的填坑经历在VUE实例中使用Echarts安装echarts依赖：编写代码：引入echarts对象：引入markLine对象：我的代码：这是我的markLine配置markLine效果：precision配置默认为2怎么办？填坑！修改配置一：修改配置二：修改后效果： 在VUE实例中使用Echarts 安装echarts依赖： npm install echa...
标线markLine的用法
weixin_30312659的博客
08-29 3524
series: [{ markLine: { itemStyle: { normal: { lineStyle: { type: 'solid', color:'#000' },label: { show: true, position:'left' } } }, data: [ ...
echarts分割线变虚线
qingfulang9322的博客
09-18 2万+
yAxis.splitLine Object 坐标轴在 grid 区域中的分隔线。 yAxis.splitLine.show boolean [ default: true ] 是否显示分隔线。默认数值轴显示，类目轴不显示。 yAxis.splitLine.interval number, Function [ default: 'auto' ] 坐标轴分隔线的显示间隔，在类目轴中有效。默认...
echarts 标记线markLine的使用
逆风优雅的博客
08-04 1万+
效果图： 在某个值处添加一条分割线。markLine写在 serise中。
vue源码之mustache模板引擎1
qweasl_的博客
05-21 382
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1187
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
最新发布
一个普通人
05-23 995
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 834
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
echarts 如何可以拖动markline
06-09
Echarts 中的 markline 组件默认是不能拖动的，但是我们可以通过监听鼠标事件和 markline 的位置属性，手动实现 markline 的拖动。 具体实现步骤如下： 1. 在 option 中定义 markline 组件，设置其相关属性，例如起点、终点、样式等。 2. 监听鼠标事件，当鼠标按下时，记录鼠标在图表中的位置和 markline 的起始位置。 3. 监听鼠标事件，当鼠标移动时，计算鼠标在图表中的位置与起始位置的差值，并将其加到 markline 的起始位置上。 4. 在 markline 上添加 draggable 属性，使其能够被拖动。同时，设置 label 的 position 为 'middle'，以保证 label 文字显示在 markline 上方。 下面是一个示例代码： ``` option = { // 其他配置项 series: [{ type: 'line', data: [10, 20, 30, 40, 50], markLine: { silent: true, // 取消鼠标点击事件 symbol: 'none', label: { position: 'middle', formatter: 'Markline' }, lineStyle: { color: '#333' }, data: [{ yAxis: 30 }] } }] }; var chart = echarts.init(document.getElementById('main')); var markline = chart.getModel().getComponent('series', 0).getMarkLineModel(0); var start = null; chart.getZr().on('mousedown', function(params) { start = chart.convertFromPixel({ gridIndex: 0 }, [params.offsetX, params.offsetY]); }); chart.getZr().on('mousemove', function(params) { if (!start) { return; } var end = chart.convertFromPixel({ gridIndex: 0 }, [params.offsetX, params.offsetY]); var diff = end[1] - start[1]; markline.option.data[0].yAxis += diff; start = end; chart.setOption({ series: [{ markLine: markline.option }] }); }); chart.getZr().on('mouseup', function(params) { start = null; }); markline.option.label.show = true; markline.option.draggable = true; ``` 在上述代码中，我们首先定义了一个 markline，设置其样式和位置。然后监听了鼠标事件，当鼠标按下时，记录 markline 的起始位置。当鼠标移动时，计算鼠标位置与起始位置的差值，并将其加到 markline 的起始位置上，从而实现 markline 的拖动。在 markline 上添加了 draggable 属性，使其能够被拖动，同时设置 label 的 position 为 'middle'，以保证 label 文字显示在 markline 上方。最后，我们将 markline 的 option 通过 setOption 方法设置到图表中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值