map-contour.html 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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/jquery.min.js"></script>
  8. <script src="lib/facePrint.js"></script>
  9. </head>
  10. <body>
  11. <style>
  12. html, body, #main {
  13. width: 100%;
  14. height: 100%;
  15. margin: 0;
  16. }
  17. </style>
  18. <div id="main"></div>
  19. <script>
  20. require([
  21. 'echarts',
  22. 'echarts/chart/map',
  23. 'echarts/component/title',
  24. 'echarts/component/legend',
  25. 'echarts/component/visualMap',
  26. 'echarts/component/geo'
  27. ], function (echarts) {
  28. require(['map/js/china-contour', 'map/js/china'], function (contour) {
  29. var chart = echarts.init(document.getElementById('main'));
  30. var itemStyle = {
  31. normal:{
  32. borderColor: 'rgba(0, 0, 0, 0.2)'
  33. },
  34. emphasis:{
  35. shadowOffsetX: 0,
  36. shadowOffsetY: 0,
  37. shadowBlur: 20,
  38. borderWidth: 0,
  39. shadowColor: 'rgba(0, 0, 0, 0.5)'
  40. }
  41. }
  42. chart.setOption({
  43. title : {
  44. text: 'iphone销量',
  45. subtext: '纯属虚构',
  46. left: 'center'
  47. },
  48. legend: {
  49. orient: 'vertical',
  50. left: 'left',
  51. data:['iphone3','iphone4','iphone5']
  52. },
  53. visualMap: {
  54. min: 0,
  55. max: 1500,
  56. left: 'left',
  57. top: 'bottom',
  58. text:['高','低'], // 文本,默认为数值文本
  59. calculable : true
  60. },
  61. selectedMode: 'single',
  62. geo: [
  63. {
  64. name: 'detail',
  65. type: 'map',
  66. map: 'china',
  67. data: [],
  68. roam: true
  69. },
  70. {
  71. name: 'contour',
  72. type: 'map',
  73. roam: true,
  74. map: 'china-contour',
  75. itemStyle: {
  76. normal: {
  77. borderWidth: 3,
  78. borderColor: '#000',
  79. areaColor: 'transparent',
  80. },
  81. emphasis: {
  82. areaColor: 'transparent'
  83. }
  84. }
  85. }
  86. ],
  87. series : []
  88. });
  89. });
  90. });
  91. </script>
  92. </body>
  93. </html>