SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点坐标</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .charts {
            width: 600px;
            height: 600px;
            margin: 100px auto 0;
        }

        .result {
            text-align: center;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="charts" id="charts"></div>
    <div class="result" id="result"></div>

    <script>
        // https://echarts.apache.org/examples/zh/editor.html?c=line-draggable
        var myChart = echarts.init(document.getElementById('charts'));
        // var data = [[200, 110], [300, 500], [200, 572]];
        var data = [];
        var symbolSize = 10;

        var option = {
            tooltip: {
                triggerOn: 'none',
                formatter: function (params) {
                    return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
                }
            },
            grid: {
            },
            xAxis: {
                min: 0,
                max: 1000,
                type: 'value',
                axisLine: {onZero: false}
            },
            yAxis: {
                min: 0,
                max: 1000,
                type: 'value',
                axisLine: {onZero: false}
            },
            // dataZoom: [
            //     {
            //         type: 'slider',
            //         xAxisIndex: 0,
            //         filterMode: 'empty'
            //     },
            //     {
            //         type: 'slider',
            //         yAxisIndex: 0,
            //         filterMode: 'empty'
            //     },
            //     {
            //         type: 'inside',
            //         xAxisIndex: 0,
            //         filterMode: 'empty'
            //     },
            //     {
            //         type: 'inside',
            //         yAxisIndex: 0,
            //         filterMode: 'empty'
            //     }
            // ],
            series: [
                {
                    id: 'a',
                    type: 'line',
                    // type: 'scatter',
                    // smooth: true,
                    symbolSize: symbolSize,
                    data: data
                }
            ]
        };

        myChart.setOption(option);
        
        // 点击事件
        myChart.getZr().on('click', function(params) {
            if (data.length >= 3) {
                return;
            }

            const pointInPixel = [params.offsetX, params.offsetY]
            if (myChart.containPixel('grid', pointInPixel)) {
                // 获取点
                let point = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
                data.push(point);

                // 渲染点数据
                renderData();
            }
        });

        function renderData() {
            // 更新数据
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });

            // 绑定拖拽事件
            myChart.setOption({
                graphic: echarts.util.map(data, 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),
                        onmousemove: echarts.util.curry(showTooltip, dataIndex),
                        onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                        z: 100
                    };
                })
            });

            // 设置数据
            myChart.setOption({
                graphic: echarts.util.map(data, function (item, dataIndex) {
                    return {
                        position: myChart.convertToPixel('grid', item)
                    };
                })
            });

            // 显示点位信息
            showPoint();

            // 绘制好了三个点 计算垂直中点
            if (data.length === 3) {
                getJiaoDian(
                    {x: data[0][0], y: data[0][1]},
                    {x: data[1][0], y: data[1][1]},
                    {x: data[2][0], y: data[2][1]}
                )
            }
        }

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

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

        function onPointDragging(dataIndex, dx, dy) {
            data[dataIndex] = myChart.convertFromPixel('grid', this.position);

            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });

            showPoint();
        }

        function showPoint() {
            let html = ''
            for (var i = 0; i < data.length; i++) {
                html = html + '<div>点'+ (i + 1) +'坐标: '+ data[i][0] + ', ' + data[i][1] +'</div>';
            }
            document.getElementById('result').innerHTML = html;
        }

        // x y
        function getJiaoDian(p1, p2, p3) {
            let x4 = 0, y4 = 0;
            // 
            const y_2_x = 600/ 600; 
 
            // 如果p1.x==p2.x 说明是条竖着的线
            if (p1.x === p2.x){
                x4=p1.x;
                y4=p3.y;
            } else  {
                var x1 = parseInt(p1.x), y1 = parseInt(p1.y) / y_2_x;
                var x2 = parseInt(p2.x), y2 = parseInt(p2.y) / y_2_x;
                var x3 = parseInt(p3.x), y3 = parseInt(p3.y) / y_2_x;
                // p1 p2 的 k
                var k1=(y2-y1)/(x2-x1)
                // y = kx + b, 计算b
                var b1= y1 - k1 * x1;
                var k2 = -1 / k1;
                // y4 = k1 * x4 + b1; (y4 - y3) / (x4 - x3) = k2
                x4 = (y3 - k2 * x3 - b1) / (k1 - k2);
                y4 = k1 * x4 + b1;

            }

            data.push([x4, y4 * y_2_x]);
            renderData();
        }

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

本项目引用的自定义外部资源