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

于 2024-04-30 15:18:45 发布
阅读量352 收藏 1
点赞数 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
关注
echarts的markline如何拖动
进击的WTVUA的博客
03-21 5405
背景 最近领导有个需求，在echarts的折线图上加一个参考线，可调整。愣是百度了半天都没找到代码。心想，一定是这个需求太小众，或者就是个烂需求。但领导要求的任务，当然是要咬着牙完成啦。 开整 echarts官网 1.绘制静态markLine 这部分看官网的教程就可以了。echarts还是很方便的，基本上都是通过配置数据就能显示图表了。 2.绘制可拖动的markLine 首先先说下思路： 一开始...
echarts拖拽echarts实现多条可拖动节点的折线图
qq_41438838的博客
08-18 1411
echarts拖拽echarts实现多条可拖动节点的折线图
绘制多条Markline 并拖动
05-30
在echart中设置多条markline，并可以拖动（结合graphic实现）实时更新markline位置。代码简单易懂，不晦涩。
echarts移动markline（拖拽单条markline）
qq_44309969的博客
11-21 1594
图表中需要一个移动的标线，辅助观察图表；
echart中画一条虚线
zongxing
01-08 4644
有个项目需要在echart中画出一条虚线，代码如下： option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { data: ['最高气温', '最低气温'] ...
echarts折线图两条数据的情况下tooltip显示两个数据的差值，并自定义tooltip样式
weixin_44705979的博客
09-12 953
echarts折线图两条数据的情况下tooltip显示两个数据的差值，并自定义tooltip样式
echarts图形上绘制可以拖动的游标线
10-31
通过echarts绘制曲线，在此基础上绘制n条可拖动的游标线，拖动游标线可在表格上显示当前游标对应曲线的y值
echarts实现折线图的拖拽效果
10-15
ECharts通过其option对象中的graphic组件定义各种图形元素，并利用draggable属性为这些图形元素添加拖拽功能。同时，利用echarts.util.map函数对数据集中的每个数据项执行操作，为每个数据点创建一个可拖拽的图形...
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
06-14
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题），大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run ...
echarts给多条markLine分割线添加graphic拖动功能，并实时根据dataZoom缩放而变化graphic位置
最新发布
weixin_44989721的博客
04-12 957
echarts的markLine添加拖动功能，并跟随dataZoom缩放实时变化
echarts 线条拖动例子
Jackchen9900的博客
08-05 794
echarts 线条拖动
echarts中markline移动
qq_45525250的博客
06-18 4194
需求要求：坐标轴上有俩条markline，并且可以单独移动？？？ 遇到这种需求我的第一反应就是上网百度，百度百度百度。 哦买噶，我多么希望有个一模一样的，但是结果还真是我想多了。 然后很头疼的自己去翻资料写。 思路：首先先画出俩条markline,分别为X0，X1；在markline俩线条中间，添加一个graphic矩形Area 其次在markline的X0，X1上各添加一个graphic矩形,确保X0，X1可移动，并且把矩形设置透明，并且这俩条Markline线条位置等于Area的矩形的位置
ECharts 标记线
qq_41997807的博客
04-15 1067
series: [ { name: '邮件营销', type: 'line', stack: '总量1', yAxisIndex: 1, data: [0, 10,20...
echarts实现误差线图
Actualee的博客
02-21 712
echarts误差线图的实现方法
echarts将网格线设置成虚线
热门推荐
MISS_CJL的博客
03-15 3万+
yAxis: { splitLine :{ //网格线 lineStyle:{ type:'dashed' //设置网格线类型 dotted：虚线 solid:实线 }, show:true //隐藏或显示 } } ...
echarts 折线图设置标记线 自定义值
qq_36702286的博客
11-09 1292
基准线 配置在markLine上。
ECharts的markline 自定义端点样式
豆。的博客
08-20 6623
在ECharts中设置markline标线，当标线type为average，max，min时(平均，最大，最小)，ECharts给出的默认样式为一条Y轴开始指向另一端的单向箭头线 具体可参考ECharts文档配置项markline 效果如下： 代码如下： //完整版代码 option = { xAxis: { type: 'category', dat...
echarts series设置标准线markLIne
tfytianfengyang的博客
11-22 1632
echarts series设置标准线markLIne
【Echarts】markLine自定义位置及样式
芳草萋萋鹦鹉洲哦
04-13 7840
symbol : [ 'none' , 'arrow' ] , // none为标线两端的样式为无，可更改 data : [ {silent : false , yAxis : 50 , // 警戒线位置，这个赋值为纵轴50 label : {position : 'end' , // 文字位置 formatter : '标准供给时长' , //文字 color : 'green' // 文字颜色 } , lineStyle : {
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、付费专栏及课程。

余额充值