160Echarts - 桑基图(Sankey Node Align Left)

简介: 160Echarts - 桑基图(Sankey Node Align Left)
效果图

源代码
<!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: 'Node Align Right'
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        animation: false,
        series: [
            {
                type: 'sankey',
                focusNodeAdjacency: 'allEdges',
                nodeAlign: 'left',
                data: data.nodes,
                links: data.links,
                lineStyle: {
                    normal: {
                        color: 'source',
                        curveness: 0.5
                    }
                }
            }
        ]
    });
});
      myChart.setOption(option);
    </script>
  </body>
</html>
energy.json
{"nodes":[
{"name":"Agricultural 'waste'"},
{"name":"Bio-conversion"},
{"name":"Liquid"},
{"name":"Losses"},
{"name":"Solid"},
{"name":"Gas"},
{"name":"Biofuel imports"},
{"name":"Biomass imports"},
{"name":"Coal imports"},
{"name":"Coal"},
{"name":"Coal reserves"},
{"name":"District heating"},
{"name":"Industry"},
{"name":"Heating and cooling - commercial"},
{"name":"Heating and cooling - homes"},
{"name":"Electricity grid"},
{"name":"Over generation / exports"},
{"name":"H2 conversion"},
{"name":"Road transport"},
{"name":"Agriculture"},
{"name":"Rail transport"},
{"name":"Lighting & appliances - commercial"},
{"name":"Lighting & appliances - homes"},
{"name":"Gas imports"},
{"name":"Ngas"},
{"name":"Gas reserves"},
{"name":"Thermal generation"},
{"name":"Geothermal"},
{"name":"H2"},
{"name":"Hydro"},
{"name":"International shipping"},
{"name":"Domestic aviation"},
{"name":"International aviation"},
{"name":"National navigation"},
{"name":"Marine algae"},
{"name":"Nuclear"},
{"name":"Oil imports"},
{"name":"Oil"},
{"name":"Oil reserves"},
{"name":"Other waste"},
{"name":"Pumped heat"},
{"name":"Solar PV"},
{"name":"Solar Thermal"},
{"name":"Solar"},
{"name":"Tidal"},
{"name":"UK land based bioenergy"},
{"name":"Wave"},
{"name":"Wind"}
],
"links":[
{"source": "Agricultural 'waste'", "target": "Bio-conversion",  "value": 124.729},
{"source": "Bio-conversion", "target": "Liquid",  "value": 0.597},
{"source": "Bio-conversion",  "target": "Losses",  "value": 26.862},
{"source": "Bio-conversion",  "target": "Solid",  "value": 280.322},
{"source": "Bio-conversion", "target": "Gas",  "value": 81.144},
{"source": "Biofuel imports", "target": "Liquid",  "value": 35},
{"source": "Biomass imports", "target": "Solid",  "value": 35},
{"source": "Coal imports", "target": "Coal", "value": 11.606},
{"source": "Coal reserves","target": "Coal", "value": 63.965},
{"source": "Coal", "target": "Solid", "value": 75.571},
{"source": "District heating", "target": "Industry", "value": 10.639},
{"source": "District heating", "target": "Heating and cooling - commercial", "value": 22.505},
{"source": "District heating", "target": "Heating and cooling - homes", "value": 46.184},
{"source": "Electricity grid", "target": "Over generation / exports", "value": 104.453},
{"source": "Electricity grid", "target": "Heating and cooling - homes", "value": 113.726},
{"source": "Electricity grid", "target": "H2 conversion", "value": 27.14},
{"source": "Electricity grid", "target": "Industry", "value": 342.165},
{"source": "Electricity grid", "target": "Road transport", "value": 37.797},
{"source": "Electricity grid", "target": "Agriculture", "value": 4.412},
{"source": "Electricity grid", "target": "Heating and cooling - commercial", "value": 40.858},
{"source": "Electricity grid", "target": "Losses", "value": 56.691},
{"source": "Electricity grid", "target": "Rail transport", "value": 7.863},
{"source": "Electricity grid", "target": "Lighting & appliances - commercial", "value": 90.008},
{"source": "Electricity grid", "target": "Lighting & appliances - homes", "value": 93.494},
{"source": "Gas imports", "target": "Ngas", "value": 40.719},
{"source": "Gas reserves", "target": "Ngas", "value": 82.233},
{"source": "Gas", "target": "Heating and cooling - commercial", "value": 0.129},
{"source": "Gas", "target": "Losses", "value": 1.401},
{"source": "Gas", "target": "Thermal generation", "value": 151.891},
{"source": "Gas", "target": "Agriculture", "value": 2.096},
{"source": "Gas", "target": "Industry", "value": 48.58},
{"source": "Geothermal", "target": "Electricity grid", "value": 7.013},
{"source": "H2 conversion", "target": "H2", "value": 20.897},
{"source": "H2 conversion", "target": "Losses", "value": 6.242},
{"source": "H2", "target": "Road transport", "value": 20.897},
{"source": "Hydro", "target": "Electricity grid", "value": 6.995},
{"source": "Liquid", "target": "Industry", "value": 121.066},
{"source": "Liquid", "target": "International shipping", "value": 128.69},
{"source": "Liquid", "target": "Road transport", "value": 135.835},
{"source": "Liquid", "target": "Domestic aviation", "value": 14.458},
{"source": "Liquid", "target": "International aviation", "value": 206.267},
{"source": "Liquid", "target": "Agriculture", "value": 3.64},
{"source": "Liquid", "target": "National navigation", "value": 33.218},
{"source": "Liquid", "target": "Rail transport", "value": 4.413},
{"source": "Marine algae", "target": "Bio-conversion", "value": 4.375},
{"source": "Ngas", "target": "Gas", "value": 122.952},
{"source": "Nuclear", "target": "Thermal generation", "value": 839.978},
{"source": "Oil imports", "target": "Oil", "value": 504.287},
{"source": "Oil reserves", "target": "Oil", "value": 107.703},
{"source": "Oil", "target": "Liquid", "value": 611.99},
{"source": "Other waste", "target": "Solid", "value": 56.587},
{"source": "Other waste", "target": "Bio-conversion", "value": 77.81},
{"source": "Pumped heat", "target": "Heating and cooling - homes", "value": 193.026},
{"source": "Pumped heat", "target": "Heating and cooling - commercial", "value": 70.672},
{"source": "Solar PV", "target": "Electricity grid", "value": 59.901},
{"source": "Solar Thermal", "target": "Heating and cooling - homes", "value": 19.263},
{"source": "Solar", "target": "Solar Thermal", "value": 19.263},
{"source": "Solar", "target": "Solar PV", "value": 59.901},
{"source": "Solid", "target": "Agriculture", "value": 0.882},
{"source": "Solid", "target": "Thermal generation", "value": 400.12},
{"source": "Solid", "target": "Industry", "value": 46.477},
{"source": "Thermal generation", "target": "Electricity grid", "value": 525.531},
{"source": "Thermal generation", "target": "Losses", "value": 787.129},
{"source": "Thermal generation", "target": "District heating", "value": 79.329},
{"source": "Tidal", "target": "Electricity grid", "value": 9.452},
{"source": "UK land based bioenergy", "target": "Bio-conversion", "value": 182.01},
{"source": "Wave", "target": "Electricity grid", "value": 19.013},
{"source": "Wind", "target": "Electricity grid", "value": 289.366}
]}
目录
相关文章
|
12月前
166Echarts - 漏斗图(Funnel (align))
166Echarts - 漏斗图(Funnel (align))
87 0
|
12月前
162Echarts - 桑基图(Sankey Diagram)
162Echarts - 桑基图(Sankey Diagram)
66 0
|
12月前
164Echarts - 桑基图(Sankey Orient Vertical)
164Echarts - 桑基图(Sankey Orient Vertical)
33 0
|
12月前
163Echarts - 桑基图(Basic Sankey)
163Echarts - 桑基图(Basic Sankey)
64 0
|
12月前
161Echarts - 桑基图(Sankey Node Align Right)
161Echarts - 桑基图(Sankey Node Align Right)
52 0
|
12月前
159Echarts - 桑基图(Sankey Diagram)
159Echarts - 桑基图(Sankey Diagram)
119 0
|
12月前
139Echarts - 树图(From Right to Left Tree)
139Echarts - 树图(From Right to Left Tree)
33 0
|
12月前
136Echarts - 树图(From Left to Right Tree)
136Echarts - 树图(From Left to Right Tree)
29 0
|
9天前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
2月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
198 1
微信小程序使用echarts图表(ec-canvas)
下一篇
无影云桌面