Some time ago, Guo Baokun went to the North Qi, a long time no update, this chapter learn echarts zoom and drag

DataZoom – Built into the coordinate system

<template>
    <div class="chart" ref="chart"></div>
</template>

<script>
    import * as echarts from 'echarts'
    let myChart = null, data1 = [],
    
    // Random method
     random = function (max) {
         return (Math.random() * max).toFixed(3);
     };
     
    // Generate random data
    for (let i = 0; i < 500; i++) {
        data1.push([random(15), random(10), random(1)]);
    }
    
    const options = {
            xAxis: {... },yAxis: {... },// For the axes, refer to the previous chapter
            dataZoom: {
                type: 'inside',},series: [{type: 'scatter'.data: data1
                },
            ]
        }

     myChart = echarts.init(chartDom)
     myChart.setOption(options)
</script>
Copy the code

Refer to figure

  • The data window range ranges from 0% to 100%
 dataZoom: [
     // Control the X-axis display area{...xAxisIndex: 0.start: 50.// Display the x axis from 50%
        end: 80     // Stop at 80%
    },
    // Control the Y-axis display area{...yAxisIndex: 0.// When multiple axes exist, as in the previous chapter, the double Y-axis yAxis=[{}, {}] can be controlled by the [0, 1] array form
        start: 0.end: 50}]Copy the code

DataZoom – Slider type

    dataZoom: [
        {
            type: 'slider'.xAxisIndex: 0.startValue: 40./ / the absolute value
            endValue: 100.// This is invalid when the percentage is set}]series: [{type: 'bar'.data: [...]
        },
    ]
Copy the code

rendering

You can also support both inside and slider

    dataZoom: [
        {
            type: 'slider'. }, {type: 'inside'. }]Copy the code

zoomLock

Lock the size of the selection area, or data window.

dataZoom: [
        {
            ...
            zoomLock: true./ / a Boolean value
            // You can manually zoom in and out by selecting an area in the box.
            // You need to add the following properties to disable manual brush selection, mouse over it will find the appearance of a dumbbell
            brushSelect: false}]Copy the code

Let’s take a look at this:

Lock effect:

You can see that after locking, the drag window turns into a pan, without zooming

Drag and drop

The native symbol in the polyline has no drag-and-drop functionality. It uses a graphic component to overlay a hidden drag-and-drop dot on top of each dot.

    let data3 = [[40, -10], [...]. . ]// Overlay a layer method
    function setCoverChart() {
        myChart.setOption({
            graphic: data3.map(function (item, index) {
                return {
                    type: 'circle'.position: myChart.convertToPixel('grid', item),
                    shape: {
                        r: 12  // The radius of the draggable point
                    },
                    invisible: false.draggable: true.ondrag: function () {
                        console.log(2222.this.this.x)
                        onPointDragging(index, [this.x, this.y]);
                    },
                    z: 10}; })})}// Drag method
    function onPointDragging(dataIndex, pos) {
        // After each drag, convert the current pixel coordinates to the cartesian coordinate values and assign them to data3
        data3[dataIndex] = myChart.convertFromPixel('grid', pos);

        myChart.setOption({
            series: [{
                id: 'a'.data: data3
            }]
        })
    }
    
    
Copy the code

Render native Echarts

  const options = {
        xAxis: {...type: 'value'.min: -100.max: 70,},yAxis: {...type: 'value'.min: -30.max: 60,},series: [{id: 'a'.type: 'line'.symbolSize: 20.data: data3
            }
        ]
    }
    
    
  myChart.setOption(options)
  // You need to render the native before overwriting, the execution order should be controlled
  setCoverChart()
Copy the code

rendering

Invisible: if invisible is set, the dots will become black. Default: {fill: ‘#000’} The larger white coils are symbols, and only the black ones can be dragged

The last whisper

Cunning as hare, dog cooking; The good bow hides in the birds

When there was no need to shoot birds, he hid the good bow, and when the rabbits were dead, he cooked and ate the hounds