map-locate.html 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!DOCTYPE html>
  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. .test-title {
  16. background: #146402;
  17. color: #fff;
  18. }
  19. </style>
  20. <div id="main0"></div>
  21. <script>
  22. require([
  23. 'echarts', 'map/js/china'
  24. ], function (echarts) {
  25. var locations = [{
  26. name: '上海',
  27. coord: [121.472644, 31.231706]
  28. }, {
  29. name: '北京',
  30. coord: [116.405285, 39.904989]
  31. }, {
  32. name: '广东',
  33. coord: [113.280637, 23.839463714285714]
  34. }];
  35. var option = {
  36. tooltip: {
  37. trigger: 'item',
  38. formatter: '{b}'
  39. },
  40. series: [
  41. {
  42. name: '中国',
  43. type: 'map',
  44. mapType: 'china',
  45. selectedMode : 'multiple',
  46. label: {
  47. normal: {
  48. show: true
  49. },
  50. emphasis: {
  51. show: true
  52. }
  53. }
  54. }
  55. ]
  56. };
  57. var myChart = testHelper.create(echarts, 'main0', {
  58. title: 'Original series data is empty and no dataset',
  59. option: option
  60. });
  61. var currentLoc = 0;
  62. setInterval(function () {
  63. myChart.setOption({
  64. series: [{
  65. center: locations[currentLoc].coord,
  66. zoom: 4,
  67. data:[
  68. {name: locations[currentLoc].name, selected: true}
  69. ],
  70. animationDurationUpdate: 1000,
  71. animationEasingUpdate: 'cubicInOut'
  72. }]
  73. });
  74. currentLoc = (currentLoc + 1) % locations.length;
  75. }, 2000);
  76. });
  77. </script>
  78. </body>
  79. </html>