2021-6-8 前端達人
ECharts中dataZoom組件及散點圖的繪制
dataZoom 組件是對 數軸（axis） 進行『數據窗口縮放』『數據窗口平移』操作。
可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數軸。
dataZoom 組件可同時存在多個，起到共同控制的作用。控制同一個數軸的組件，會自動聯動。下面例子中會詳細說明。
dataZoom 的運行原理是通過『數據過濾』來達到『數據窗口縮放』的效果。
dataZoom 的數據窗口范圍的設置，目前支持兩種形式：
百分比形式：參見 dataZoom.start 和 dataZoom.end。
絕對數值形式：參見 dataZoom.startValue 和 dataZoom.endValue。
dataZoom 組件現在支持幾種子組件：
內置型數據區域縮放組件（dataZoomInside）：內置于坐標系中。
滑動條型數據區域縮放組件（dataZoomSlider）：有單獨的滑動條操作。
框選型數據區域縮放組件（dataZoomSelect）：全屏的選框進行數據區域縮放。入口和配置項均在 toolbox中。
在代碼中加入dataZoom組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代碼加入dataZoom組件</title>
<!--引入Echarts文件-->
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
var dom=document.getElementById("main");
var myChart=echarts.init(dom);
var app={};
var option=null;
//先只在對單獨一個橫軸，加上 dataZoom 組件，代碼示例如下：
option = {
tooltip:{},//提示框
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'slider', //這個dataZoom組件是slider型dataZoom組件
xAxisIndex:0, //dataZoom-slider組件控制第一個XAxis
start: 10, //左邊在10%位置
end: 60 //右邊在60%位置
},
{
type: 'inside', //這個dataZoom組件是inside型dataZoom組件
xAxisIndex:0, //dataZoom-inslide組件控制第一個XAxis
start: 10, //左邊在10%的位置
end: 60 //右邊在60%的位置
},{
type:'slider',
yAxisIndex:0, //dataZoom-slider組件控制第一個yAxis
start:30,
end:80
},{
type:'inside',
yAxisIndex:0, //dataZoom-inside組件控制第一個yAxis
start:30,
end:80
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {//控制點的大小,(參數為data中第三列的數據)
return val[2] * 40; //用回調函數控制點的大小(請查看官方文檔)
},
data: [//data中第三個參數控制點的大小
["14.616","7.241","0.896"],
["3.958","5.701","0.955"],
["2.768","8.971","0.669"],
["9.051","9.710","0.171"],
["14.046","4.182","0.536"],
["12.295","1.429","0.962"],
["4.417","8.167","0.113"],
["0.492","4.771","0.785"],
["7.632","2.605","0.645"],
["14.242","5.042","0.368"]
]
}
]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
可以通過滑動滑輪實現圖形的縮放
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
部分借鑒自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務