注: echarts 结合 china.js 使用效果并不好, china.js 是矢量图, 显示的地图只有一个轮廓, 所以正常会选择百度地图或者其他地图配合使用.
一. 代码如下 (参考网上, 并加入自己的整理)
- function initHotMap(dataArr, domId, title) {
- $.get("${ctxStatic}/resources/js/bmap/dataTool.js",
- function() {
- $.get('${ctxStatic}/resources/js/bmap/bmap.min.js',
- function() {
- setTimeout(function() {},
- 3000);
- var hotMap = echarts.init(document.getElementById(domId));
- // 最终需整理成的数据格式 :[{name:'nanjing',value : [118.77801148172465,32.03102850827321,80]}]
- var option = {
- title: {
- text: title,
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: function(v) {
- return '';
- }
- },
- bmap: {
- // 中心为南京
- center: [118.725551, 32.024621],
- zoom: 16,
- roam: true,
- mapStyle: {
- styleJson: [{
- 'featureType': 'water',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'land',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#f3f3f3'
- }
- },
- {
- 'featureType': 'railway',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'highway',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#fdfdfd'
- }
- },
- {
- 'featureType': 'highway',
- 'elementType': 'labels',
- 'stylers': {
- 'visibility': 'all'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'poi',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'green',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'all'
- }
- },
- {
- 'featureType': 'subway',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'manmade',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'local',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'labels',
- 'stylers': {
- 'visibility': 'all'
- }
- },
- {
- 'featureType': 'boundary',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'building',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'label',
- 'elementType': 'labels.text.fill',
- 'stylers': {
- 'color': 'purple'
- }
- }]
- }
- },
- series: [{
- type: 'scatter',
- coordinateSystem: 'bmap',
- data: dataArr,
- symbolSize: function(val) {
- return val[2];
- },
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: false
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: 'purple'
- }
- }
- },
- {
- type: 'effectScatter',
- coordinateSystem: 'bmap',
- data: dataArr.sort(function(a, b) {
- return b.value[20] - a.value[20];
- }).slice(0, 5),
- symbolSize: function(val) {
- return val[2];
- },
- showEffectOn: 'render',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: 'purple',
- shadowBlur: 10,
- shadowColor: '#333'
- }
- },
- zlevel: 1
- }]
- };
- hotMap.setOption(option);
- // 添加百度地图插件
- var bmap = hotMap.getModel().getComponent('bmap').getBMap();
- bmap.addControl(new BMap.MapTypeControl());
- bmap.addControl(new BMap.NavigationControl());
- bmap.disableScrollWheelZoom();
- });
- });
- }
二. 常见问题整理
1. 地图显示不出来, 或者只显示南沙群岛, 而且浏览器控制台报错关于 bmap.js 加载等问题, 是因为页面 bmap.js 引入方式错误的原因
解决方案:(1) 首先要在页面首部引入百度地图 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script> 其中 ak 的值需要自行到百度地图官网申请.
(2) 通过 $.get('${ctxStatic}/resources/js/bmap/bmap.min.js', function () { /// 处理逻辑 }); 这种方式引入 bmap.min.js 文件, 即使使用 china.js 的时候也需要这种方式, 否则会因为加载不全就执行产生报错.
(3) 如果想在 echarts 中操作百度地图, 比如加上百度地图的相关控件, 可以通过 var bmap = hotMap.getModel().getComponent('bmap').getBMap(); 这种方式获取地图对象, 然后就可以随心所欲的操作了, 百度地图相关操作方法可以百度地图 API.
来源: http://www.bubuko.com/infodetail-2549122.html