1. 首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. ECharts官网

百度echarts地图显示指定标注

var data1 = [
	{ name: '杭州', value: 9 }
];
var geoCoordMap = {
	'杭州': [116.407526, 39.904030]
};

var convertData = function (data) {
	var res = [];
	for (var i = 0; i < data.length; i++) {
		var geoCoord = geoCoordMap[data[i].name];
		if (geoCoord) {
			res.push({
				name: data[i].name,
				value: geoCoord.concat(data[i].value)
			});
		}
	}
	return res;
};

var pointSize = 15;

option = {
  backgroundColor: '#030c2b',
  geo: {
  	map: 'china',
  	label: {
  		emphasis: {
  			show: false
  		}
  	},
  	roam: true,
  	itemStyle: {
  		normal: {
  			areaColor: '#0c52ca',//区域颜色
  		   borderColor: '#1466d3', //线
  			shadowColor: '#092f8f', //外发光
  			shadowBlur: 20
  		},
  		emphasis: {
  			areaColor: '#0a2dae'//鼠标Havor颜色
  		}
  	}
  },
  series: [
  	{
  	  name: '服务中',
  	  type: 'effectScatter',
  	  coordinateSystem: 'geo',
  	  data: convertData(data1),
  	  symbolSize: pointSize,
  	  showEffectOn: 'render',
  	  rippleEffect: {
  	  	brushType: 'stroke'
  	  },
  	  hoverAnimation: true,
  	  label: {
  	  	normal: {
  	  		formatter: '{b}',
  	  		position: 'top',
  	  		show: true
  	  	}
  	  },
  	  itemStyle: {
  	  	normal: {
  	  		color: '#4acdae',
  	  		shadowBlur: 15,
  	  		shadowColor: 'black'
  	  	}
  	  },
  	  zlevel: 1
  	}
  ]
};

点击运行 》

点击展开全文

Echarts入门