Интерактивные компоненты ECharts
ECharts предоставляет множество интерактивных компонентов: компонент legend, компонент title, компонент visualMap, компонент dataZoom, компонент timeline.
В следующем материале мы расскажем, как использовать компонент dataZoom.
dataZoom
Компонент dataZoom позволяет реализовать функцию масштабирования диаграммы с помощью прокрутки колесика мыши.
По умолчанию dataZoom управляет осью x, т. е. выполняет на оси x операциюмасштабирования окна данныхипанорамирования окна данных.
Пример
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // Этот компонент dataZoom по умолчанию управляет осью x.
type: 'slider', // Этот компонент dataZoom является компонентом dataZoom типа slider.
start: 10, // Слева на позиции 10%.
end: 60 // Справа на позиции 60%.
}
],
series: [
{
type: 'scatter', // Это диаграмма рассеяния
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"]]
}
]
}
Попробуйте сами »
В приведённом выше примере можно только приближать или отдалять диаграмму, перетаскивая компонент dataZoom. Если вы хотите перетаскивать внутри системы координат и масштабировать с помощью колеса мыши (или свайпа двумя пальцами на сенсорных экранах мобильных устройств), необходимо дополнительно добавить компонент dataZoom типа inside.
На основе приведённого выше примера мы добавляемtype: 'inside'следующую информацию о конфигурации:
Пример
...,
dataZoom: [
{ // Этот компонент dataZoom по умолчанию управляет осью x.
type: 'slider', // Этот компонент dataZoom является компонентом dataZoom типа slider.
start: 10, // Слева на позиции 10%.
end: 60 // Справа на позиции 60%.
},
{ // Этот компонент dataZoom также управляет осью X.
type: 'inside', // Этот компонент dataZoom является компонентом dataZoom типа inside.
start: 10, // Слева на позиции 10%.
end: 60 // Справа на позиции 60%.
}
],
...
}
Попробуйте сами »
Конечно, мы можем использовать dataZoom.xAxisIndex или dataZoom.yAxisIndex, чтобы указать, какой осью или осями управляет dataZoom.
Пример
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: {
нормальный: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
нормальный: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
нормальный: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
}
Попробуйте сами »