中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：ECharts 數(shù)據(jù)集（dataset） 下一篇：ECharts 響應(yīng)式

ECharts 交互組件

ECharts 提供了很多交互組件：例組件 legend、標(biāo)題組件 title、視覺映射組件 visualMap、數(shù)據(jù)區(qū)域縮放組件 dataZoom、時(shí)間線組件 timeline。

接下來的內(nèi)容我們將介紹如何使用數(shù)據(jù)區(qū)域縮放組件 dataZoom。

dataZoom

dataZoom 組件可以實(shí)現(xiàn)通過鼠標(biāo)滾輪滾動(dòng)，放大縮小圖表的功能。

默認(rèn)情況下 dataZoom 控制 x 軸，即對(duì) x 軸進(jìn)行數(shù)據(jù)窗口縮放和數(shù)據(jù)窗口平移操作。

實(shí)例

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: {
? ? ? ? ? ? ? ? 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"]]
? ? ? ? }
? ? ]
}

運(yùn)行代碼 ?

上面的實(shí)例只能拖動(dòng) dataZoom 組件來縮小或放大圖表。如果想在坐標(biāo)系內(nèi)進(jìn)行拖動(dòng)，以及用鼠標(biāo)滾輪（或移動(dòng)觸屏上的兩指滑動(dòng)）進(jìn)行縮放，那么需要 再再加上一個(gè) inside 型的 dataZoom 組件。

在以上實(shí)例基礎(chǔ)上我們?cè)僭黾?type: 'inside' 的配置信息：

實(shí)例

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% 的位置。
? ? ? ? }
? ? ],
? ? ...
}

運(yùn)行代碼 ?

當(dāng)然我們可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個(gè)或哪些數(shù)軸。

實(shí)例

var data1 = [];
var data2 = [];
var data3 = [];

var random = function (max) {
? ? return (Math.random() * max).toFixed(3);
};

for (var i = 0; i < 500; i++) {
? ? data1.push([random(15), random(10), random(1)]);
? ? data2.push([random(10), random(10), random(1)]);
? ? data3.push([random(15), random(10), random(1)]);
}

option = {
? ? animation: false,
? ? legend: {
? ? ? ? data: ['scatter', 'scatter2', 'scatter3']
? ? },
? ? tooltip: {
? ? },
? ? xAxis: {
? ? ? ? type: 'value',
? ? ? ? min: 'dataMin',
? ? ? ? max: 'dataMax',
? ? ? ? splitLine: {
? ? ? ? ? ? show: true
? ? ? ? }
? ? },
? ? yAxis: {
? ? ? ? type: 'value',
? ? ? ? min: 'dataMin',
? ? ? ? max: 'dataMax',
? ? ? ? splitLine: {
? ? ? ? ? ? show: true
? ? ? ? }
? ? },
? ? dataZoom: [
? ? ? ? {
? ? ? ? ? ? type: 'slider',
? ? ? ? ? ? show: true,
? ? ? ? ? ? xAxisIndex: [0],
? ? ? ? ? ? start: 1,
? ? ? ? ? ? end: 35
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? type: 'slider',
? ? ? ? ? ? show: true,
? ? ? ? ? ? yAxisIndex: [0],
? ? ? ? ? ? left: '93%',
? ? ? ? ? ? start: 29,
? ? ? ? ? ? end: 36
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? type: 'inside',
? ? ? ? ? ? xAxisIndex: [0],
? ? ? ? ? ? start: 1,
? ? ? ? ? ? end: 35
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? type: 'inside',
? ? ? ? ? ? yAxisIndex: [0],
? ? ? ? ? ? start: 29,
? ? ? ? ? ? end: 36
? ? ? ? }
? ? ],
? ? series: [
? ? ? ? {
? ? ? ? ? ? name: 'scatter',
? ? ? ? ? ? type: 'scatter',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? opacity: 0.8
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? symbolSize: function (val) {
? ? ? ? ? ? ? ? return val[2] * 40;
? ? ? ? ? ? },
? ? ? ? ? ? data: data1
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: 'scatter2',
? ? ? ? ? ? type: 'scatter',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? opacity: 0.8
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? symbolSize: function (val) {
? ? ? ? ? ? ? ? return val[2] * 40;
? ? ? ? ? ? },
? ? ? ? ? ? data: data2
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: 'scatter3',
? ? ? ? ? ? type: 'scatter',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? opacity: 0.8,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? symbolSize: function (val) {
? ? ? ? ? ? ? ? return val[2] * 40;
? ? ? ? ? ? },
? ? ? ? ? ? data: data3
? ? ? ? }
? ? ]
}

運(yùn)行代碼 ?
上一篇：ECharts 數(shù)據(jù)集（dataset） 下一篇：ECharts 響應(yīng)式