ECarts ist eine visuelle Datenanzeigebibliothek, die Daten anschaulicher und intuitiver machen kann. Unter anderem kann das Sankey-Rose-Diagramm eine große Hilfe bei der Darstellung der Datenflussrichtung und Proportionsänderungen sein. In diesem Artikel wird die Verwendung des Sankey-Rosendiagramms in ECharts vorgestellt und gleichzeitig spezifische Codebeispiele bereitgestellt.
Das Sankey-Rosendiagramm ist ein spezielles Rosendiagramm, das Daten durch konzentrische Ringe aus inneren und äußeren Kreisen und Sektorlängen anzeigt. Es verfügt über eine klare hierarchische Struktur und eignet sich zur Darstellung mehrdimensionaler Datenflüsse. In ECharts kann das Sankey-Rose-Diagramm verwendet werden, um die Proportionen zwischen verschiedenen Dimensionen und die Beziehung zwischen den Proportionen im Zeitverlauf darzustellen. Darüber hinaus unterstützt ECharts in Situationen, in denen die Datenmenge groß ist und zu viele Dimensionen vorhanden sind, auch die Bildlaufanzeige und die Vorschau von Miniaturansichten, um den Benutzern die visuelle Interaktion zu erleichtern.
Im Folgenden wird die Verwendung des Sankey-Rosendiagramms in ECharts zur Anzeige von Datenflussrichtungs- und Proportionsänderungen vorgestellt, einschließlich der vier Schritte Initialisierung, Festlegen von Daten, Festlegen von Stilen und interaktiven Effekten.
2.1 Initialisierung
Die Initialisierung umfasst das Einführen der js-Datei von ECharts und das Erstellen eines neuen Canvas-Containers. Der spezifische Code lautet wie folgt:
2.2 Festlegen von Daten
Das Festlegen von Daten umfasst das Definieren von Knoten und Kanten. Knoten beziehen sich auf bestimmte Attribute in den Daten. In einem Sankey-Rose-Diagramm von Verkaufsdaten können Knoten beispielsweise Produkttypen oder Verkaufsregionen sein; Der spezifische Code lautet wie folgt:
// 设置节点 var data = { nodes: [ {name: 'A'}, {name: 'B'}, {name: 'C'}, {name: 'D'}, {name: 'E'} ], // 设置边 links: [ { source: 'A', target: 'B', value: 10 }, { source: 'B', target: 'C', value: 20 }, { source: 'C', target: 'D', value: 30 }, { source: 'D', target: 'E', value: 40 } ] };
Unter diesen enthältnodesalle Knoten, jeder Knoten ist ein Objekt undnamestellt den Namen des Knotens dar (String-Typ). .linksenthält alle Kanten, jede Kante ist ein Objekt,sourcerepräsentiert den Namen des Quellknotens,targetrepräsentiert den Namen des Zielknotens, < code>valuestellt den Wert der Daten dar (numerischer Typ).nodes包含了所有的节点，每个节点是一个对象，name表示节点的名称（字符串类型）。links包含了所有的边，每个边是一个对象，source表示源节点的名称，target表示目标节点的名称，value表示数据的值（数值类型）。
2.3 设置样式
样式是指桑基玫瑰图的整体风格和节点之间的关联。在ECharts中，样式可以通过配置series来实现。具体代码如下：
// 设置样式 var option = { series: [{ type: 'sankey', data: data.nodes, links: data.links, layoutIterations: 32, lineStyle: { color: 'source', curveness: 0.5 }, label: { color: '#000', formatter: '{b}' } }] };
其中，type表示图表类型，data和links分别对应前面定义的nodes和links。layoutIterations表示布局迭代次数，值越大表示布局越密集，通常设为32即可。lineStyle表示边的样式，color表示边的颜色，这里设为使用源节点的颜色；curveness表示边的弧度，设为0.5表示为曲线。label表示节点标签的样式，formatter表示节点标签的显示内容，这里设为使用节点的名称。
2.4 交互效果
交互效果指用户在与桑基玫瑰图进行互动时触发的效果和操作。在ECharts中，交互效果可以通过配置toolbox来实现。具体代码如下：
// 设置交互效果 option.toolbox = { feature: { dataZoom: {}, restore: {}, saveAsImage: {} } };
其中，feature是一个包含多种交互型工具的对象。dataZoom表示缩放工具，restore表示还原工具，saveAsImage
seriesimplementiert werden. Der spezifische Code lautet wie folgt:桑基玫瑰图示例
typeden Diagrammtyp dar, und
dataund
linksentsprechen jeweils den zuvor definierten
Knotenund
Links.
layoutIterationsstellt die Anzahl der Layout-Iterationen dar. Je größer der Wert, desto dichter ist das Layout. Normalerweise ist es auf 32 eingestellt.
lineStylestellt den Stil der Kante dar,
colorstellt die Farbe der Kante dar, hier wird die Farbe des Quellknotens verwendet; > stellt das Bogenmaß der Kante dar, eingestellt auf 0,5, wird als Kurve dargestellt.
labelstellt den Stil des Knotenetiketts dar,
formatterstellt den Anzeigeinhalt des Knotenetiketts dar, hier ist es so eingestellt, dass der Name des Knotens verwendet wird.
2.4 Interaktive Effekte
toolboxerzielt werden. Der spezifische Code lautet wie folgt:featureein Objekt, das eine Vielzahl interaktiver Tools enthält.
dataZoomstellt das Zoom-Tool dar,
restorestellt das Wiederherstellungstool dar und
saveAsImagestellt das Speichertool dar. Diese Tools können Benutzern beim Wechseln, Abfragen und Exportieren von Daten helfen.
Vollständiger CodeDer endgültige Code ist unten. Hier ist ein Beispiel für Verkaufsdaten, bei dem ein Sankey-Rosendiagramm verwendet wird, um den Verkaufsanteil verschiedener Warenarten in verschiedenen Regionen darzustellen. rrreeeFazitDas Obige ist der gesamte Prozess zur Verwendung des Sankey-Rosendiagramms zur Anzeige von Datenfluss- und Proportionsänderungen in ECharts, einschließlich Schritten wie Initialisierung, Festlegen von Daten, Festlegen von Stilen und interaktiven Effekten. In der tatsächlichen Anwendung kann es entsprechend den spezifischen Anforderungen geändert und erweitert werden. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die Verwendung von Sankey-Rosendiagrammen besser zu beherrschen.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Sankey Rose Chart, um Datenfluss- und Proportionsänderungen in ECharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
