一、页面展示
二、可视化面板介绍(想要项目源码的课可私信领取)
1.背景：
应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。
2.项目技术：div + css 布局 flex 布局 Less 原生js + jquery rem适配
3.案例适配方案：
设计稿是1920px
（1） flexible.js 把屏幕分为 24 等份
（2） cssrem 插件的基准值是 80px
插件-配置按钮---配置扩展设置--Root Font Size 里面 设置。（重启vscode软件保证生效）
4. 基础代码
<!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>数据可视化面板</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:;">2021</a
><a href="javascript:;">2022</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>1864004</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>
5. echarts使用说明：
是一个JS插件，性能好可流畅运行PC与移动设备，兼容主流浏览器。提供很多常用图表，且可**定制**。
[折线图] (https://www.echartsjs.com/zh/option.html#series-line)
[柱状图] (https://www.echartsjs.com/zh/option.html#series-bar)
[散点图](https://www.echartsjs.com/zh/option.html#series-scatter)
[饼图](https://www.echartsjs.com/zh/option.html#series-pie)
[K线图](https://www.echartsjs.com/zh/option.html#series-candlestick)
官网地址：https://www.echartsjs.com/zh/index.html
<div class="box"></div>
<script src="js/echarts.min.js"></script>
<script>
// 初始化实例对象 echarts.init(dom容器);
var myChart = echarts.init(document.querySelector(".box"));
// 指定配置项和数据
var option = {
// color设置我们线条的颜色 注意后面是个数组
color: ["pink", "red", "green", "skyblue"],
// 设置图表的标题
title: {
text: "折线图堆叠123"
},
// 图表的提示框组件
tooltip: {
// 触发方式
trigger: "axis"
},
// 图例组件
legend: {
// series里面有了 name值则 legend里面的data可以删掉
},
// 网格配置 grid可以控制线形图 柱状图 图表大小
grid: {
left: "3%",
right: "4%",
bottom: "3%",
// 是否显示刻度标签 如果是true 就显示 否则反之
containLabel: true
},
// 工具箱组件 可以另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 设置x轴的相关配置
xAxis: {
type: "category",
// 是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ["星期一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
// 设置y轴的相关配置
yAxis: {
type: "value"
},
// 系列图表配置 它决定着显示那种类型的图表
series: [
{
name: "邮件营销",
type: "line",
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "联盟广告",
type: "line",
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: "视频广告",
type: "line",
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: "直接访问",
type: "line",
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
// 把配置项给实例对象
myChart.setOption(option);
</script>