map-nested.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <script src="lib/esl.js"></script>
  7. <script src="lib/config.js"></script>
  8. <script src="lib/jquery.min.js"></script>
  9. <script src="lib/facePrint.js"></script>
  10. <script src="lib/testHelper.js"></script>
  11. <link rel="stylesheet" href="lib/reset.css">
  12. </head>
  13. <body>
  14. <style>
  15. h1 {
  16. line-height: 60px;
  17. height: 60px;
  18. background: #146402;
  19. text-align: center;
  20. font-weight: bold;
  21. color: #eee;
  22. font-size: 14px;
  23. }
  24. .chart {
  25. height: 500px;
  26. }
  27. </style>
  28. <div class="chart" id="main"></div>
  29. <script>
  30. var echarts;
  31. var chart;
  32. var myChart;
  33. var groupCategories = [];
  34. var groupColors = [];
  35. require([
  36. 'echarts'
  37. // 'echarts/chart/line',
  38. // 'echarts/chart/bar',
  39. // 'echarts/chart/pie',
  40. // 'echarts/chart/scatter',
  41. // 'echarts/chart/map',
  42. // 'echarts/chart/parallel',
  43. // 'echarts/chart/radar',
  44. // 'echarts/component/grid',
  45. // 'echarts/component/polar',
  46. // 'echarts/component/geo',
  47. // 'echarts/component/singleAxis',
  48. // 'echarts/component/legend',
  49. // 'echarts/component/tooltip',
  50. // 'echarts/component/toolbox',
  51. // 'echarts/component/visualMap',
  52. // 'echarts/component/dataZoom'
  53. ], function (ec) {
  54. echarts = ec;
  55. $.getJSON('./data/czech_geo.json', function (geoJSON) {
  56. echarts.registerMap('nestedMap', geoJSON);
  57. var option = {
  58. tooltip: {},
  59. // visualMap: {
  60. // min: 0,
  61. // max: 1500,
  62. // left: 'left',
  63. // top: 'bottom',
  64. // text: ['High','Low'],
  65. // seriesIndex: [1, 2, 3],
  66. // inRange: {
  67. // color: ['#006edd', '#e0ffff']
  68. // },
  69. // calculable : true
  70. // },
  71. tooltip: {},
  72. series: [
  73. {
  74. name: 'categoryA',
  75. type: 'map',
  76. map: 'nestedMap',
  77. geoIndex: 0,
  78. itemStyle: {
  79. normal: {
  80. // areaColor: 'red'
  81. borderColor: 'red',
  82. borderWidth: 2
  83. },
  84. emphasis: {
  85. borderColor: 'blue',
  86. borderWidth: 2
  87. }
  88. },
  89. data:[
  90. {name: 'Praha', value: 123},
  91. {name: 'Plzeňský kraj', value: 321},
  92. {name: 'Středočeský kraj', value: 521}
  93. ]
  94. }
  95. ]
  96. };
  97. testHelper.createChart(echarts, 'main', option);
  98. });
  99. });
  100. </script>
  101. </body>
  102. </html>