前天得到一個需求，是需要將差不多6000多個點展示到一個二維座標上，同時需要這個二維圖可以進行縮放。這裏記錄一下開發過程，以便以後有做的小夥伴參考。
業務說明
通過蘭圖繪地圖軟件拉取到某一個城市指定區域的加密座標（我這裏業務需求是拉取標記的座標），將其存入數據庫。經過數據清洗之後以散點圖及其連線的方式將其重現在html上，同時保證生成的html中顯示的座標能夠實現縮放和拖拽功能。
解決思路
首先想到的是MATLAB軟件。MATLAB可以根據傳入的橫軸座標以及定義的座標點名稱將需要的點顯示在一個二維座標上，同時支持縮放以及拖拽功能。但由於對MATLAB的熟練度不高，最終做出的效果不理想，因此放棄。
再一個想到的是Apache Echarts，點開官方API（https://www.echartsjs.com/zh/index.html）裏面有一個比價符合的demo
於是決定選擇Apache Echarts。
流程：
後端獲取數據 ---> 前端展示
技術選型
Apache Echarts、Spring boot、Mybatis 等。
實戰演練
數據獲取：
（我這裏的數據是我在入庫的時候就做了數據清洗，所以取出來的時候就不在需要做處理，由實際業務而定）。
數據交互：
後端將數據傳送給前端：
前端接收數據：
備註：由於小弟我是後端，前端很渣，在傳遞數據這裏由於將'JSON'誤寫爲'json'導致獲取到的數據一直是字符串形式而非json數據格式。於是我用postMan多次測試，結果postMan裏面出來的數據結構是正確的。於是一直找不到原因，就很打腦殼，最後經過多次排查找出原因是前端ajax處將 dataType ：JSON 寫成了 dataType : json 。修改之後終於解決。
前端解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/echarts/4.3.0/echarts-en.common.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
<body οnlοad='init()'>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1800px;height:900px;"></div>
<script>
var data; // 第一條線
function init(){
// 初始化內容
$.ajax({
url: "http://localhost:8888/location/getAlllocations",
type: "post",
dataType: "JSON",
success: function(result){
/*這個方法裏是ajax發送請求成功之後執行的代碼*/
data = result;
showData();
},
error: function(msg){
alert("ajax連接異常："+msg);
}
});
}
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var symbolSize = 2000;
var option = { // 基本配置，畫曲線
title: {
text: 'Try Dragging these Points'
},
tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'infos: ' + params.data;
}
},
grid: {
},
xAxis: {
min: 41885.5078125, // 指定x軸的範圍
max: 41990.734375,
type: 'value',
axisLine: { onZero: false }
},
yAxis: {
min: 8018.55810546875, // 指定y軸的範圍
max: 8116.66259765625,
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',
smooth: true,
symbolSize: symbolSize,
data: data
}
]
};
myChart.setOption(option)
function showData(){
setTimeout(function () {
// 在圖上添加圖層
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
};
})
// 遍歷數組裏面的內容
});
}, 0);
}
window.addEventListener('resize', updatePosition);
// 這是放大縮小
myChart.on('dataZoom', updatePosition);
function updatePosition() {
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) {
data[dataIndex] = myChart.convertFromPixel('grid', this.position); // 將座標值(x, y)還原爲數組的項[a,b]
// 更新圖表
myChart.setOption({
series: [{
id: 'a',
data: data
}]
});
}
</script>
</body>
結果展示
初始圖：（由於我的點數很多，所以看起來有點噁心）
指定區域縮放或拖拽：
總結：
在本次使用 Apache Echarts 來做可縮放散點圖的過程中其實並沒有很難的東西，都是細節，希望我這篇Echarts的使用報告能夠幫到正在使用或者即將使用的同學有一定的幫助。