164Echarts - 桑基图(Sankey Orient Vertical)

简介: 164Echarts - 桑基图(Sankey Orient Vertical)
效果图

源代码
<!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;
      option = {
        color: [
          '#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'
        ],
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        animation: false,
        series: [{
          type: 'sankey',
          bottom: '10%',
          focusNodeAdjacency: 'allEdges',
          data: [{
              name: 'a'
            },
            {
              name: 'b'
            },
            {
              name: 'a1'
            },
            {
              name: 'b1'
            },
            {
              name: 'c'
            },
            {
              name: 'e'
            }
          ],
          links: [{
              source: 'a',
              target: 'a1',
              value: 5
            },
            {
              source: 'e',
              target: 'b',
              value: 3
            },
            {
              source: 'a',
              target: 'b1',
              value: 3
            },
            {
              source: 'b1',
              target: 'a1',
              value: 1
            },
            {
              source: 'b1',
              target: 'c',
              value: 2
            },
            {
              source: 'b',
              target: 'c',
              value: 1
            }
          ],
          orient: 'vertical',
          label: {
            position: 'top'
          },
          lineStyle: {
            normal: {
              color: 'source',
              curveness: 0.5
            }
          }
        }]
      }
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
|
11月前
162Echarts - 桑基图(Sankey Diagram)
162Echarts - 桑基图(Sankey Diagram)
63 0
|
11月前
160Echarts - 桑基图(Sankey Node Align Left)
160Echarts - 桑基图(Sankey Node Align Left)
108 0
|
11月前
163Echarts - 桑基图(Basic Sankey)
163Echarts - 桑基图(Basic Sankey)
60 0
|
11月前
161Echarts - 桑基图(Sankey Node Align Right)
161Echarts - 桑基图(Sankey Node Align Right)
48 0
|
11月前
159Echarts - 桑基图(Sankey Diagram)
159Echarts - 桑基图(Sankey Diagram)
118 0
|
1天前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
30天前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
172 1
微信小程序使用echarts图表(ec-canvas)
|
1月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
1月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
1月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
30 1

热门文章

最新文章