如何在ECharts中使用桑基玫瑰图展示数据流向和占比变化

百变鹏仔 3周前 (11-26) #echarts

文章标签流向

ECharts是一个可视化的数据展示库，它可以使数据变得更加生动和直观。其中，桑基玫瑰图可以在展示数据流向和占比变化时提供很大的帮助。本文将介绍如何在ECharts中使用桑基玫瑰图，同时提供具体的代码示例。

简介

桑基玫瑰图是一种特殊的玫瑰图，通过内外圆的同心环和扇区长度展示数据，具有清晰的层级结构，适合展示多维数据流向。在ECharts中，桑基玫瑰图可以用于展示不同维度之间的比例和随时间变化的占比关系。此外，针对数据量较大和维度过多的情况，ECharts还支持滚动展示和缩略图预览，方便用户进行可视化交互。

实现

下面将介绍如何在ECharts中使用桑基玫瑰图展示数据流向和占比变化，包括初始化、设置数据、设置样式和交互效果等四个步骤。

2.1 初始化

初始化涉及到引入ECharts的js文件和新建一个画布容器。具体代码如下：

<!-- 引入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 设置数据

设置数据涉及到定义节点和边。节点是指数据中的具体属性，比如在一个销售数据的桑基玫瑰图中，节点可以是商品类型或销售地区；边是指不同节点之间的连线和流向，代表数据的逻辑关系。具体代码如下：

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

其中，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表示保存工具。这些工具可以帮助用户对数据进行切换、查询和导出等操作。

完整代码

下面是最终的代码。这里以一个销售数据的示例为例，使用桑基玫瑰图展示不同类型商品在不同区域的销售占比情况。

    <meta charset="utf-8"><title>桑基玫瑰图示例</title><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><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>

结语

文章推荐

如何在ECharts中使用桑基玫瑰图展示数据流向和占比变化

详解在React 组件中使用Echarts的正确姿势

PHP 使用Echarts生成数据统计报表详解

canvas使用贝塞尔曲线平滑拟合折线段的方法详解

echarts实现去掉X轴、Y轴和网格线效果实例分享

vue.js将echarts封装为组件一键使用