map-default.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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. <script src="../dist/echarts.js"></script>
  12. <script src="../map/js/china.js"></script>
  13. <link rel="stylesheet" href="lib/reset.css">
  14. </head>
  15. <body>
  16. <style>
  17. h1 {
  18. line-height: 60px;
  19. height: 60px;
  20. background: #146402;
  21. text-align: center;
  22. font-weight: bold;
  23. color: #eee;
  24. font-size: 14px;
  25. }
  26. .chart {
  27. height: 500px;
  28. }
  29. </style>
  30. <button onclick="setOption()">setOption()</button>
  31. <div class="chart" id="main0"></div>
  32. <script>
  33. var chart;
  34. require([
  35. 'echarts'
  36. ], function (echarts) {
  37. require(['map/js/china'], function () {
  38. option = {
  39. tooltip: {
  40. trigger: 'item',
  41. formatter: '{b}'
  42. },
  43. legend: {
  44. top: 0,
  45. left: 'center',
  46. data: ['中国A', '中国B']
  47. },
  48. series: [
  49. {
  50. name: '中国A',
  51. type: 'map',
  52. mapType: 'china',
  53. selectedMode : 'multiple',
  54. label: {
  55. normal: {
  56. show: true
  57. },
  58. emphasis: {
  59. show: true
  60. }
  61. },
  62. roam: true,
  63. nameMap: {
  64. '广东': 'guangdong',
  65. '广西': 'guangxi'
  66. },
  67. data:[
  68. {name:'广东', selected:true}
  69. ]
  70. },
  71. {
  72. name: '中国B',
  73. type: 'map',
  74. mapType: 'china',
  75. selectedMode : 'multiple',
  76. label: {
  77. normal: {
  78. show: true
  79. },
  80. emphasis: {
  81. show: true
  82. }
  83. },
  84. roam: true,
  85. // nameMap: {
  86. // '广东': 'guangdong',
  87. // '广西': 'guangxi'
  88. // },
  89. data:[
  90. {name:'广东', selected: true},
  91. {name:'山东', selected: true}
  92. ]
  93. }
  94. ]
  95. };
  96. chart = testHelper.createChart(echarts, 'main0', option);
  97. });
  98. });
  99. function setOption() {
  100. chart.setOption({
  101. series: {
  102. label: {
  103. normal: {
  104. color: 'red'
  105. }
  106. }
  107. }
  108. });
  109. }
  110. </script>
  111. </body>
  112. </html>