Intento arrastrar y soltar varias líneas en apache echarts usando la utilidad gráfica como se muestra a continuación (código original del sitio web de apache echarts).

 setTimeout(function () { myChart.setOption({ graphic: echarts.util.map(data_line1, function (item, dataIndex) { return { type: 'circle', position: myChart.convertToPixel('grid', item), shape: { cx: 0, cy: 0, r: symbolSize / 2 }, invisible: true, draggable: true, ondrag: echarts.util.curry(onPointDragging, dataIndex), z: 100 }; }), graphic: echarts.util.map(data_line2, function (item, dataIndex) { return { type: 'circle', position: myChart.convertToPixel('grid', item), shape: { cx: 0, cy: 0, r: symbolSize / 2 }, invisible: true, draggable: true, ondrag: echarts.util.curry(onPointDraggingLine2, dataIndex), z: 100 }; }) }); }, 0);

Esta es la función de posición de actualización

 function updatePosition() { myChart.setOption({ graphic: echarts.util.map(data_line1, function (item, dataIndex) { return { position: myChart.convertToPixel('grid', item) }; }), graphic: echarts.util.map(data_line2, function (item, dataIndex) { return { position: myChart.convertToPixel('grid', item) }; }) }); }

Esto está en la función de arrastre

 function onPointDragging(dataIndex, dx, dy) { data_line1[dataIndex] = myChart.convertFromPixel('grid', this.position); // Update data myChart.setOption({ series: [{ id: 'a', data: data_line1 }] }); } function onPointDraggingLine2(dataIndex, dx, dy) { data_line2[dataIndex] = myChart.convertFromPixel('grid', this.position); // Update data myChart.setOption({ series: [{ id: 'b', data: data_line2 }] }); }

Pero solo puedo manejar la primera línea. Cualquier consejo u orientación sobre esto sería muy apreciado, gracias.