echarts中markline移动，x轴绘制俩条垂直移动线

已于 2022-07-26 14:31:22 修改
阅读量4.4k 收藏 19
点赞数 4
分类专栏： echarts 文章标签： echarts 前端 javascript
于 2022-07-26 14:30:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45525250/article/details/125993759
版权

需求要求：坐标轴上有俩条垂直markline，并且可以单独移动

移动垂直markline

思路：首先先画出俩条markline,分别为X0，X1；在markline俩线条中间，添加一个graphic矩形Area
其次在markline的X0，X1上各添加一个graphic矩形,确保X0，X1可移动，并且把矩形设置透明，并且这俩条Markline线条位置等于Area的矩形的位置
最后，将线条靠近边缘化Area，改变位置后重新SetOption。

看下边代码时，您需要知道以下：

之前写的多个eachrt图形，挪动其一，其他都挪动的联动版，原文链接附上：echarts中markline移动。是为了自己后边翻开笔记，然后很多人说，没办法实现，然后我删减了一些其他代码，附上这个可以直接挪动的。(请忽略tooltip中出现重复的曲线提示，如果你不想要出现重复，请你观看echarts隐藏掉一条曲线，并且tooltip提示框中不显示，链接附下：
echarts隐藏掉一条曲线，并且tooltip提示框中不显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>w3cschool (www.w3cschool.cn) </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: [
				 {
			        id: 'dataZoomX',
			        show:true, 
			        backgroundColor:'rgba(47,69,84,0.4)',
			        type: 'slider',     
			        fillerColor:'rgba(167,183,204,0.4)',    
			        borderColor:'rgba(221,221,221,1)',                 
			        xAxisIndex:0, 
			        zoomLock:false,   
			        zoomOnMouseWheel:true,                   // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住
					bottom:'auto',                           // 组件离容器下侧的距离,'20%'
			    	handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.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',
			     	filterMode: 'empty',
					height: 20,
					moveHandleSize:0
				},
			    {
			        id: 'dataZoomY',
			        type: 'slider',
			        yAxisIndex:0,                           // 设置
					zoomLock:false,                         // 是否锁定选择区域（或叫做数据窗口）的大小。如果设置为
					zoomOnMouseWheel:true,                  // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住
					handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.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',
			        width:20,
					moveHandleSize:0
				},{
					type: 'inside',
					yAxisIndex: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: []
				},
			}]
		};
		option.series.push({
					id: 'AreaChart',
					type: 'line',
					symbolSize: 1,
					itemStyle: {
						normal: {
							color: 'rgb(0,153,255,1)'
						}
					},
					markArea: {
						silent: true,
						itemStyle: {
							normal: {
								color: 'rgb(255,255,255,0)'
							}
						},
						data: [[{
							yAxis:5
						}, {
							yAxis: 2
						}]]
					},
					markLine: {
						silent: true,
						data: [{
							yAxis: 3,
							lineStyle: {
								type: "dashed",
								width: 1.2,
								color: 'rgb(0,103,255,1)'
							}
						}, {
							yAxis: 5,
						}, {
							yAxis: 2
						}]
					},
					markPoint: {
						symbol: 'pin',
						symbolSize:25,
				        itemStyle:{
				            normal:{
				                label:{
				                    show: true, 
				                    fontSize: 5
				                }
				            }
				        },
						// 标记的数据，可以是最大值最小值也可以是自定义的坐标
						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,0.5)',
							stroke: 'rgba(128,128,128,0.5)',
							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,0.5)',
							stroke: 'rgba(128,128,128,0.5)',
							lineWidth: 6
						},
						//转换坐标系上的点到像素坐标值
						position: [myChart.convertToPixel({ xAxisId: 'x0' }, getMarkAxis()['L2']), 0],
						bouding: 'all',
						cursor: 'move',
						draggable: true,
					//	ondragstart: onLineDragStart,
					//	ondragend: onLineDragEnd
					}, {
						type: 'rect',
						id: 'rectArea',
						name: 'rectArea',
						bottom: -myHeight,
						z: 8,
						invisible: true,
						shape: {
							width: Math.abs(myChart.convertToPixel({ xAxisId: 'x0' }, getMarkAxis()['L2']) - myChart.convertToPixel({ xAxisId: 'x0' }, getMarkAxis()['L1'])) - 10,
							height: myHeight * 2
						},
						style: {
							fill: 'rgba(183,81,5,0.1)',
							stroke: 'rgba(128,128,128,0.2)'
						},
						//转换坐标系上的点到像素坐标值
						position: [myChart.convertToPixel({ xAxisId: 'x0' }, getMarkAxis()['L1'] < getMarkAxis()['L2'] ? getMarkAxis()['L1'] : getMarkAxis()['L2']) + 5, 0],
						bouding: 'all',
						cursor: 'move',
						draggable: true,
						//onmouseover: onAreaMouseOver,
					//	onmouseout: onAreaMouseOut,
					//	ondragend: onAreaDragEnd,
					}, {
						type: 'rect',
						id: 'rectAll',
						name: 'rectAll',
						bottom: 0,
						z: 7,
						invisible: true,
						shape: {
							width: myWidth,
							height: myHeight
						},
						style: {
							fill: 'rgba(183,81,5,0.8)',
							stroke: 'rgba(128,128,128,0.2)'
						},
						//转换坐标系上的点到像素坐标值
						position: [0, 0],
						bouding: 'all',
						cursor: 'default',
						draggable: false
					}]
			}
		});
        */
        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
					}, {
						type: 'rect',
						id: 'rectArea',
						name: 'rectArea',
						bottom: -myHeight,
						z: 8,
						invisible: true,
						shape: {
							width: Math.abs(myChart.convertToPixel({ xAxisId: 'x0' }, getMarkAxis()['L2']) - myChart.convertToPixel({ xAxisId: 'x0' }, getMarkAxis()['L1'])) - 10,
							height: myHeight * 2
						},
						style: {
							fill: 'rgba(183,81,5,0.1)',
							stroke: 'rgba(128,128,128,0.2)'
						},
						//转换坐标系上的点到像素坐标值
						position: [myChart.convertToPixel({ xAxisId: 'x0' }, getMarkAxis()['L1'] < getMarkAxis()['L2'] ? getMarkAxis()['L1'] : getMarkAxis()['L2']) + 5, 0],
						bouding: 'all',
						cursor: 'move',
						draggable: true,
						onmouseover: onAreaMouseOver,
						onmouseout: onAreaMouseOut,
						ondragend: onAreaDragEnd,
					}, {
						type: 'rect',
						id: 'rectAll',
						name: 'rectAll',
						bottom: 0,
						z: 7,
						invisible: true,
						shape: {
							width: myWidth,
							height: myHeight
						},
						style: {
							fill: 'rgba(183,81,5,0.8)',
							stroke: 'rgba(128,128,128,0.2)'
						},
						//转换坐标系上的点到像素坐标值
						position: [0, 0],
						bouding: 'all',
						cursor: 'default',
						draggable: false
					}
			   ]
			}
        });
        
        //拖拽开始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);

				//当前页所有echarts修改垂直线
				//var opt = $.extend(true, vline_opt, graph_opt);
				//changeCharts(id, 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;
        }
        
        //鼠标移入移出显示隐藏Area图形
		var area_opt = {
			graphic: {
				elements: [
					{
						id: 'rectArea',
						$action: 'merge',	//如果已有元素，则新的配置项和已有的设定进行 merge。如果没有则新建
						invisible: true		//节点是否可见。
					}]
			}
		};

		function onAreaMouseOver() {
			area_opt.graphic.elements[0].invisible = false;
			myChart.setOption(area_opt);
		}

		function onAreaMouseOut() {
			area_opt.graphic.elements[0].invisible = true;
			myChart.setOption(area_opt);
		}
        
        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);

				//当前页所有echarts修改垂直线
				var opt = $.extend(true, vline_opt, graph_opt); //是否进行深度拷贝,合并vline_opt和graph_opt
				changeCharts(id, 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]
						}, {
							id: 'rectArea',
							$action: 'merge',
							shape: {
								width: Math.abs(myChart.convertToPixel({ xAxisId: 'x0' }, result['L2']) - myChart.convertToPixel({ xAxisId: 'x0' }, result['L1'])) - 10,
							},
							position: [myChart.convertToPixel({ xAxisId: 'x0' }, result['L1'] < result['L2'] ? result['L1'] : result['L2']) + 5, 0],
						}]
				}
			};
			return option;
		}
		
		function changeCharts(id, option) {
        	try {
        		var charts = $('#' + id).parents('div[role=tabpanel]').find('.mychart');
        		$.each(charts, function(i, chart) {
        			if (chart.id == id) return true;
        			var myChart = echarts.getInstanceByDom(chart);
        			myChart.setOption(option);
        		});
        	} catch (e) {
        		console.log("charts修改失败。");
        		console.log(e);
        	}
        }
    </script>
</body>
</html>

以上，总结完毕。

三岁很ok
关注
  • 4
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
echarts自定义分组，x轴分级，支持多级，支持dataZoom
03-31
以柱状图为例，实现echarts自定义分组，x轴分级，支持多级，支持dataZoom
vue+echarts完整显示x轴的示例以及完整案例.zip
02-15
1、解决echarts中x轴显示不全的问题； 2、完整的代码示例； 3、完整的图片示例
Echarts添加一条垂直于x轴的直线
weixin_42720512的博客
01-14 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Echarts警戒线（markLine），要注意是X轴还是Y轴
曾小超的博客
11-26 2122
option = { "grid": { "top": "8%", "bottom": "8%", "right": "15%", "left": "15%" }, legend: { right:"0", top:"center", orient:"vertical", textSt.
前端echarts加标记点及标记线和提示框
最新发布
chenchuang0128的博客
05-06 1643
在 ECharts 中，你可以通过配置series对象的markPointmarkLine和tooltip属性来添加标记点、标记线和提示框。以下是一个简单的示例，说明如何在图表中添加这些元素。
使用echarts中markLine来实现图表标线
YL
02-12 1万+
使用echarts中markLine来实现图表标线
ehcarts绘制横向/纵向辅助线（markLine）
weixin_46917162的博客
10-20 4179
【代码】ehcarts绘制横向/纵向辅助线（markLine）
echarts的标线（markLine）、折线分段变色（visualMap）、区域变色（markArea）
weixin_43885814的博客
11-29 7152
echarts的标线、折线分段变色、区域变色说明个人对echars的理解案例说明示意图页面代码标线 markLine折线分段变色 visualMap区域变色 markArea遇到问题不识别字符型的数字出现白屏formatter函数 说明 个人对echars的理解 echars图的option我理解的是本质就是一个json，你可以写入不同的参数，echarts给解析成你想要的样式。你可以在开始的时候定义一个json，然后在功能里对这个json进行修改，或者写一个函数来得到你想要的json数据。 案例说明 这个
深入理解echarts的markline标注线
热门推荐
sunshineboysy的博客
11-30 2万+
在移动端需求中，经常遇到echarts折线图需要在折线图的末尾节点添加标注文字，进行显示，是的用户能更加显眼的看到数据分析情况，这就需要使用echarts的markline进行实现：直接贴代码 option ={ xAxis: { splitLine: { show: false, }, axisLabel: { color: '#fff', rotate: '35
echarts显示markLine
前端小白到专家的博客
01-13 3198
在echarts中显示markLine，代码正常设置就是不显示markLine线。原因有以下几点：1.markline的数值超出纵坐标范围。2.markline设置的时候echarts图表中没有数据，这时候需要先设置markLine线，然后获取echarts，再次设置显示就可以了。
ECharts实现折线图颜色分段及垂直X轴的markline标注
yezitoo的博客
08-16 6371
注：案列展示地址https://gallery.echartsjs.com/editor.html?c=xBkYIDiWWl&v=1 一、预期效果 可以根据传递的参数的不同生成相应的折线图分段 二、技术要点 1、需要根据传参分割原有折线图的数据，用于生成不同的series子元素，便于后面的折线图分段展现。 2、折线图平行于y轴的markline实现并不友好，对于高度最高是在初...
vue echarts 柱状图 自动循环 x轴竖向显示
snow_living的博客
07-06 958
中设置一个变量用来存储 this 可以防止在其他地方找不到 this 的错误。this 会随着上下文环境而变换它的指向，在当前。没有调用到props 在data做初始化假数据。想要做成组件 所以数据做了props。建立一个简单的柱状图 设置宽高。
在Echarts图中给坐标轴加一个标识线markLine
10-15
主要介绍了在Echarts图中给坐标轴加一个标识线markLine，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
绘制多条Markline 并拖动
05-30
在echart中设置多条markline，并可以拖动（结合graphic实现）实时更新markline位置。代码简单易懂，不晦涩。
在vue中使用echarts(折线图的demo,markline用法)
10-15
其中，`xAxis`和`yAxis`定义了坐标轴，`series`定义了两条折线（最低气温和最高气温），并且在最后添加了一个名为“平行于y轴的趋势线”的系列，通过`markLine`属性设置标记线。 在`mounted`生命周期钩子中，我们...
Vue + vuedraggable + echarts 拖拽做一个笔记
weixin_42135701的博客
07-06 1566
Vue + vue.draggable+ echarts 做一个图表拖拽笔记
echarts实现图表标签(label)可拖拽，以及保存拖拽后的位置
weixin_43290229的博客
08-25 2624
需求背景：当echarts图表中像素点非常多，或者有像素点重合的时候，标签就会被覆盖或者重叠。为了解决这个问题，让用户体验更加友好，于是就实现了对label进行拖拽。用户可以把label拖拽到任何他想要的位置，并且能够将位置保存下来，下次还能进行编辑回显。
echarts折线图实现对label标签拖拽功能
qq_41648113的博客
02-03 1020
echarts对label标签进行任意拖拽定位
echarts 如何绘制多条垂直于x轴的游标线且可以拖动
06-09
要实现多条垂直于x轴的游标线且可以拖动，可以使用 ECharts 的 markLine 组件和 dataZoom 组件。具体实现步骤如下： 1. 在 ECharts 的 option 中配置 markLine 组件。 ```javascript option = { ... xAxis: { ... axisLabel: { show: true, formatter: function (value, index) { // 配置 x 轴标签 return value; } }, splitLine: { show: false } }, yAxis: {...}, series: {...}, // markLine 组件 markLine: { symbol: 'none', precision: 2, label: { position: 'middle' }, lineStyle: { color: 'red', type: 'solid', opacity: 0.5 }, data: [ // 配置多个 markLine 数据 { name: 'line1', yAxis: 0 }, { name: 'line2', yAxis: 0 }, ... ] }, dataZoom: { show: true, realtime: true, start: 0, end: 100, // 配置 dataZoom 中的 handle，即拖动游标线的图标 handleIcon: 'path://M512 256L256 512V0z m-96 512h512V0H160z', handleSize: '100%', handleStyle: { color: '#fff', borderWidth: 0, borderColor: '#ddd' }, // 配置 dataZoom 的组件位置 bottom: 0 } ... } ``` 2. 在 markLine 中配置多个数据项，每个数据项代表一条游标线，其中 yAxis 属性表示游标线在 y 轴上的位置。 3. 配置 dataZoom 组件，用于拖动游标线。其中 handleIcon 属性用于配置拖动游标线的图标，bottom 属性用于配置 dataZoom 的位置。 这样就可以实现多条垂直于 x 轴的游标线且可以拖动。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值