分享几个用Echarts做的图表3

最新推荐文章于 2024-06-30 12:49:11 发布

波比小金刚

最新推荐文章于 2024-06-30 12:49:11 发布

阅读量2.3k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/javaexploreroooo/article/details/52353720

版权

本文将介绍如何使用Echarts库创建类迁徙图，详细解析图表的配置和数据处理过程，帮助读者理解并掌握此类图表的制作技巧。

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

3.类迁徙图

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>公民系统——公民大数据</title>
	<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
	<link type="text/css" rel="stylesheet" href="css/cssgai.css"/>
	<link type="text/css"  rel="stylesheet" href="css/bar.css"/>
	<link type="text/css"  rel="stylesheet" href="css/liMarquee.css"/>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/bar.js"></script>
	<script src="js/easing.js"></script>
	<script src="js/jquery.liMarquee.js"></script>
	<script src="js/jiankong.js"></script>
	<script src="js/initechart.js"></script>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1"/>
</head>
<body>
<div class="content">
	<div class="top">
		<div class="top-left">
			<div class="top-left-content">
				<div class="top-left-one2 setpp">
					<p><span>数据采集</span></p>
					<ul class="top-left-one2ul">
						<li class="first-li">
							<div class="list-one one-list">
								<div class="list-img"><img src="img/hose.png"  ></div>
								<div class="company">提供单位</div>
								<div class="nmber"><em id="dws1">17</em>家</div>
							</div>
						</li>
						<li class="second-li">
							<div class="list-one one-list">
								<div class="list-img"><img src="img/pie.png"></div>
								<div class="company">提供类别</div>
								<div class="nmber"><em id="sjls">79</em>类</div>
							</div>
						</li>
						<li class="three-li">
							<div class="list-one one-list">
								<div class="list-img"><img src="img/bar.png"></div>
								<div class="company">数据条款</div>
								<div class="nmber"><em id="sjts">2322</em>万条</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="top-list1 setpp">
					<p>数据归集类型排名</p>
					<div class="progeress2">
						<ul >
							<li><span><em class="set">1.</em></span>
								<div class="join2" id="sjl0">参保信息<span class="canbao2"><em>123</em>万条</span></div>
								<div class="bars"><span id="bar1">55</span></div>

							</li>
							<li><span class="card"><em class="set">2.</em></span>
								<div class="join2" id="sjl1">身份证信息<span class="canbao2"><em class="card">123</em>万条</span></div>
								<div class="bars"><span id="bar2">55</span></div>

							</li>
							<li><span class="hunyian"><em class="set">3.</em></span>
								<div class="join2" id="sjl2">婚姻信息<span class="canbao2"><em class="hunyian">123</em>万条</span></div>
								<div class="bars"><span id="bar3">55</span></div>
							</li>
						</ul>
						<ul  class="progressRight">
							<li><span class="four"><em class="set">4.</em></span>
								<div class="join2" id="sjl3">住房信息<span class="canbao2"><em >123</em>万条</span></div>
								<div class="bars"><span id="bar4">55</span></div>

							</li>
							<li><span class="four"><em class="set">5.</em></span>
								<div class="join2" id="sjl4">犯罪信息<span class="canbao2"><em>123</em>万条</span></div>
								<div class="bars"><span id="bar5">55</span></div>

							</li>
							<li><span class="four"><em class="set">6.</em></span>
								<div class="join2" id="sjl5">犯罪信息<span class="canbao2"><em>123</em>万条</span></div>
								<div class="bars"><span id="bar6">55</span></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="top-list2 setpp">
					<p>数据归集历程</p>
					<div class="top-list2-content">
						<Ul class="firstul firbox">
							<li>归集条数</li>
							<li>归集条款</li>
							<li>归集条款</li>
						</Ul>
						<Ul class="firstul">
							<li><em id="gjts1">1090</em>万条</li>
							<li><em id="gjts2">1090</em>万条</li>
							<li><em id="gjts3">1090</em>万条</li>
						</Ul>
						<div class="img-bg"><img src="img/timg-bg.png"></div>
						<Ul class="timeul">
							<li>2014</li>
							<li>2015</li>
							<li>2016</li>
						</Ul>
					</div>
				</div>
			</div>
		</div>
		<div class="top-middle">
			<div class="top-middle-content">
				<div class="text">
					<button οnclick="fnJump();">查看人口云图</button>
					<p>公民大数据</p>
				</div>
				<div class="main"