visualMap-special-case.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="lib/esl.js"></script>
  6. <script src="lib/config.js"></script>
  7. <script src="lib/jquery.min.js"></script>
  8. <script src="lib/facePrint.js"></script>
  9. <meta name="viewport" content="width=device-width, initial-scale=1" />
  10. <link rel="stylesheet" href="lib/reset.css">
  11. </head>
  12. <body>
  13. <style>
  14. body {
  15. }
  16. #main {
  17. height: 500px;
  18. }
  19. </style>
  20. <h1>visualMap should not work on area that no data (show show itemStyle color "light blue")</h1>
  21. <div id="main"></div>
  22. <script>
  23. var echarts;
  24. var colorTool;
  25. var chart;
  26. var myChart;
  27. var groupCategories = [];
  28. var groupColors = [];
  29. require([
  30. 'echarts'
  31. // 'zrender/tool/color',
  32. // 'echarts/chart/line',
  33. // 'echarts/chart/map',
  34. // 'echarts/chart/line',
  35. // 'echarts/chart/parallel',
  36. // 'echarts/component/grid',
  37. // 'echarts/component/legend',
  38. // 'echarts/component/tooltip',
  39. // 'echarts/component/toolbox',
  40. // 'echarts/component/visualMap'
  41. ], function (ec) {
  42. echarts = ec;
  43. colorTool = echarts.color;
  44. require(['map/js/china'], function () {
  45. var chart = echarts.init(document.getElementById('main'));
  46. option = {
  47. "tooltip": {
  48. "trigger": "item",
  49. "formatter":function(params,ticket,cb){ //自定义显示框
  50. params.value=params.value||0;
  51. var contentHTML=params.name+" - "+params.value;
  52. return contentHTML;
  53. }
  54. },
  55. "visualMap": {
  56. "min": 0,
  57. "max": 96.89,
  58. "left": 20,
  59. "align": "bottom",
  60. "type": "piecewise",
  61. "bottom": 25,
  62. "text": ["覆盖率(高-低)"],
  63. "calculable": true,
  64. "inverse": true,
  65. "orient": "horizontal",
  66. "inRange": {
  67. "color": ["#d1eaff", "#1a96f0"]
  68. },
  69. formatter: function (value) {
  70. return parseInt(value)||0; // 范围标签显示内容。
  71. }
  72. },
  73. "series": [{
  74. "name": "中国",
  75. "type": "map",
  76. "mapType": "china",
  77. "selectedMode": "multiple",
  78. "itemStyle": {
  79. "normal": {
  80. "areaColor": "#d1eaff",
  81. "borderColor": "#fff"
  82. },
  83. "emphasis": {
  84. "areaColor": "#f1f5f8"
  85. }
  86. },
  87. "data": [{
  88. "name": "浙江",
  89. "value": "96.89"
  90. }, {
  91. "name": "unknown",
  92. "value": "2.67"
  93. }, {
  94. "name": "其它",
  95. "value": "0.44"
  96. }]
  97. }]
  98. }
  99. chart.setOption(option);
  100. });
  101. });
  102. </script>
  103. </body>
  104. </html>