163Echarts - 桑基图(Basic Sankey)
Basic
2023-09-11 14:15:41 时间
效果图
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="dist/extension/dataTool.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1024px;height:768px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;
myChart.showLoading();
option = {
series: {
type: 'sankey',
layout: 'none',
focusNodeAdjacency: 'allEdges',
data: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'a1'
}, {
name: 'a2'
}, {
name: 'b1'
}, {
name: 'c'
}],
links: [{
source: 'a',
target: 'a1',
value: 5
}, {
source: 'a',
target: 'a2',
value: 3
}, {
source: 'b',
target: 'b1',
value: 8
}, {
source: 'a',
target: 'b1',
value: 3
}, {
source: 'b1',
target: 'a1',
value: 1
}, {
source: 'b1',
target: 'c',
value: 2
}]
}
};
myChart.setOption(option);
</script>
</body>
</html>
相关文章
- How to Create a Basic Plugin 如何写一个基础的jQuery插件
- Lesson 1 Basic Concepts: Part 1
- Golang 【basic_leaming】切片排序算法以及 sort 包
- Golang 【basic_leaming】数组
- nginx用户认证配置( Basic HTTP authentication)及认证原理和实现
- basic 原理及实现
- tensoflow模型中提示:ValueError: Variable rnn/basic_rnn_cell/kernel already exists, disallowed. Did you mean to set reuse=True or reuse=tf.AUTO_REUSE in VarScope? 解决办法
- 《Visual Basic 2012入门经典》----2.10 问与答
- Java HttpClient Basic Credential 认证
- Guava 2:Basic utilities基本工具
- 视频: 千重浪Linux系统调试技术培训 03-01_Basic-CPU-Register
- [LeetCode] 772. Basic Calculator III 基本计算器之三