ECharts-Dataset (dataset)

ECharts verwendet Datensatz zur Datenverwaltung.

Die dataset-Komponente dient der separaten Datendeklaration, wodurch Daten unabhängig verwaltet, von mehreren Komponenten wiederverwendet und eine Zuordnung von Daten zu Visualisierungen auf Basis der Daten ermöglicht wird.

Unten steht das einfachste Beispiel für dataset:

Alternativ kann auch das übliche Objekt-Array-Format verwendet werden:

Zuordnung von Daten zu Grafiken

Im Konfigurationselement können wir Daten auf Grafiken abbilden.

Wir können das Attribut series.seriesLayoutBy verwenden, um zu konfigurieren, ob der Datensatz Spalten oder Zeilen den grafischen Serien zuordnet. Standardmäßig erfolgt die Zuordnung über Spalten.

Im folgenden Beispiel verwenden wir die Eigenschaft seriesLayoutBy, um zu konfigurieren, ob Daten nach Spalten oder nach Zeilen angezeigt werden.

Die von gängigen Diagrammen dargestellten Daten haben meist eine "zweidimensionale Tabellenstruktur". Wir können die Eigenschaft series.encode verwenden, um die entsprechenden Daten den Achsen zuzuordnen (z. B. X- und Y-Achsen):

Die grundlegende Struktur der encode-Deklaration ist wie folgt, wobei die linke Seite des Doppelpunkts der spezifische Name des Koordinatensystems, Labels usw. ist, wie z. B. 'x', 'y', 'tooltip' usw., und die rechte Seite des Doppelpunkts der Dimensionsname in den Daten (Zeichenkettenformat) oder der Dimensionsindex (Zahlenformat, Zählung ab 0) ist. Eine oder mehrere Dimensionen können angegeben werden (unter Verwendung eines Arrays). Im Allgemeinen müssen nicht alle der folgenden Informationen geschrieben werden; schreiben Sie sie nach Bedarf.

Die folgenden Eigenschaften werden von encode unterstützt:

// 在任何坐标系和系列中，都支持：
encode: {
    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
    tooltip: ['product', 'score']
    // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
    seriesName: [1, 3],
    // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
    itemId: 2,
    // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
    itemName: 3
}

// 直角坐标系（grid/cartesian）特有的属性：
encode: {
    // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
    x: [1, 5, 'score'],
    // 把“维度0”映射到 Y 轴。
    y: 0
}

// 单轴（singleAxis）特有的属性：
encode: {
    single: 3
}

// 极坐标系（polar）特有的属性：
encode: {
    radius: 3,
    angle: 2
}

// 地理坐标系（geo）特有的属性：
encode: {
    lng: 3,
    lat: 2
}

// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
    value: 3
}

Weitere encode-Beispiele:

Zuordnung visueller Kanäle (Farbe, Größe usw.)

Wir können die visualMap-Komponente verwenden, um visuelle Kanäle zuzuordnen.

Visuelle Elemente können sein:

• symbol: Die grafische Form des grafischen Elements.
• symbolSize: die Größe des grafischen Elements.
• color: die Farbe des grafischen Elements.
• colorAlpha: Die Transparenz der Farbe des grafischen Elements.
• opacity: Die Transparenz des grafischen Elements und seiner Bestandteile (wie Textbeschriftungen).
• colorLightness: die Helligkeit der Farbe.
• colorSaturation: die Sättigung der Farbe.
• colorHue: der Farbton der Farbe.

Es können mehrere visualMap-Komponenten definiert werden, wodurch mehrere Dimensionen in den Daten gleichzeitig visuell abgebildet werden können.

Interaktive Verknüpfung

Im folgenden Beispiel teilen mehrere Diagramme einen einzigen Datensatz, mit verknüpften Interaktionen: