2021-6-8 前端達(dá)人
ECharts中dataZoom組件及散點圖的繪制
dataZoom 組件是對 數(shù)軸（axis） 進(jìn)行『數(shù)據(jù)窗口縮放』『數(shù)據(jù)窗口平移』操作。
可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數(shù)軸。
dataZoom 組件可同時存在多個，起到共同控制的作用。控制同一個數(shù)軸的組件，會自動聯(lián)動。下面例子中會詳細(xì)說明。
dataZoom 的運行原理是通過『數(shù)據(jù)過濾』來達(dá)到『數(shù)據(jù)窗口縮放』的效果。
dataZoom 的數(shù)據(jù)窗口范圍的設(shè)置，目前支持兩種形式：
百分比形式：參見 dataZoom.start 和 dataZoom.end。
絕對數(shù)值形式：參見 dataZoom.startValue 和 dataZoom.endValue。
dataZoom 組件現(xiàn)在支持幾種子組件：
內(nèi)置型數(shù)據(jù)區(qū)域縮放組件（dataZoomInside）：內(nèi)置于坐標(biāo)系中。
滑動條型數(shù)據(jù)區(qū)域縮放組件（dataZoomSlider）：有單獨的滑動條操作。
框選型數(shù)據(jù)區(qū)域縮放組件（dataZoomSelect）：全屏的選框進(jìn)行數(shù)據(jù)區(qū)域縮放。入口和配置項均在 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) {//控制點的大小,(參數(shù)為data中第三列的數(shù)據(jù))
return val[2] * 40; //用回調(diào)函數(shù)控制點的大小(請查看官方文檔)
},
data: [//data中第三個參數(shù)控制點的大小
["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
可以通過滑動滑輪實現(xiàn)圖形的縮放
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
部分借鑒自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.yvirxh.cn