How to use Sankey Rose Chart to display data flow and proportion changes in ECharts

ECharts is a visual data display library that can make data more vivid and intuitive. Among them, the Sankey Rose chart can provide great help in showing the data flow direction and proportion changes. This article will introduce how to use the Sankey Rose Chart in ECharts, while providing specific code examples.

1. Introduction

The Sankey Rose Chart is a special rose chart that displays data through concentric rings of inner and outer circles and sector lengths, with a clear hierarchical structure. Suitable for displaying multi-dimensional data flow. In ECharts, the Sankey Rose Chart can be used to show the proportions between different dimensions and the relationship between the proportions over time. In addition, for situations where the amount of data is large and there are too many dimensions, ECharts also supports scrolling display and thumbnail preview to facilitate visual interaction for users.

2. Implementation

The following will introduce how to use the Sankey rose chart in ECharts to display data flow direction and proportion changes, including initialization, setting data, setting styles and interactive effects Wait four steps.

2.1 Initialization

Initialization involves introducing the js file of ECharts and creating a new canvas container. The specific code is as follows:

<!-- 引入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 Setting data

Setting data involves defining nodes and edges. Nodes refer to specific attributes in the data. For example, in a Sankey rose diagram of sales data, nodes can be product types or sales regions; edges refer to the connections and flow directions between different nodes, representing the logical relationship of the data. The specific code is as follows:

// 设置节点
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
        }
    ]
};

Among them, nodes contains all nodes, each node is an object, and name represents the name of the node (string type). links contains all edges, each edge is an object, source represents the name of the source node, target represents the name of the target node, value represents the value of data (numeric type).

2.3 Set style

Style refers to the overall style of the Sankey Rose diagram and the association between nodes. In ECharts, styles can be achieved by configuring series. The specific code is as follows:

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

Among them, type represents the chart type, data and links respectively correspond to the previously defined nodesandlinks. layoutIterations represents the number of layout iterations. The larger the value, the denser the layout. It is usually set to 32. lineStyle represents the style of the edge, color represents the color of the edge, here it is set to use the color of the source node; curveness represents the arc of the edge, set to 0.5 to represent curve. label represents the style of the node label, formatter represents the display content of the node label, here it is set to use the name of the node.

2.4 Interactive effects

Interactive effects refer to the effects and operations triggered when the user interacts with the Sankey Rose Chart. In ECharts, interactive effects can be achieved by configuring toolbox. The specific code is as follows:

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

Among them, feature is an object containing multiple interactive tools. dataZoom represents the zoom tool, restore represents the restore tool, and saveAsImage represents the save tool. These tools can help users switch, query and export data.

3. Full code

The following is the final code. Here is an example of sales data, using a Sankey rose chart to show the sales proportion of different types of goods in different regions.

<!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>

4. Conclusion

The above is how to use the Sankey rose chart in ECharts to display the entire process of data flow and proportion changes, including initialization, setting data, and setting styles. and interactive effects. In actual application, it can be modified and expanded according to specific needs. I hope this article can help you better master the use of Sankey rose diagrams.

The above is the detailed content of How to use Sankey Rose Chart to display data flow and proportion changes in ECharts. For more information, please follow other related articles on the PHP Chinese website!