chord.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1" />
  5. <script src="esl.js"></script>
  6. <script src="config.js"></script>
  7. <script src="lib/facePrint.js"></script>
  8. </head>
  9. <body>
  10. <style>
  11. html, body, #main {
  12. width: 100%;
  13. height: 100%;
  14. }
  15. </style>
  16. <div id="info"></div>
  17. <div id="main"></div>
  18. <script>
  19. require([
  20. 'echarts',
  21. 'echarts/chart/chord',
  22. 'echarts/component/legend',
  23. 'echarts/component/grid',
  24. 'echarts/component/tooltip'
  25. ], function (echarts) {
  26. var chart = echarts.init(document.getElementById('main'));
  27. chart.setOption({
  28. tooltip: {
  29. trigger: 'axis',
  30. axisPointer: {
  31. type: 'line'
  32. }
  33. },
  34. series: [{
  35. name: 'chord',
  36. type: 'chord',
  37. sort: 'ascending',
  38. data : [
  39. {name : 'group1'},
  40. {name : 'group2'},
  41. {name : 'group3'},
  42. {name : 'group4'}
  43. ],
  44. matrix: [
  45. [11975, 5871, 8916, 2868],
  46. [ 1951, 10048, 2060, 6171],
  47. [ 8010, 16145, 8090, 8045],
  48. [ 1013, 990, 940, 6907]
  49. ]
  50. }]
  51. });
  52. })
  53. </script>
  54. </body>
  55. </html>