So verwenden Sie Sankey Rose Chart, um Datenfluss- und Proportionsänderungen in ECharts anzuzeigen

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.

1. Einführung

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.

2. Implementierung

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:

<!-- 引入ECharts插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<!-- 定义画布容器 -->
<div id="sankey-rose" style="width: 800px;height: 600px;"></div>

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ält nodes alle Knoten, jeder Knoten ist ein Objekt und name stellt den Namen des Knotens dar (String-Typ). . links enthält alle Kanten, jede Kante ist ein Objekt, source repräsentiert den Namen des Quellknotens, target repräsentiert den Namen des Zielknotens, value stellt 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

2.3 Stil festlegen

3. Stil bezieht sich auf den Gesamtstil des Sankey-Rose-Diagramms und die Zuordnung zwischen Knoten. In ECharts können Stile durch die Konfiguration von series implementiert werden. Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>桑基玫瑰图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="sankey-rose" style="width: 800px;height: 600px;"></div>
    <script>
        // 初始化
        var myChart = echarts.init(document.getElementById('sankey-rose'));

        // 设置数据
        var data = {
            nodes: [
                {name: '华东地区'},
                {name: '华南地区'},
                {name: '华北地区'},
                {name: '东北地区'},
                {name: '中西部地区'},
                {name: '电子产品'},
                {name: '家用电器'},
                {name: '食品饮料'},
                {name: '化妆品'},
                {name: '家居生活'}
            ],
            links: [
                {
                    source: '华东地区',
                    target: '电子产品',
                    value: 300
                },
                {
                    source: '华东地区',
                    target: '家用电器',
                    value: 200
                },
                {
                    source: '华东地区',
                    target: '食品饮料',
                    value: 100
                },
                {
                    source: '华南地区',
                    target: '化妆品',
                    value: 400
                },
                {
                    source: '华南地区',
                    target: '家居生活',
                    value: 500
                },
                {
                    source: '华北地区',
                    target: '电子产品',
                    value: 200
                },
                {
                    source: '华北地区',
                    target: '家用电器',
                    value: 150
                },
                {
                    source: '东北地区',
                    target: '家用电器',
                    value: 100
                },
                {
                    source: '东北地区',
                    target: '化妆品',
                    value: 50
                },
                {
                    source: '中西部地区',
                    target: '电子产品',
                    value: 120
                },
                {
                    source: '中西部地区',
                    target: '食品饮料',
                    value: 80
                },
                {
                    source: '中西部地区',
                    target: '家居生活',
                    value: 200
                }
            ]
        };

        // 设置样式
        var option = {
            series: [{
                type: 'sankey',
                data: data.nodes,
                links: data.links,
                layoutIterations: 32,
                lineStyle: {
                    color: 'source',
                    curveness: 0.5
                },
                label: {
                    color: '#000',
                    formatter: '{b}'
                }
            }]
        };

        // 设置交互效果
        option.toolbox = {
            feature: {
                dataZoom: {},
                restore: {},
                saveAsImage: {}
            }
        };

        // 渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>

Unter diesen stellt type den Diagrammtyp dar, und data und links entsprechen jeweils den zuvor definierten Knoten und Links. layoutIterations stellt die Anzahl der Layout-Iterationen dar. Je größer der Wert, desto dichter ist das Layout. Normalerweise ist es auf 32 eingestellt. lineStyle stellt den Stil der Kante dar, color stellt 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. label stellt den Stil des Knotenetiketts dar, formatter stellt den Anzeigeinhalt des Knotenetiketts dar, hier ist es so eingestellt, dass der Name des Knotens verwendet wird.

2.4 Interaktive Effekte

4. Interaktive Effekte beziehen sich auf die Effekte und Vorgänge, die ausgelöst werden, wenn der Benutzer mit dem Sankey Rose Chart interagiert. In ECharts können interaktive Effekte durch die Konfiguration der toolbox erzielt werden. Der spezifische Code lautet wie folgt:
rrreee

Unter anderem ist feature ein Objekt, das eine Vielzahl interaktiver Tools enthält. dataZoom stellt das Zoom-Tool dar, restore stellt das Wiederherstellungstool dar und saveAsImage stellt das Speichertool dar. Diese Tools können Benutzern beim Wechseln, Abfragen und Exportieren von Daten helfen.

🎜Vollständiger Code🎜🎜🎜Der 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. 🎜rrreee🎜🎜Fazit🎜🎜🎜Das 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!