ECharts Interaktive Komponenten
ECharts bietet viele interaktive Komponenten: Legendenkomponente, Titelkomponente, visualMap-Komponente, dataZoom-Komponente, timeline-Komponente.
Im folgenden Inhalt führen wir ein, wie die dataZoom-Komponente verwendet wird.
dataZoom
Die dataZoom-Komponente kann die Funktion zum Vergrößern und Verkleinern des Diagramms durch Scrollen des Mausrads implementieren.
Standardmäßig steuert dataZoom die x-Achse, d. h., es führt auf der x-Achse.Datenfenster-ZoomundDatenfenster-Verschieben-Vorgang aus.
Beispiel
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // Diese dataZoom-Komponente steuert standardmäßig die x-Achse.
type: 'slider', // Diese dataZoom-Komponente ist eine dataZoom-Komponente vom Typ slider.
start: 10, // Links bei 10%-Position.
end: 60 // Rechts bei 60%-Position.
}
],
series: [
{
type: 'scatter', // Dies ist ein Streudiagramm
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"]]
}
]
}
Selbst ausprobieren »
Im obigen Beispiel können Sie das Diagramm nur durch Ziehen der dataZoom-Komponente vergrößern oder verkleinern. Wenn Sie innerhalb des Koordinatensystems ziehen und mit dem Mausrad (oder einer Zwei-Finger-Wischgeste auf mobilen Touchscreens) zoomen möchten, müssen Sie zusätzlich eine dataZoom-Komponente vom Typ inside hinzufügen.
Basierend auf dem obigen Beispiel fügen wirtype: 'inside'die Konfigurationsinformationen von: hinzu:
Beispiel
...,
dataZoom: [
{ // Diese dataZoom-Komponente steuert standardmäßig die x-Achse.
type: 'slider', // Diese dataZoom-Komponente ist eine dataZoom-Komponente vom Typ slider.
start: 10, // Links bei 10%-Position.
end: 60 // Rechts bei 60%-Position.
},
{ // Diese dataZoom-Komponente steuert auch die x-Achse.
type: 'inside', // Diese dataZoom-Komponente ist eine dataZoom-Komponente vom Typ inside.
start: 10, // Links bei 10%-Position.
end: 60 // Rechts bei 60%-Position.
}
],
...
}
Selbst ausprobieren »
Natürlich können wir dataZoom.xAxisIndex oder dataZoom.yAxisIndex verwenden, um anzugeben, welche Achse oder Achsen die dataZoom-Komponente steuert.
Beispiel
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
}
]
}
Selbst ausprobieren »