用echarts绘制地图

最新推荐文章于 2024-08-05 05:00:00 发布

bymyself11

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量5.3k

点赞数 2

分类专栏：使用知识及遇到的问题

本文链接：https://blog.csdn.net/bymyself11/article/details/54173839

版权

使用知识及遇到的问题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

用echarts绘制地图需要引入china.js 实例代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
	</head>

	<body>
		<div id="main" style="width: 1000px;height: 600px;"></div>
		<script>
			drawAdMap();
			function drawAdMap() {
				// 基于准备好的dom，初始化echarts图表
				var myChart = echarts.init(document.getElementById('main'));
				option = {
					title: {
						text: "不同地区点击量分布",
						x: 'center'
					},
					tooltip: { //tooltip提示框，鼠标悬浮交互时的信息提示
						trigger: 'item' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
					},
					legend: { //legend图例
						orient: 'vertical', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
						x: 'left',
						data: ['点击量'] //图例内容数组
					},
					dataRange: { //dataRange值域选择
						min: 0, //指定的最小值，eg: 0，默认无，必须参数，唯有指定了splitList时可缺省min。
						max: 2500,
						x: 'left', //水平安放位置，默认为全图左对齐，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
						y: 'bottom', //垂直安放位置，默认为全图底部，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
						text: ['高', '低'], // 文本，默认为数值文本
						calculable: true //是否启用值域漫游，启用后无视splitNumber和splitList，值域显示为线性渐变
					},
					toolbox: { //toolbox
						show: true,
						orient: 'vertical', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
						x: 'right',
						y: 'center',
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					roamController: { //缩放漫游组件
						show: true,
						x: 'right',
						mapTypeControl: { //必须，指定漫游组件可控地图类型，如：{ china: true }
							'china': true
						}
					},
					//series : eval("[" + dataStr + "]")
					series: [ //通用,驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效
						{
							name: '点击量',
							type: 'map',
							mapType: 'china',
							itemStyle: {
								normal: {
									label: {
										show: true
									}
								},
								emphasis: {
									label: {
										show: true
									}
								}
							},
							data: [{
								name: '北京',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '天津',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '上海',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '重庆',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '河北',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '河南',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '云南',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '辽宁',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '黑龙江',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '湖南',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '安徽',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '山东',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '新疆',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '江苏',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '浙江',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '江西',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '湖北',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '广西',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '甘肃',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '山西',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '内蒙古',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '陕西',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '吉林',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '福建',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '贵州',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '广东',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '青海',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '西藏',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '四川',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '宁夏',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '海南',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '台湾',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '香港',
								value: Math.round(Math.random() * 1000)
							}, {
								name: '澳门',
								value: Math.round(Math.random() * 1000)
							}]
						}
					]
				};

				// 为echarts对象加载数据
				myChart.setOption(option);

			}
		</script>
	</body>

</html>

效果图：