visualMap-pieces.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="esl.js"></script>
  5. <script src="config.js"></script>
  6. </head>
  7. <body>
  8. <style>
  9. html, body, #main {
  10. width: 100%;
  11. height: 100%;
  12. }
  13. </style>
  14. <div id="main"></div>
  15. <script>
  16. require([
  17. 'echarts',
  18. 'echarts/chart/map',
  19. 'echarts/component/legend',
  20. 'echarts/component/grid',
  21. 'echarts/component/visualMap',
  22. 'echarts/component/tooltip',
  23. 'map/js/china'
  24. ], function (echarts) {
  25. var chart = echarts.init(document.getElementById('main'));
  26. option = {
  27. title : {
  28. text: '订单量',
  29. subtext: '纯属虚构',
  30. x:'center'
  31. },
  32. tooltip : {
  33. trigger: 'item'
  34. },
  35. legend: {
  36. orient: 'vertical',
  37. x:'left',
  38. data:['订单量']
  39. },
  40. visualMap: {
  41. // selectedMode: 'single',
  42. text: ['Map Result'],
  43. showLabel: true,
  44. right: 20,
  45. pieces: [
  46. {min: 1500},
  47. {min: 900, max: 1500},
  48. {min: 310, max: 1000},
  49. {min: 200, max: 400},
  50. {min: 10, max: 200, label: '10 到 200(自定义label)'},
  51. {value: 123, label: '123(自定义特殊颜色)', color: 'grey'},
  52. {min: 5, max: 5, label: '5(自定义特殊颜色)', color: 'black'},
  53. {max: 5}
  54. ],
  55. color: ['#E0022B', '#E09107', '#A3E00B']
  56. },
  57. toolbox: {
  58. show: true,
  59. orient : 'vertical',
  60. x: 'right',
  61. y: 'center',
  62. feature : {
  63. mark : {show: true},
  64. dataView : {show: true, readOnly: false},
  65. restore : {show: true},
  66. saveAsImage : {show: true}
  67. }
  68. },
  69. roamController: {
  70. show: true,
  71. x: 'right',
  72. mapTypeControl: {
  73. 'china': true
  74. }
  75. },
  76. series : [
  77. {
  78. name: '订单量',
  79. type: 'map',
  80. mapType: 'china',
  81. roam: false,
  82. itemStyle:{
  83. normal:{
  84. label:{
  85. show:true,
  86. textStyle: {
  87. color: "rgb(249, 249, 249)"
  88. }
  89. }
  90. },
  91. emphasis:{label:{show:true}}
  92. },
  93. data:[
  94. {name: '北京',value: 5},
  95. {name: '天津',value: Math.round(Math.random()*2000)},
  96. {name: '上海',value: Math.round(Math.random()*2000)},
  97. {name: '重庆',value: Math.round(Math.random()*2000)},
  98. {name: '河北',value: 0},
  99. {name: '河南',value: Math.round(Math.random()*2000)},
  100. {name: '云南',value: 123},
  101. {name: '辽宁',value: 305},
  102. {name: '黑龙江',value: Math.round(Math.random()*2000)},
  103. {name: '湖南',value: 200},
  104. {name: '安徽',value: Math.round(Math.random()*2000)},
  105. {name: '山东',value: Math.round(Math.random()*2000)},
  106. {name: '新疆',value: Math.round(Math.random()*2000)},
  107. {name: '江苏',value: Math.round(Math.random()*2000)},
  108. {name: '浙江',value: Math.round(Math.random()*2000)},
  109. {name: '江西',value: Math.round(Math.random()*2000)},
  110. {name: '湖北',value: Math.round(Math.random()*2000)},
  111. {name: '广西',value: Math.round(Math.random()*2000)},
  112. {name: '甘肃',value: Math.round(Math.random()*2000)},
  113. {name: '山西',value: Math.round(Math.random()*2000)},
  114. {name: '内蒙古',value: Math.round(Math.random()*2000)},
  115. {name: '陕西',value: Math.round(Math.random()*2000)},
  116. {name: '吉林',value: Math.round(Math.random()*2000)},
  117. {name: '福建',value: Math.round(Math.random()*2000)},
  118. {name: '贵州',value: Math.round(Math.random()*2000)},
  119. {name: '广东',value: Math.round(Math.random()*2000)},
  120. {name: '青海',value: Math.round(Math.random()*2000)},
  121. {name: '西藏',value: Math.round(Math.random()*2000)},
  122. {name: '四川',value: Math.round(Math.random()*2000)},
  123. {name: '宁夏',value: Math.round(Math.random()*2000)},
  124. {name: '海南',value: Math.round(Math.random()*2000)},
  125. {name: '台湾',value: Math.round(Math.random()*2000)},
  126. {name: '香港',value: Math.round(Math.random()*2000)},
  127. {name: '澳门',value: Math.round(Math.random()*2000)}
  128. ]
  129. }
  130. ]
  131. };
  132. chart.setOption(option);
  133. })
  134. </script>
  135. </body>
  136. </html>