<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>湖南省大数据可视化平台</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/globle.css">
</head>
<body>
<div class="main">
<div class="top_title">
<img src="./images/top_title.png"/>
</div>
<div class="datas">
<div class="data_left">
<div class="left_top">
<div class="left_top_title">基础数据</div>
<div class="left_top_main">
<div class="left_main_circle">
<p class="counter-value circle_num1">1555</p>
<span class="span_font">确权总面积<br/>(万亩)</span>
</div>
<div class="left_main_circle">
<p class="counter-value circle_num2">2137.2</p>
<span class="span_font">流转总面积<br/>(万亩)</span>
</div>
<div class="left_main_circle">
<p class="counter-value circle_num3">2545.55</p>
<span class="span_font">挂网总面积<br/>(万亩)</span>
</div>
</div>
</div>
<div class="left_bottom">
<div class="left_top_title">业务类型</div>
<div id="Business_type" class="left_top_main left_bottom_main"></div>
</div>
</div>
<div class="data_middle">
<div class="middle_top">
<div class="middle_top_list">
<div class="list_title">累计发布数</div>
<div class="list_num list_num1"><span class="counter-value">901</span>条</div>
<div class="today_list_font">今日最新发布<span>12</span>条</div>
</div>
<div class="middle_top_list">
<div class="list_title">累计交易金额</div>
<div class="list_num list_num2"><span class="counter-value">1149.66</span>亿</div>
<div class="today_list_font">今日最新交易<span>0.2</span>亿</div>
</div>
<div class="middle_top_list">
<div class="list_title">累计交易面积</div>
<div class="list_num list_num3"><span class="counter-value">2137.26</span>万亩</div>
<div class="today_list_font">今日交易面积<span>1.5</span>万亩</div>
</div>
</div>
<div id="map" class="middle_bottom"></div>
</div>
<div class="data_right">
<div class="right_top">
<div class="left_top_title">土地分析报表</div>
<div id="Land_analysis" class="left_top_main right_top_main"></div>
</div>
<div class="right_bottom">
<div class="left_top_title">信息发布报表</div>
<div id="Information_Delivery" class="left_top_main right_top_main"></div>
</div>
</div>
</div>
</div>
<!---以下代码和演示无关，请自行删除-->
<div class="btnbox ">
<a class="buybtn btna" href="https://shop303982252.taobao.com/category-1372022023.htm?spm=2013.1.w5002-16789343190.6.92e84c2cZHV8F9&search=y&catName=%B4%F3%CA%FD%BE%DD%D5%B9%B0%E5">购买最新</a>
<a class="buybtn btnb" href="tencent://message/?uin=409091039&Site=源代码设计&Menu=yes">QQ咨询</a>
</div>
<style>
a{text-decoration: none;}
.btnbox{position: fixed; bottom: 20px; width: 100%; text-align: center; z-index: 1000;}
.btnbox a{ margin:0 3px;border-radius: 30px; color: #fff; font-size: 18px; padding:8px 25px; text-shadow: -1px -1px 0px rgba(0,0,0,0.2); }
.btnbox .btna{background: linear-gradient(60deg,#26c6da,#00acc1);box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0,188,212,.4);}
.btnbox .btnb{background: linear-gradient(60deg,#66bb6a,#43a047);box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(76,175,80,.4);
}
.btnbox a:hover{background: #47c8ff}
</style>
<!---end-->
</body>
</html>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/hunan.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.min.js"></script>
<script type="text/javascript">
function OSnow(){
var agent = navigator.userAgent.toLowerCase();
var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {
$(".main").css("height","880px");
}
if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
$(".main").css("height","880px");
}
if(isMac){
}
}
OSnow();
function numInit() {
$('.counter-value').each(function(){
$(this).prop('Counter',0).animate({
Counter: $(this).text()
},{
duration: 2500,
easing: 'swing',
step: function (now){
$(this).text(now.toFixed(2));
}
});
});
}
numInit();
// 基于准备好的dom，初始化echarts实例
var i = 0;
var myChart1 = echarts.init(document.getElementById('Business_type'));
// 指定图表的配置项和数据
option1 = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data: ['土地经营权','土地流转权','房屋所有权','集体建设用地','林权'],
textStyle: {
color:'#4ADEFE',
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius: ['30%', '55%'],
center: ['45%', '35%'],
avoidLabelOverlap: false,
data:[
{value:335, name:'土地经营权'},
{value:310, name:'土地流转权'},
{value:234, name:'房屋所有权'},
{value:135, name:'集体建设用地'},
{value:1548, name:'林权'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color : ['#F3DB5D','#009AFF','#F77474','#28DCCF','#FF5937']
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
var myChart2 = echarts.init(document.getElementById('Land_analysis'));
option2 = {
legend: {
x : 'right',
y : 'top',
textStyle: {
color:'#4ADEFE',
}
},
grid:{
x: 30,
y: 50,
x2: 0,
y2: 45
},
tooltip: {},
dataset: {
source: [
['product', '本地总面积', '本地已流转面积'],
['岳阳市', 43.3, 85.8],
['益阳市', 83.1, 73.4],
['长沙市', 86.4, 65.2],
['株洲市', 72.4, 53.9],
['衡阳市', 72.4, 53.9],
['永州市', 72.4, 53.9],
['娄底市', 72.4, 53.9],
['郴州市', 72.4, 53.9],
['湘潭市', 72.4, 53.9],
]
},
xAxis: {
type: 'category',
axisLine: {
show: false,
lineStyle: {
color: "#4ADEFE",
},
},
// data: ["岳阳市","益阳市","长沙市","株洲市","衡阳市","永州市","娄底市","郴州市","湘潭市"],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
axisLine: {
lineStyle: {
color: "#4ADEFE",
}
},
splitLine: {
lineStyle: {
color: '#4ADEFE'
}
}
},
series: [
{
type: 'bar',
barMaxWidth: '10',
itemStyle: {
normal:{
color: '#4ADEFE'
},
},
},
{
type: 'bar',
barMaxWidth: '10',
itemStyle: {
normal:{
color: '#F3DB
基于Echarts的可视化大屏湖南省大数据可视化平台.rar
版权申诉
5星 · 超过95%的资源 30 浏览量
2021-04-03
00:51:53
上传
评论
收藏 533KB RAR 举报 
20.rar （14个子文件） 
20 images 
cicleBg.png 21KB top_title.png 93KB close.png 2KB
.DS_Store 6KB msgBg.png 70KB
bg.jpg 167KB dataBg.png 60KB
hunan.html 1KB js .DS_Store 6KB jquery-1.8.3.min.js 91KB echart.js 657KB css index.css 3KB globle.css 2KB index.html 11KB资源评论
woo12345678902021-07-28用户下载后在一定时间内未进行评价，系统默认好评。- 李卓颖2023-06-27感谢大佬分享的资源给了我灵感，果断支持！感谢分享~
