<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>上市公司全景概览 - 大屏数据可视化案例</title>
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<header id="header">
<h3 class="header-title">上市公司全景概览</h3>
<div class="header-info header-info-l">数据来源：上交所 & 深交所</div>
<div class="header-info header-info-r">数据日期：<span id="nowDate"></span></div>
</header>
<footer id="footer"></footer>
<div id="container">
<div id="flexCon">
<div class="flex-row">
<div class="flex-cell flex-cell-l">
<div class="chart-wrapper">
<h3 class="chart-title">市价总值排行Top10</h3>
<div class="chart-div" id="rankChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>
<div class="flex-cell flex-cell-c" style="padding-right:0;">
<div class="chart-wrapper">
<h3 class="chart-title">统计数据</h3>
<div class="chart-div chart-done">
<table class="data-t">
<tr>
<th><img src="img/icon-01.png" /></th>
<td>
<p><span id="listedCompany">0</span></p>
<p>上市公司数</p>
</td>
<th><img src="img/icon-02.png" /></th>
<td>
<p><span id="listedSecurity">0</span></p>
<p>上市证券数</p>
</td>
</tr>
<tr>
<th><img src="img/icon-03.png" /></th>
<td>
<p><span id="totalMarket">0</span></p>
<p>股票总市值（亿元）</p>
</td>
<th><img src="img/icon-04.png" /></th>
<td>
<p><span id="circulationMarket">0</span></p>
<p>股票流通市值（亿元）</p>
</td>
</tr>
<tr>
<th><img src="img/icon-05.png" /></th>
<td>
<p><span id="shRatio">0</span></p>
<p>上市平均市盈率</p>
</td>
<th><img src="img/icon-06.png" /></th>
<td>
<p><span id="szRatio">0</span></p>
<p>深市平均市盈率</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="flex-cell flex-cell-r" style="padding-left:0;">
<div class="chart-wrapper">
<h3 class="chart-title">上市公司地域分布</h3>
<div class="chart-div" id="mapChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>
</div>
<div class="flex-row">
<div class="flex-cell flex-cell-lc" style="padding-bottom:0;">
<div class="chart-wrapper">
<h3 class="chart-title">2018年月度股票情况及预测</h3>
<div class="chart-div" id="trendChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>
<div class="flex-cell flex-cell-r" style="padding-bottom:0;">
<div class="chart-wrapper">
<h3 class="chart-title">CSRC行业分类</h3>
<div class="chart-div" id="csrcChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/countUp.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-map-china.js"></script>
<script type="text/javascript" src="js/echarts-theme-shine.js"></script>
<script type="text/javascript">
$(function() {
//获取当天日期
(function() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth()+1;
const day = now.getDate();
$("#nowDate").html(year+"年"+month+"月"+day+"日");
})();
//获取统计数据
$.ajax({
url: "data/count-data.json",
dataType: "json"
}).done(function(data) {
//console.log('Data: ', data);
rollNum("listedCompany", 0, data.listed_companies_total);
rollNum("listedSecurity", 0, data.listed_securities_total);
rollNum("totalMarket", 0, data.total_market_value, 2);
rollNum("circulationMarket", 0, data.circulation_market_value, 2);
rollNum("shRatio", 0, data.sh_pe_ratio, 2);
rollNum("szRatio", 0, data.sz_pe_ratio, 2);
}).fail(function(jqXHR, textStatus) {
console.log("Ajax Error: ", textStatus);
});
//获取排行数据
const rankChart = echarts.init(document.getElementById("rankChart"), "shine");
const rankChartOpt = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: function(params) {
const param = params[0];
const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
const suffix = '<span style="margin-left:5px;font-size:12px;">亿元</span>';
return param.name + "<br />" +
marker + "排名：" + (param.dataIndex+1) + "<br />" +
marker + "市价总值：" + param.value + suffix;
}
},
grid: {
top: 10,
bottom: 10,
left: 60
},
xAxis: {
show: false,
type: "value"
},
yAxis: {
type: "category",
inverse: true,
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {
fontSize: 12,
color: "#b0c2f9"
}
},
series: [{
name: "市价总值排行",
type: "bar",
barCategoryGap: "60%",
label: {
show: true,
position: "right",
fontSize: 12,
color: "#188df0",
emphasis: {
color: "#e6b600"
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[
{offset: 0, color: '#b0c2f9'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#185bff'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[
{offset: 0, color: '#b0c2f9'},
{offset: 0.7, color: '#e6b600'},
{offset: 1, color: '#ceac09'}
]
)
}
}
}]
};
rankChart.setOption(rankChartOpt);
$.ajax({
url: "data/ranking-list.json",
dataType: "json"
}).done(function() {
$("#rankChart").addClass("chart-done");
}).done(function(data) {
//console.log('Data: ', data);
const xData = [];
const yData = [];
for(let i in data) {
xData.push(data[i].market_capitalization);
yData.push(data[i].stock_name);
}
rankChart.setOption({
yAxis: {
data: yData
},
series: [{
name: "市价总值排行",
data: xData
}]
});
}).fail(function(jqXHR) {
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
});
//获取地域分布数据
const mapChart = echarts.init(document.getElementById("mapChart"), "shine");
const mapChartOpt = {
tooltip: {
formatter: function(params) {
const data = params.data;
return data.name + "<br />上市公司数：" + data.value;
}
},
visualMap: {
type: "piecewise",
splitNumber: 6,
itemWidth: 10,
itemHeight: 10,
itemGap:
基于ECharts Geo的地图数据可视化设计与实现
版权申诉
84 浏览量
2022-04-15
21:12:04
上传
评论
收藏 1.77MB RAR 举报
基于ECharts Geo的地图数据可视化设计与实现.rar （24个子文件） 
基于ECharts Geo的地图数据可视化设计与实现 css 
app.css 4KB img 
icon-02.png 621B footer.png 6KB icon-01.png 2KB icon-06.png 2KB header.png 11KB bg.png 1.32MB icon-bg.png 2KB
thumb.jpg 144KB icon-07.png 631B icon-03.png 1KB icon-04.png 3KB icon-05.png 815B data region-count.json 2KB ranking-list.json 1KB csrc-industry.json 3KB month-count.json 2KB count-data.json 189B
index.html 15KB js jquery-3.3.1.min.js 85KB countUp.min.js 4KB echarts.min.js 727KB echarts-theme-shine.js 4KB echarts-map-china.js 59KB资源评论
