echarts世界地图销量视图开发——小白专用

最新推荐文章于 2024-06-19 15:10:02 发布

H_MY

最新推荐文章于 2024-06-19 15:10:02 发布

阅读量698

点赞数

分类专栏：实习文章标签： html5 jquery 前端

本文链接：https://blog.csdn.net/weixin_45126622/article/details/107611608

版权

这篇博客主要介绍了如何使用Echarts库为小白开发者创建一个世界地图，展示各地区的销售数据。通过展示效果图，文件结构目录以及讲解index.html和2.html的配置，帮助读者理解如何集成和配置JS文件来实现这一功能。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

文件结构目录

在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--浏览器顶端小图标-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" charset="utf-8" /> 
    <title>安士佳全球销量分布图</title>
    <!-- 引入 echarts.min.js -->
    <script src="js/echarts.min.js"></script>
    <!-- 引入 world.js -->
    <script src="js/world.js"></script> 
    <!-- echarts/jquery.min.js -->
    <script src="js/jquery.min.js"></script>
    <!-- echarts/axios.min.js -->  
    <script src="js/axios.min.js"></script>
    <!--样式-->
	<style>
		a{
			color: blue;
			text-decoration: none;
			line-height:35px;
		}
	    span{
	    	color:white;
	    	font-size: 28px;
	    }
	    em{
	    	color:dodgerblue;
	    	font-size: 35px;
	    }
	</style>
</head>
<body >
  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:1080px;"></div>
    
    <!--右上角总数统计-->
    <div style="position: absolute; width:100%;margin-top: -950px;margin-left: 77%;">
    	<span>设备总数:<em id="all"></em> 台</span><br /><br /><br />
    	<span>在线设备:<em id="line"></em> 台</span>
    </div>  
    
    <!--页面跳转按钮-->
    <center style="position: absolute; width:100%;margin-top: -40px;">
    	<div id="" style="width: 262px; ">
    		<div onclick="window.location.href = 'index.html'" style="float: left;width: 131px;height: 39px; background: blue; border-radius: 10px 0 0 10px;">	
			 	<a style="color: white;">&nbsp;&nbsp;&nbsp;&nbsp;地图&nbsp;&nbsp;&nbsp;&nbsp;</a>
			</div>  
			<div onclick="window.location.href = '2.html'" style="float: left;width: 131px;height: 39px;background: white; border-radius:  0 10px 10px 0">
			 	<a class="active"">&nbsp;&nbsp;&nbsp;折线图&nbsp;&nbsp;&nbsp;</a>
		 	</div> 
    	</div>	 
    </center>
    
    
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

	var all_num=[];		
	var All=0;

	function getMapData() {
	    return new Promise((resolve, reject) => {
	        $.ajax({
	            url: "http://121.37.253.172/sales",
	            type: "get",
	            dataType: "JSON",
	            data: { year:  0 },
	            success: function (data) {
	            	//console.log(data)
	                resolve(data)
	            },
	            error: function (XMLHttpRequest) {
	                reject('出错了')
	            }
	        });
	    })

	}
	$(function(){
		$.ajax({
            url: "http://121.37.253.172/device/online",
            type: "post",
            dataType: "JSON",
            data: {year:0},
            success: function (data) { 
            	console.log(data);
//          	alert(data);
				$("#line").html(data.res.online);
            },
            error: function (XMLHttpRequest) {
                console.log("ajax请求失败！");