<!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>