Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

176
Views
How to drag drop multiple line on epache echarts?

I try to make multiple line drag/drop on apache echarts using graphic util as below code (original code form apache echarts website).

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

This is update position function

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

This is on drag function

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

But I can handle only the first line. Any advice or guidance on this would be greatly appreciated, Thanks.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!