你的位置:首页 > 网页设计

[网页设计]Echart

参考  Echarts   百度地图   >>>>  功能与服务>>>>地图>>>>获取密钥>>>>按提示操作

 

2、引入插件

1 <script type="text/javascript" src="echarts.min.js"></script>2 <script type="text/javascript" src="bmap.js"></script> 3 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=?"></script>  
  问号处是你获取的密钥 3、开始写js  设置地图高度为宽的9/16,高度不能没有,没有高度地图显示不出来,高是多少你随意  $('#statistics-map').height($('#statistics-map').width() * 8 / 16); 4、var geoCoordMap={‘北京市’: [116.395645, 39.929986],...}  设置坐标经纬度Echarts实例就是写死的,我的也是写死的,要活的也行,在百度地图开发平台下载一个   这是我能找到最全的,不过数据和var geoCoordMap{}不太一样,后面写方法的时候可以自己调 5、var data={}  设置你的数据,当然了,写死也行,通过后台传值也行,但一定要有,毕竟没有数据就没有意义了 6、我的地图基本上是从Echart实例拷贝过来的,做了一点修改,符合自己的项目要求,其中的注释其实大多是英文的中文翻译,英语好的挑不懂的看
 1 var option = { 2  title: {  //标题 3   text: '',   4   subtext: '',  //副标题 5   sublink: '',  //副标题链接 6   left: 'center'  //标题位置,居中 7  }, 8  tooltip: {  //工具提示 9   trigger: 'item'  // 触发类型,默认数据触发,见下图,可选为:'item' | 'axis' 10  }, 11  bmap: {  //百度地图的设置 12   center: [106.23248, 37.48644],  //中心点 13   zoom: 5,         //缩放        14   roam: true,      //漫游 15   mapStyle: {  //地图样式 16    styleJson: [{ 17      "featureType": "water",  //水 18      "elementType": "all",    //feature是特征,element是元素 19      "stylers": { 20       "color": "#044161" 21      } 22     }, 23     { 24      "featureType": "land",  //陆地 25      "elementType": "all", 26      "stylers": { 27       "color": "#004981" 28      } 29     }, 30     { 31      "featureType": "boundary",  //边界 32      "elementType": "geometry", 33      "stylers": { 34       "color": "#064f85" 35      } 36     }, 37     { 38      "featureType": "railway",  //铁路 39      "elementType": "all", 40      "stylers": { 41       "visibility": "off" 42      } 43     }, 44     { 45      "featureType": "highway",  //高速及国道 46      "elementType": "geometry",  //几何(图形) 47      "stylers": { 48       "color": "#004981" 49      } 50     }, 51     { 52      "featureType": "highway",   53      "elementType": "geometry.fill",  //几何填充 54      "stylers": { 55       "color": "#005b96", 56       "lightness": 1 57      } 58     }, 59     { 60      "featureType": "highway", 61      "elementType": "labels",    //标签 62      "stylers": { 63       "visibility": "off" 64      } 65     }, 66     { 67      "featureType": "arterial",  //城市主路 68      "elementType": "geometry", 69      "stylers": { 70       "color": "#004981" 71      } 72     }, 73     { 74      "featureType": "arterial", 75      "elementType": "geometry.fill", 76      "stylers": { 77       "color": "#00508b" 78      } 79     }, 80     { 81      "featureType": "poi",  //定位 82      "elementType": "all", 83      "stylers": { 84       "visibility": "off" 85      } 86     }, 87     { 88      "featureType": "green",  //绿地 89      "elementType": "all", 90      "stylers": { 91       "color": "#056197", 92       "visibility": "off" 93      } 94     }, 95     { 96      "featureType": "subway",  //地铁 97      "elementType": "all", 98      "stylers": { 99       "visibility": "off"100      }101     },102     {103      "featureType": "manmade",//人造区域104      "elementType": "all",105      "stylers": {106       "visibility": "off"107      }108     },109     {110      "featureType": "local",//普通道路111      "elementType": "all",112      "stylers": {113       "visibility": "off"114      }115     },116     {117      "featureType": "arterial",118      "elementType": "labels",119      "stylers": {120       "visibility": "off"121      }122     },123     {124      "featureType": "boundary",125      "elementType": "geometry.fill",126      "stylers": {127       "color": "#029fd4"128      }129     },130     {131      "featureType": "building",  //建筑物132      "elementType": "all",133      "stylers": {134       "color": "#1a5787"135      }136     },137     {138      "featureType": "label",//标签139      "elementType": "all",140      "stylers": {141       "visibility": "off"142      }143     }144    ]145   }146  },147  series: [{  //展示数据的分类系列148    name: '校友分布',  //名称149    type: 'scatter',  //类型150    coordinateSystem: 'bmap',  //坐标系,使用上面定义的bmap151    data: {},  //数据,这里设置空,等请求后台传过来数据之后再赋上152    symbolSize: function(val) {  //数据显示的符号的大小153     return val[2];  //直径?半径?长度154    },155    label: {  //标签156     normal: {157      formatter: '{b}',  //格式化158      position: 'right',  标签显示位置159      show: false    //是否显示160     },161     emphasis: {  //强调162      show: false163     }164    },165    itemStyle: {  //样式166     normal: {167      color: '#FFD700'168     }169    }170   },171   {172    name: 'Top 5',  //分类系列的第二类173    type: 'effectScatter',174    coordinateSystem: 'bmap',175    data: {},176    symbolSize: function(val) {177     return val[2] / 10;178    },179    showEffectOn: 'emphasis',180    rippleEffect: {  //连锁反应181     brushType: 'stroke'182    },183    hoverAnimation: true,  //hover操作184    label: {185     normal: {186      formatter: '{b}',187      position: 'right',188      show: true189     }190    },191    itemStyle: {192     normal: {193      color: '#f4e925',194      shadowBlur: 10,195      shadowColor: '#333'196     }197    },198    zlevel: 1  //层级199   }200  ]201 };

 7、修改滑动操作后的显示格式,具体想显示什么样的格式,大家根据返回的数据来写,具体问题具体分析

 1  //官方实例tooltip  2  tooltip: {  3   trigger: 'item'  4  },  5  6  7  //我改后的 8  tooltip: { 9   trigger: 'item',10   //在这里添加一个函数来返回改变原来的格式11   formatter: function(data) {12    return data.name + ":" + data.value[2];13   }14  },

8、没有效果图,自己可以在Echarts官网实例上试一下