1. Page display
2. Introduction to the visual panel (If you want the source code of the project, you can receive it by private message)
1. Background:
In response to the current trend of data visualization, more and more companies need to use it in many scenarios (marketing data, production data, user data), and visualize the chart to display the data, making the data more intuitive and the data characteristics more prominent.
2. Project technology: div + css layout flex layout Less native js + jquery rem adaptation
3. Case adaptation scheme:
The design draft is 1920px
(1) flexible.js divides the screen into 24 equal parts
(2) The base value of the cssrem plugin is 80px
Plugin-Configuration Button---Configure Extension Settings--Settings in Root Font Size. (Restart the vscode software to ensure that it takes effect)
4. Basic code
<!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. Instructions for using echarts:
It is a JS plug-in with good performance, can run smoothly on PC and mobile devices, and is compatible with mainstream browsers. Many commonly used charts are provided, and **customizable**.
[Line Chart] (https://www.echartsjs.com/zh/option.html#series-line)
[Histogram] (https://www.echartsjs.com/zh/option.html#series-bar)
[Scatter plot](https://www.echartsjs.com/zh/option.html#series-scatter)
[Pie Chart](https://www.echartsjs.com/zh/option.html#series-pie)
[Candlestick Chart](https://www.echartsjs.com/zh/option.html#series-candlestick)
Official website address: 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>