echartsY轴自由拖动，也可以X,Y都动_echarts折线图上下拖动y轴的值-优快云博客

本文链接：https://blog.youkuaiyun.com/Apeart/article/details/121857127

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">

    var symbolSize = 20;
    //var data = [[15, 0], [25, 10], [35, 20], [45, 30], [55, 40]];

    var data=new Array();

    //随机生成数据
    for(var k=0;k<100;k++){

       var itemdata=new Array();
       itemdata.push(k*10);
       itemdata.push(20);

       data.push(itemdata);
    }

    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        tooltip: {
            triggerOn: 'none',
            formatter: function (params) {
                return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
            }
        },
        xAxis: {
            min: 0,
            max: 200,
            type: 'value',
            axisLine: {onZero: false}
        },
        yAxis: {
            min: 0,
            max: 100,
            type: 'value',
            axisLine: {onZero: false}
        },
        series: [
            {
                id: 'a',
                type: 'line',
                smooth: true,
                symbolSize: symbolSize,
                data: data
            }
        ]
    });

    myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
                type: 'circle',
                position: myChart.convertToPixel('grid', item),
                shape: {
                    r: symbolSize / 2
                },
                invisible: true,
                draggable: true,
                ondrag: echarts.util.curry(onPointDragging, dataIndex),
                onmousemove: echarts.util.curry(showTooltip, dataIndex),
                onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                z: 100
            };
        })
    });

    window.addEventListener('resize', function () {
        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) {
                return {
                    position: myChart.convertToPixel('grid', item)
                };
            })
        });
    });

    function showTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex
        });
    }

    function hideTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'hideTip'
        });
    }

    function onPointDragging(dataIndex, dx, dy) {
        // console.log(this.position);
        //让X轴保持不变
        var x=data[dataIndex][0];//去掉这个相关的就是X,Y都变了
        data[dataIndex] = myChart.convertFromPixel('grid', this.position);
        data[dataIndex][0]=x;
        //console.log(data);
        myChart.setOption({
            series: [{
                id: 'a',
                data: data
            }]
        });
    }

</script>
</body>
</html>

什么地方用呢？配置概率的时候可以用