map.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. $(function () {
  2. map();
  3. function map() {
  4. // 基于准备好的dom,初始化echarts实例
  5. var myChart = echarts.init(document.getElementById('map'));
  6. var data = [
  7. // {name: '乳山寨镇', value: 199},
  8. {name: '乳山寨镇', value: 129},
  9. {name: '乳山寨镇1', value: 189},
  10. ];
  11. var geoCoordMap = {
  12. // '乳山寨镇':[121.5,36.9],
  13. '乳山寨镇':[121.5,36.9],
  14. '乳山寨镇1':[121.5,36.8],
  15. }
  16. var convertData = function (data) {
  17. console.log(data)
  18. var res = [];
  19. for (var i = 0; i < data.length; i++) {
  20. var geoCoord = geoCoordMap[data[i].name];
  21. console.log(geoCoord)
  22. console.log(geoCoord.concat(data[i].value))
  23. if (geoCoord) {
  24. res.push({
  25. name: data[i].name,
  26. value: geoCoord.concat(data[i].value)
  27. });
  28. }
  29. }
  30. return res;
  31. };
  32. option = {
  33. // backgroundColor: '#404a59',
  34. title: {
  35. text: '',
  36. sublink: '',
  37. left: 'center',
  38. textStyle: {
  39. color: '#fff'
  40. }
  41. },
  42. tooltip : {
  43. trigger: 'item1',
  44. formatter:'{b}{c}'
  45. },
  46. geo: {
  47. map: 'rushan',
  48. label: {
  49. emphasis: {
  50. show: false
  51. }
  52. },
  53. roam: false,
  54. zoom:1.3,
  55. itemStyle: {
  56. normal: {
  57. areaColor: 'rgba(2,37,101,.5)',
  58. borderColor: 'rgba(112,187,252,.5)'
  59. },
  60. emphasis: {
  61. areaColor: 'rgba(2,37,101,.8)'
  62. }
  63. }
  64. },
  65. series : [
  66. {
  67. name: '',
  68. type: 'scatter',
  69. coordinateSystem: 'geo',
  70. data: convertData(data),
  71. symbolSize: function (val) {
  72. return val[2] / 15;
  73. },
  74. label: {
  75. normal: {
  76. formatter: '{b}',
  77. position: 'right',
  78. show: true
  79. },
  80. emphasis: {
  81. show: true
  82. }
  83. },
  84. itemStyle: {
  85. normal: {
  86. color: '#ffeb7b'
  87. }
  88. }
  89. }
  90. ]
  91. };
  92. myChart.setOption(option);
  93. window.addEventListener("resize",function(){
  94. myChart.resize();
  95. });
  96. }
  97. })