如何在 epache echarts 上拖放多行？

Question

我尝试使用图形工具在 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
        }]
    });
}

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

Answer 1

您在选项中设置了两次graphic ，其中一个正在覆盖另一个。

您应该只使用一个组合了data_line1和data_line2点的数组将其设置一次，例如：

data_line1.concat(data_line2)

然后，根据dataIndex调用ondrag与onPointDragging ，或onPointDraggingLine2和dataIndex或 dataIndex dataIndex - data_line1.length 。