使用Echarts绘制省份地图源码

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

写完程序去旅行

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

阅读量1.3k

点赞数 1

文章标签： java js javascript

本文链接：https://blog.csdn.net/weixin_45351390/article/details/104021871

版权

话不多说先上效果图，鼠标放在市会高亮当前市
在这里插入图片描述
地图上的两条线是因为展示需要，按照左边绘制上去了,不要问地图颜色，可以修改…
进入正题，聊一聊实现过程，首先引入echarts.js和省份.js

	<head>
		<meta charset="utf-8" />
		<script src="../js/echarts.js"></script>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script src="../js/henan.js"></script>
		<script src=""></script>
		<title></title>
	</head>

在这里插入图片描述
省份.js 链接：https://pan.baidu.com/s/1SmTpMm-dA8dECcYsFT-8rQ
提取码：5y3w

再来一块div装地图…哈哈

<body>
		<div id="main" style="width: 1900px;height:800px;">
		</div>
	</body>

注释很清晰了~

<script type="text/javascript">
		/* //container 为div的id */
		var dom = document.getElementById("main");
		//得到echarts的实例对象
		var myChart = echarts.init(dom);
		var option = {
			//背景颜色
			backgroundColor: '#fff',
			geo: {
				map: '河南',
				label: {
					//正常状态
					normal: {
						show: true,
						color: "#f00",
					},
					emphasis: {
						show: true,
					}
				},
				itemStyle: {
					borderWidth: 1, //省份的边框宽度
					color: '#0f0', //地图背景颜色
				},
				//缩放
				//roam: true,          
			},

			series: [{
				name: "河南",
				//类型:线条
				type: 'lines',
				coordinateSystem: 'geo',
				zlevel: 1,
				

				effect: {
					show: true,
					period: 2,
					trailLength: 1,
					//线条颜色
					color: '#00f',
					//线条粗细
					symbolSize: 3,

				},
				lineStyle: {
					normal: {
						//线条显色
						color: "#DAA520",
						width: 2,
						//线条弧度，0为直线
						curveness: 0.2,
					}
				},

以下是地图上显示的线的坐标代码~~

data: [{
            fromName: "安阳市",
            toName: "鹤壁市",
            coords: [
                [114.352482, 36.103442],
                [114.295444, 35.748236]
            ]
        },
            {
                fromName: "鹤壁市",
                toName: "新乡市",
                coords: [
                    [114.295444, 35.748236],
                    [113.883991, 35.302616]
                ]
            },
            {
                fromName: "鹤壁市",
                toName: "新乡市",
                coords: [
                    [113.883991, 35.302616],
                    [113.665412, 34.757975]
                ]
            },
            {
                fromName: "新乡市",
                toName: "郑州市",
                coords: [
                    [113.883991, 35.302616],
                    [113.665412, 34.757975]
                ]
            },
            {
                fromName: "郑州市",
                toName: "许昌市",
                coords: [
                    [113.665412, 34.757975],
                    [113.826063, 34.022956]
                ]
            },
            {
                fromName: "许昌市",
                toName: "漯河市",
                coords: [
                    [113.826063, 34.022956],
                    [114.026405, 33.575855]
                ]
            },
            {
                fromName: "漯河市",
                toName: "驻马店市",
                coords: [
                    [114.026405, 33.575855],
                    [114.024736, 32.980169]
                ]
            },
            {
                fromName: "驻马店市",
                toName: "信阳市",
                coords: [
                    [114.024736, 32.980169],
                    [114.075031, 32.123274],
                ],
            },
            {
                fromName: "三门峡市",
                toName: "洛阳市",
                coords: [
                    [111.194099, 34.777338],
                    [112.434468, 34.663041],
                ],
            },
            {
                fromName: "洛阳市",
                toName: "许昌市",
                coords: [
                    [112.434468, 34.663041],
                    [113.826063, 34.022956],
                ],
            },
            {
                fromName: "许昌市",
                toName: "周口市",
                coords: [
                    [113.826063, 34.022956],
                    [114.649653, 34.020357],
                ],
            },
            {
                fromName: "周口市",
                toName: "商丘市",
                coords: [
                    [114.649653, 34.020357],
                    [115.650497, 34.437054],
                ],
            },

        ]
    }]
}
myChart.setOption(option);

结束了~~

写完程序去旅行

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
使用Echarts绘制省份地图源码

话不多说先上效果图地图上的两条线是因为展示需要，按照左边绘制上去了,不要问地图颜色，可以修改…进入正题，聊一聊实现过程，首先引入echarts.js和省份.js <head> <meta charset="utf-8" /> <script src="../js/echarts.js"></script> <script s...
复制链接

扫一扫