<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>数据可视化</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 头部的盒子 -->
<header>
<h1>数据可视化-ECharts</h1>
<div class="showTime"></div>
<script>
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
clearTimeout(t); //清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours(); //获取时
var m = dt.getMinutes(); //获取分
var s = dt.getSeconds(); //获取秒
document.querySelector(".showTime").innerHTML =
"当前时间：" +
y +
"年" +
mt +
"月" +
day +
"-" +
h +
"时" +
m +
"分" +
s +
"秒";
t = setTimeout(time, 1000); //设定定时器，循环运行
}
</script>
&
</header>
<!-- 页面主体部分 -->
<section class="mainbox">
<div class="column">
<div class="panel bar">
<h2>柱形图-就业行业</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line">
<h2>
折线图-人员变化 <a href="javacript:;">2020</a
><a href="javascript:;">2021</a>
</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
<div class="panel pie">
<h2>饼形图-年龄分布</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
</div>
<div class="column">
<!-- no模块制作 -->
<div class="no">
<div class="no-hd">
<ul>
<li>125811</li>
<li>100000</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>前端需求人数</li>
<li>市场供应人数</li>
</ul>
</div>
</div>
<!-- 地图模块 -->
<div class="map">
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="chart"></div>
</div>
</div>
<div class="column">
<div class="panel bar2">
<h2>柱形图-就业行业</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
<div class="panel line2">
<h2>折线图-播放量</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
<div class="panel pie2">
<h2>饼形图-地区分布</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
</div>
</section>
<script src="js/flexible.js"></script>
<script src="js/echarts.min.js"></script>
<!-- 先引入jquery -->
<script src="js/jquery.js"></script>
<!-- 必须先引入china.js 这个文件 因为中国地图需要 -->
<script src="js/china.js"></script>
<script src="js/index.js"></script>
</body>
</html>
echarts公开课，可视化面板案例以及笔记.zip
版权申诉
24 浏览量
2023-03-15
14:25:45
上传
评论
收藏 3.81MB ZIP 举报
echarts公开课，可视化面板案例以及笔记.zip （43个子文件） 
myEcharts font 
DS-DIGIT.TTF 25KB js flexible.js 1KB china.js 137KB echarts.min.js 727KB index.js 26KB jquery.js 82KB css index.less 5KB index.css 5KB
ECharts使用步骤.html 1KB index.html 4KB ECharts配置说明.html 3KB images 
weather.png 2KB jt.png 72KB lbx.png 81KB
bg.jpg 252KB line(1).png 4KB head_bg.png 8KB map.png 302KB 笔记 数据可视化.md 42KB docs media qg.png 38KB border.jpg 16KB 1576753894731.png 28KB 123.png 1.44MB 1576753693537.png 26KB 1576664444951.png 199KB 1576483576664.png 148KB echart font DS-DIGIT.TTF 25KB js flexible.js 1KB myMap.js 9KB china.js 137KB echarts.min.js 727KB index.js 16KB jquery.js 82KB css index.less 5KB index.css 5KB index.html 3KB images weather.png 2KB jt.png 72KB lbx.png 81KB bg.jpg 252KB line(1).png 4KB head_bg.png 8KB map.png 302KB资源评论
oligaga
- 粉丝: 52
- 资源: 2万+
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
