Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts粤港澳大湾区区域地图(附粤港澳大湾区geojson地图数据)

var uploadedDataURL = '/json/dwq.geojson'
var myChart = echarts.init(document.getElementById('map'));
function cityMap() {
  $.get(uploadedDataURL, function(geoJson) {
	echarts.registerMap('中国各市县形状', geoJson);
	option = {
		backgroundColor: '#040c33',
		title: {
		  show: true,
		  x: "center",
		  y: "20",
		  text: "粤港澳大湾区区域地图",
		  textStyle: {
			color: "#fff",
			fontSize: 22,
			fontWeight: 'normal'
		  }
		},
		"geo": {
		  "map": "中国各市县形状",
		  "layoutCenter": ["50%", "55%"],
		  "layoutSize": "82%",
		  "roam": false, //是否允许缩放
		  "mapLocation": {
			"width": "100%",
			"height": "85%"
		  },
		  label: {
			normal: { //静态的时候展示样式
			  show: true, //是否显示地图份得名称
			  textStyle: {
				color: "#fff",
				fontSize: 12
			  }
			},
			emphasis: { //动态展示的样式
			  color: '#fff',
			},
		  },
		  "itemStyle": {
			normal: {
			  areaColor: 'rgba(58, 127, 213, .2)',
			  borderColor: '#0a53e9', //线
			  shadowColor: '#092f8f', //外发光
			  shadowBlur: 50
			},
			"emphasis": {
			  color: 'rgba(58, 127, 213, 1)' //悬浮背景
			}
		  }
		},
	  },
	  myChart.setOption(option);
	  window.addEventListener("resize", function() {
		myChart.resize();
	  })
  });
}
cityMap()

点击运行 》

点击展开全文

相关文章

  1. 百度Echarts中国相声名家师承关系图
  2. ECharts水球图图表展示数据占比和目标完成情况
  3. 如何利用ECharts中使用地图热力图展示城市热度
  4. 如何利用ECharts中使用地图展示数据
  5. ECharts多轴图如何实现多维度数据

热门workflows工作流