如何在apache echarts上拖放多行？答案

【问题标题】：How to drag drop multiple line on epache echarts?如何在apache echarts上拖放多行？
【发布时间】：2022-07-04 21:48:51
【问题描述】：

我尝试使用图形工具在 apache echarts 上进行多行拖放，如下代码（原始代码来自 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);

这是更新位置函数

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)
            };
        })
    });
     
}

这是拖拽功能

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
        }]
    });
}

但我只能处理第一行。对此的任何建议或指导将不胜感激，谢谢。

【问题讨论】：

标签： javascript echarts apache-echarts

【解决方案1】：

您在选项中设置了两次图形，一个是覆盖另一个。您应该只使用一个组合了 data_line1 和 data_line2 中的点的数组（例如 data_line1.concat(data_line2) ）设置它一次。然后，根据 dataIndex，使用 onPointDragging 或 onPointDraggingLine2 和 dataIndex 或 dataIndex - data_line1.length 调用 ondrag

【讨论】：