How to Implement Dragging

[rprpx]

Can Dragging be implemented with vue-echarts?
Any simple example code to assist with this?
I'm referring to https://apache.github.io/echarts-handbook/en/how-to/interaction/drag/

Related question: Is there an example of how 'convertFromPixel' can be used when using vue-echarts?

Thank you.

[Justineo]

Give the chart component a ref and you can call convertFromPixel on it directly.

<template>
  <v-chart ref="chart" .../>
</template>

<script>
export default {
  mounted () {
    this.$refs.chart.convertFromPixel(...)
  }
}
</script>

[rprpx]

Vue.js 3.2.31 (using Composition API)
Echarts 5.3.0
vue-echarts 6.0.2

Objective was to create a LINE graph (details of the graph set in myOption.series[0])
that would implement dragging for the points of the graph.

The following worked for me ...

vueApp.component('echart', VueECharts);

setup() {  
    const theChartRef = Vue.ref( null );   //this is how a 'ref' is set up when using composition api

    const myOption = Vue.reactive( ... create ECharts 'option' object here ... );

    Vue.onMounted(() => {    //the following code must be run after mounting, otherwise 'theChartRef' will still be null
        //create a 'graphic' for each point in series[0]; these 'graphics' will be invisible, but will be what the mouse actually drags
        myOption.graphic = myOption.series[0].data.map((item, dataIndex) => {
            return {
                type: 'circle',
                position: theChartRef.value.convertToPixel('grid', item),
                shape: { cx:0, cy: 0, r:9 },  //'r' here would usually be half the value of the symbol size designated in 'myOption'
                invisible: true, draggable: true,
                ondrag: (event) => { onPointDragging(dataIndex, [event.offsetX, event.offsetY]) },
                z: 100
            }
        }
    )};

    const onPointDragging =(dataIndex, pos)=> {
        //set the new coord for the point being dragged
        myOption.series[0].data[dataIndex] = theChartRef.value.convertFromPixel('grid', pos);
        //set the new coord for the invisible 'graphic' that's actually being dragged by the mouse
        myOption.graphic[dataIndex].position = theChartRef.value.convertToPixel('grid', myOption.series[0].data[dataIndex]);
    };

    return {  theChartRef, myOption  }
},
    template:`
    <echart :option="myOption" ref="theChartRef" style="width:300px; height:300px;"/>
    `

Additional code/details that may be desired can be found in the documentation here: https://apache.github.io/echarts-handbook/en/how-to/interaction/drag/, but the above code is the essential part.