建站
咨詢
售后
建站咨詢
新聞中心
ECharts 有很多的交互組件，例如：
目前成都創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、義安網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
- 圖例組件 legend
- 標(biāo)題組件 title
- 視覺(jué)映射組件 visualMap
- 數(shù)據(jù)區(qū)域縮放組件 dataZoom
- 時(shí)間線組件 timeline
這里我們不一一講解每個(gè)組件的加入，只通過(guò)介紹加入 數(shù)據(jù)區(qū)域縮放組件 dataZoom 就可以掌握 Echarts 交互組件的加入操作。
介紹 Echarts 數(shù)據(jù)區(qū)域縮放組件（dataZoom）
數(shù)據(jù)可視化的基本交互需求是：概覽數(shù)據(jù)整體，按照需要關(guān)注數(shù)據(jù)細(xì)節(jié)。
dataZoom 組件完美的在直角坐標(biāo)系（grid）、極坐標(biāo)系（polar）中實(shí)現(xiàn)了這一功能。
如下例子：
點(diǎn)擊編輯實(shí)例 》》
- dataZoom 組件是對(duì)數(shù)軸（axis） 進(jìn)行 數(shù)據(jù)窗口縮放 和 數(shù)據(jù)窗口平移 操作。
可以通過(guò) dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來(lái)指定 dataZoom 控制哪個(gè)或哪些數(shù)軸。
- dataZoom 組件可同時(shí)存在多個(gè)，起到共同控制的作用?？刂仆粋€(gè)數(shù)軸的組件，會(huì)自動(dòng)聯(lián)動(dòng)。下面例子中會(huì)詳細(xì)說(shuō)明。
- dataZoom 的運(yùn)行原理是通過(guò) 數(shù)據(jù)過(guò)濾 來(lái)達(dá)到 數(shù)據(jù)窗口縮放 的效果。數(shù)據(jù)過(guò)濾模式的設(shè)置不同，效果也不同，參見(jiàn)：dataZoom.filterMode。
- dataZoom 的數(shù)據(jù)窗口范圍的設(shè)置，目前支持兩種形式：百分比形式：參見(jiàn) dataZoom.start 和 dataZoom.end。絕對(duì)數(shù)值形式：參見(jiàn) dataZoom.startValue 和 dataZoom.endValue。
dataZoom 組件支持的幾種子組件：
- 內(nèi)置型數(shù)據(jù)區(qū)域縮放組件（dataZoomInside）：內(nèi)置于坐標(biāo)系中。
- 滑動(dòng)條型數(shù)據(jù)區(qū)域縮放組件（dataZoomSlider）：有單獨(dú)的滑動(dòng)條操作。
- 框選型數(shù)據(jù)區(qū)域縮放組件（dataZoomSelect）：全屏的選框進(jìn)行數(shù)據(jù)區(qū)域縮放。入口和配置項(xiàng)均在 toolbox中。
Echarts 在代碼加入 dataZoom 組件
先只在單獨(dú)的一個(gè)橫軸上加上 dataZoom 組件，代碼示例如下：
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 這個(gè)dataZoom組件，默認(rèn)控制x軸。
type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
}
],
series: [
{
type: 'scatter', // 這是個(gè)『散點(diǎn)圖』
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
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"]]
}
]
}結(jié)果顯示如下：
點(diǎn)擊編輯實(shí)例 》》
接下來(lái)我們來(lái)實(shí)現(xiàn)在坐標(biāo)系內(nèi)進(jìn)行拖動(dòng)，以及用滾輪（或移動(dòng)觸屏上的兩指滑動(dòng)）進(jìn)行縮放，方法很簡(jiǎn)單：再加上一個(gè) inside 型的 dataZoom 組件即可。
具體的實(shí)現(xiàn)是直接在上面的 option.dataZoom 中增加：
option = {
...,
dataZoom: [
{ // 這個(gè)dataZoom組件，默認(rèn)控制x軸。
type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
},
{ // 這個(gè)dataZoom組件，也控制x軸。
type: 'inside', // 這個(gè) dataZoom 組件是 inside 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
}
],
...
}執(zhí)行上述代碼就能在坐標(biāo)系中進(jìn)行滑動(dòng)，以及使用滾輪縮放了。
效果如下：
點(diǎn)擊編輯實(shí)例 》》
如果想 y 軸也能夠縮放，那么在 y 軸上也加上 dataZoom 組件：
option = {
...,
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'inside',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'slider',
yAxisIndex: 0,
start: 30,
end: 80
},
{
type: 'inside',
yAxisIndex: 0,
start: 30,
end: 80
}
],
...
}可以看到如下結(jié)果：
點(diǎn)擊編輯實(shí)例 》》
分享題目：創(chuàng)新互聯(lián)ECharts教程：ECharts在圖表中加入交互組件
文章出自：http://m.5511xx.com/article/coosocj.html
