sankey.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1" />
  5. <script src="lib/esl.js"></script>
  6. <script src="lib/config.js"></script>
  7. <script src="lib/jquery.min.js"></script>
  8. </head>
  9. <body>
  10. <style>
  11. html, body, #main {
  12. width: 100%;
  13. height: 90%;
  14. /*border: 1px solid #000;*/
  15. }
  16. </style>
  17. <div id="main"><div>
  18. <script>
  19. require([
  20. 'echarts'
  21. // 'echarts/chart/sankey',
  22. // 'echarts/component/tooltip'
  23. ], function (echarts) {
  24. var chart = echarts.init(document.getElementById('main'), null, {
  25. });
  26. window.onresize = function () {
  27. chart.resize();
  28. };
  29. chart.on('click', function (params) {
  30. console.log(params, params.data);
  31. });
  32. $.getJSON('./data/energy.json')
  33. .done(function(data) {
  34. data.nodes[0].itemStyle = {
  35. normal: {
  36. color: 'red'
  37. }
  38. };
  39. chart.setOption({
  40. tooltip: {
  41. trigger: 'item',
  42. triggerOn: 'mousemove'
  43. },
  44. animation: false,
  45. series: [
  46. {
  47. type: 'sankey',
  48. layout:'none',
  49. data: data.nodes,
  50. links: data.links,
  51. lineStyle: {
  52. normal: {
  53. color: 'source',
  54. curveness: 0.5
  55. }
  56. }
  57. }
  58. ]
  59. });
  60. });
  61. });
  62. </script>
  63. </body>
  64. </html>