159Echarts - 桑基图(Sankey Diagram)

简介: 159Echarts - 桑基图(Sankey Diagram)
效果图

源代码
<!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();
$.get('data/energy.json', function (data) {
    myChart.hideLoading();
    myChart.setOption(option = {
        title: {
            text: 'Sankey Diagram'
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'sankey',
                data: data.nodes,
                links: data.links,
                focusNodeAdjacency: 'allEdges',
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: '#aaa'
                    }
                },
                lineStyle: {
                    normal: {
                        color: 'source',
                        curveness: 0.5
                    }
                }
            }
        ]
    });
});
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
162Echarts - 桑基图(Sankey Diagram)
162Echarts - 桑基图(Sankey Diagram)
72 0
160Echarts - 桑基图(Sankey Node Align Left)
160Echarts - 桑基图(Sankey Node Align Left)
117 0
164Echarts - 桑基图(Sankey Orient Vertical)
164Echarts - 桑基图(Sankey Orient Vertical)
35 0
163Echarts - 桑基图(Basic Sankey)
163Echarts - 桑基图(Basic Sankey)
74 0
161Echarts - 桑基图(Sankey Node Align Right)
161Echarts - 桑基图(Sankey Node Align Right)
67 0
62Echarts - 饼图(Nightingale's Rose Diagram)
62Echarts - 饼图(Nightingale's Rose Diagram)
35 0
|
25天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
48 1
|
21天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
129 0
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
3月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
433 1
微信小程序使用echarts图表(ec-canvas)

热门文章

最新文章