JQ+echarts实现可拖动节点的折线图（支持拖动方向设置-仅上下、仅左右、坐标轴内自由拖动）

翻遍全网没有一个在现在还用jq＋echarts做可视化的了，在结合官网和相关vue项目的基础上，制作了jq 和 echarts的可拖动节点的折线图，废话不多说，上代码。

var names = ["参考负荷","预测负荷"];
	data = pdata_;//预测负荷
	xdata = xdata_;//x轴数据
	var symbolSize = 8;
	myChart.clear();
	let option = {
		color : ["#ece70b","#ff0101"],
		title: [{
	        text: title,
	        top : '4%',
	        left: '1%',
	        textStyle: {
	        	color: '#B3E6FC',
	            fontWeight:'lighter'
	        }
	    }],
		tooltip: {
			order: 'valueDesc',
			trigger: 'axis',
			// triggerOn: 'none',
			// formatter: function (params) {
			// 	return (
			// 		names[0] + ":" + params.data[0].toFixed(2) +
			// 		'<br>'+ names[1] + ":" + params.data[1].toFixed(2)
			// 	);
			// }
		},
		toolbox: {
			left: 'right',
			itemSize: 18,
			top: 10,
			show: true,
			feature: {
				dataZoom: {
					// yAxisIndex: 'none'
				},
				restore: {show: false},
				saveAsImage: {
					show: true,
					title: '保存图片',
					excludeComponents: ['toolbox'], //保存时忽略工具栏
					pixelRatio: 1, // 下载后放大的倍数
					type: 'jpeg',
				}
			}
		},
		legend : { /* 图例属性设置 */
			data : names,
			left : '40%', /*位置可以是|left:'left'|left:'1%'|x:'left'|x:'1%'|*/
			top : '4%',
			textStyle : {
				color : '#B3E6FC',
				fontSize : 16
			}
		},
		grid : { /* 数据网格属性 */
			left : '1%',
			right : '1%',
			bottom : '5%',
			containLabel : true
		},
		xAxis : {
			type : 'category',
			boundaryGap : false,
			data : xdata,
			axisLine : {
				onZero : false,
				lineStyle : {
					color : '#B3E6FC'
				}
			}
		},
		yAxis : {
			type : 'value',
			min : miniVal,
			max : maxVal,
			// splitNumber : 20,// Y轴间隔
			axisTick: {show:true},
			axisLine : {
				show:true,
				onZero : true,
				lineStyle : {
					color : '#B3E6FC'
				},
			},
			splitLine : {
				show : false
			// 显示y网格线
			}
		},
		dataZoom: [{ // 缩放功能
			type: 'inside',
			orient: 'vertical',
			start: 0,
			end: 100,
			filterMode: 'none',
		}, {
			show: false,// 是否显示缩放滚动条
			// type : 'slider',
			type: 'inside',
			y: '96%',
			height: 10,
			start: 0,
			end: 100,
			filterMode: 'none',
		}],
		series : [{
			/*参考负荷数据*/
			name : names[0],//sites[0]
			type : 'line',
			smooth : false,
			symbolSize : 2, // 折线节点大小
			lineStyle : {
				normal : {
					width : 1.2,// 线宽
				}
			},
			data : hdata_
		},
			//预测负荷数据
		{
			id : 'a',
			name : names[1],
			type : 'line',
			smooth : false,
			symbolSize : symbolSize, // 折线节点大小
			lineStyle : {
				normal : {
					width : 1.5,// 线宽
				}
			},
			data : data
		}],
	};
	setTimeout(function () {
		// Add shadow circles (which is not visible) to enable drag.
		myChart.setOption({
			graphic: data.map(function (item, dataIndex) {
				return {
					// 'circle' 表示这个 graphic element 的类型是圆点
					type: 'circle',
					position: myChart.convertToPixel('grid', item),  // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置
					shape: {
						cx: 0,
						cy: 0,
						// 圆点的半径
						r: symbolSize / 2
					},
					// 这个属性让圆点不可见（但是不影响他响应鼠标事件）
					invisible: true,
					// 这个属性让圆点可以被拖拽
					draggable: true,
					ondrag: function (dx, dy) {
						onPointDragging(dataIndex, [this.x, this.y]);
					},
					onmousemove: function () {
						showTooltip(dataIndex);
					},
					onmouseout: function () {
						hideTooltip(dataIndex);
					},
					// 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点
					z: 100,
				};
			})
		});
	}, 0);
	window.addEventListener('resize', updatePosition);
	myChart.on('dataZoom', updatePosition);
	function updatePosition() {
		myChart.setOption({
			graphic: data.map(function (item, dataIndex) {
				return {
					position: myChart.convertToPixel('grid', item)
				};
			})
		});
	}
	function showTooltip(dataIndex) {
		myChart.dispatchAction({
			type: 'showTip',
			seriesIndex: 0,
			dataIndex: dataIndex
		});
	}
	function hideTooltip(dataIndex) {
		myChart.dispatchAction({
			type: 'hideTip'
		});
	}
	function onPointDragging(dataIndex, pos) {
		let origin = myChart.convertToPixel('grid', data[dataIndex]);
		pos[0] = origin[0]; // 控制每个点位只能在y轴方向移动
		// pos[1] = origin[1]; // 控制每个点位只能在X轴方向移动
		data[dataIndex] = myChart.convertFromPixel('grid', pos);
		console.log('aaaa',data[dataIndex])
		// Update data
		myChart.setOption({
			series: [
				{
					id: 'a',
					data: data,
				}
			]
		});
	}

	option && myChart.setOption(option);

对了，jq，echarts相关版本附上

<script src="js/echarts-5.4.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>