Sankey Rose Chart를 사용하여 ECharts에서 데이터 흐름 및 비율 변화를 표시하는 방법
- WBOY원래의
- 2023-12-18 13:47:45582검색
ECharts는 데이터를 더욱 생생하고 직관적으로 만들 수 있는 시각적 데이터 표시 라이브러리입니다. 그 중 Sankey Rose 차트는 데이터 흐름 방향과 비율 변화를 보여주는 데 큰 도움을 줄 수 있습니다. 이 기사에서는 특정 코드 예제를 제공하면서 ECharts에서 Sankey Rose Chart를 사용하는 방법을 소개합니다.
- 소개
Sankey Rose Chart는 내부 및 외부 원과 섹터 길이의 동심원을 통해 데이터를 표시하는 특수한 장미 차트입니다. 명확한 계층 구조를 가지며 다차원 데이터 흐름을 표시하는 데 적합합니다. ECharts에서 Sankey Rose Chart는 다양한 차원 간의 비율과 시간에 따른 비율 간의 관계를 표시하는 데 사용할 수 있습니다. 또한 데이터 양이 많고 차원이 너무 많은 상황의 경우 ECharts는 사용자의 시각적 상호 작용을 용이하게 하기 위해 스크롤 표시 및 썸네일 미리 보기도 지원합니다.
- 구현
다음에서는 ECharts에서 Sankey 로즈 차트를 사용하여 초기화, 데이터 설정, 스타일 설정 및 대화형 효과의 4단계를 포함하여 데이터 흐름 방향 및 비율 변경을 표시하는 방법을 소개합니다.
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 데이터 설정
데이터 설정에는 노드와 가장자리 정의가 포함됩니다. 예를 들어, 판매 데이터의 Sankey rose 다이어그램에서 노드는 제품 유형 또는 판매 지역일 수 있으며, 가장자리는 데이터의 논리적 관계를 나타내는 다양한 노드 간의 연결 및 흐름 방향을 나타냅니다. 구체적인 코드는 다음과 같습니다.
// 设置节点
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은 대상 노드의 이름을 나타냅니다. 값은 데이터의 값(숫자 유형)을 나타냅니다. 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
- 스타일은 Sankey Rose 다이어그램의 전체 스타일과 노드 간의 연관성을 나타냅니다. ECharts에서는
시리즈를 구성하여 스타일을 구현할 수 있습니다. 구체적인 코드는 다음과 같습니다.
<!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>type은 차트 유형을 나타내며 data와 link는 각각 앞서 정의한 노드 및 링크. layoutIterations는 레이아웃 반복 횟수를 나타냅니다. 값이 클수록 레이아웃이 더 조밀해집니다. 일반적으로 32로 설정됩니다. lineStyle은 가장자리의 스타일을 나타내고, color는 가장자리의 색상을 나타냅니다. 여기서는 소스 노드의 색상을 사용하도록 설정되었습니다. >는 모서리의 라디안을 나타내며, 0.5로 설정하면 곡선으로 표현됩니다. label은 노드 레이블의 스타일을 나타내고 formatter는 노드 레이블의 표시 내용을 나타내며 여기서는 노드 이름을 사용하도록 설정됩니다. 2.4 인터랙티브 효과 - 인터랙티브 효과는 사용자가 Sankey Rose Chart와 상호 작용할 때 트리거되는 효과 및 작업을 의미합니다. ECharts에서는
도구 상자를 구성하여 대화형 효과를 얻을 수 있습니다. 구체적인 코드는 다음과 같습니다. rrreee
feature는 다양한 대화형 도구가 포함된 개체입니다. dataZoom은 확대/축소 도구를 나타내고, restore는 복원 도구를 나타내고, saveAsImage는 저장 도구를 나타냅니다. 이러한 도구는 사용자가 데이터를 전환하고 쿼리하고 내보내는 데 도움이 될 수 있습니다. 🎜전체 코드🎜🎜🎜최종 코드는 아래와 같습니다. 다음은 Sankey 장미 차트를 사용하여 여러 지역에서 다양한 유형의 상품 판매 비율을 표시하는 판매 데이터의 예입니다. 🎜rrreee🎜🎜결론🎜🎜🎜위는 초기화, 데이터 설정, 스타일 설정, 인터랙티브 효과 등의 단계를 포함하여 Sankey 로즈 차트를 사용하여 ECharts에서 데이터 흐름 및 비율 변경을 표시하는 방법에 대한 전체 프로세스입니다. 실제 적용에서는 특정 요구에 따라 수정 및 확장이 가능합니다. 이 기사가 Sankey Rose 다이어그램의 사용법을 더 잘 익히는 데 도움이 되기를 바랍니다. 🎜위 내용은 Sankey Rose Chart를 사용하여 ECharts에서 데이터 흐름 및 비율 변화를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!