从零开发数据可视化

一、可视化模版展示

在这里插入图片描述

二、知识及素材准备

div + css 布局
flex布局
Less
原生js + jquery 的使用
rem适配
echarts基础

相关js、images、font百度网盘下载链接：
通过百度网盘分享的文件：素材1
链接: https://pan.baidu.com/s/1vmZHbhykcvfLzzQT5USr8w?pwd=wjx9 提取码: wjx9

三、页面分析

页面分成数个大盒子，首先，上下，header标题分为一个盒子，图标展示分为一个盒子，图标展示按左中右又分为三个盒子，依次开发。

四、页面开发

1.基础设置

创建以下基础结构：
在这里插入图片描述
index.html

index.less

//CSS 初始化
*{margin: 0;padding: 0;box-sizing: 0;
}

index.html

    <!-- 移动端页面适配代码 flexible.js 把屏幕分为 24 等份--><script src="js/flexible.js"></script>

在这里插入图片描述
下载插件cssrem

将fontsize改为80（1rem = 80px）

2.背景图设置

下载插件easyless
在这里插入图片描述
index.less

body{background: url(../images/bg.jpg) no-repeat top center;line-height: 1.15;
}

url(…/images/bg.jpg)：
运用 url() 函数指定背景图片的路径。…/images/bg.jpg 代表背景图片文件 bg.jpg 存于当前 CSS 文件所在目录的上一级目录下的 images 文件夹中。
no-repeat：
设定背景图片不进行重复显示。默认情况下，背景图片会在水平和垂直方向上重复以填满整个元素。而 no-repeat 能让背景图片仅显示一次。
top center：
这是背景图片的定位方式。top 表示背景图片在垂直方向上位于元素顶部，center 表示在水平方向上处于元素中心。

3.header头部盒子设置

布局：

高度为100px
背景图，在容器内显示
缩放比例为 100%
h1 标题部分白色 38像素居中显示行高为 80像素
时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素

index.less

header {position: relative;height: 1.25rem;background: url(../images/head_bg.png) no-repeat top center;background-size: 100% 100%;h1 {font-size: 0.475rem;color: #fff;text-align: center;line-height: 1rem;}.showTime {position: absolute;top: 0;right: 0.375rem;line-height: 0.9375rem;font-size: 0.25rem;color: rgba(255, 255, 255, 0.7);}
}

index.html

    <!--头部的盒子 --><!--头部的盒子 --><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>

4.页面主体设置

思路：先设置一个mainbox主体盒子，然后再创建左中右三个小盒子，比例为3：5：3

mainbox盒子

布局：

需要一个上左右的10px 的内边距
column 列容器，分三列，占比 3：5：3
index.html

     <section class="mainbox"><div class="column">1</div><div class="column">2</div><div class="column">3</div></section>

index.less

  .mainbox {// background-color: pink;padding: 0.125rem 0.125rem 0;display: flex;.column {flex: 3;}&:nth-child(2) {flex: 5;}}

图表盒子公共面板

以下就是这类盒子的UI展示
在这里插入图片描述
布局：

高度为 310px
1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
有line.jpg 背景图片
padding为上为 0 左右 15px 下为 40px
下外边距是 15px
利用panel 盒子 before 和after 制作上面两个角大小为 10px 线条为 2px solid #02a6b5
新加一个盒子before 和after 制作下侧两个角宽度高度为 10px
index.less

.panel {position: relative;height: 3.875rem;border: 1px solid rgba(25, 186, 139, 0.17);background: url(../images/line\(1\).png);padding: 0 0.1875rem 0.5rem;margin-bottom: 0.1875rem;&::before {position: absolute;top: 0;left: 0;content: "";width: 10px;height: 10px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}&::after {position: absolute;top: 0;right: 0;content: "";width: 10px;height: 10px;border-top: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}.panel-footer {position: absolute;left: 0;bottom: 0;width: 100%;&::before {position: absolute;bottom: 0;left: 0;content: "";width: 10px;height: 10px;border-bottom: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}&::after {position: absolute;bottom: 0;right: 0;content: "";width: 10px;height: 10px;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}}
}

index.html

    <!-- 页面主题部分 --><!-- 页面主题部分 --><section class="mainbox"><div class="column"><div class="panel"><div class="panel-footer">盒子框的下两角</div></div></div><div class="column">
中间盒子</div><div class="column">
右侧盒子</div></section>

图表子盒子-- 标题盒子与ecahrts盒子设置

布局：

标题模块 h2 高度为 48px 文字颜色为白色文字大小为 20px
图标内容模块 chart 高度 240px
以上可以作为panel公共样式部分
index.html

     <section class="mainbox"><div class="column"><div class="panel"><h2>柱状图-就业行业</h2><div class="chart">图表</div><div class="panel-footer"></div></div></div>

index.less
在 .panel 里继续加上h2与.chart的属性

    h2 {height: 0.6rem;line-height: 0.6rem;text-align: center;color: #fff;font-size: 20px;font-weight: 400;}.chart {height: 3rem;// background-color: pink;}

图表盒子css写完，直接添加成六个盒子，左三个，右三个

    <!-- 页面主题部分 --><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>折线图-就业行业</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">
中间盒子</div><div class="column"><div class="panel bar"><h2>柱状图-就业行业</h2><div class="chart">图表</div><div class="panel-footer"></div></div><div class="panel line"><h2>折线图-就业行业</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></section>

中间盒子-no数字模块及地图模块

在这里插入图片描述

布局：

上面是no 数字模块
下面是map 地图模块

数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
注意中间列 column 有个左右 10px 下 15px 的外边距
no 模块里面上下划分上面是数字（no-hd) 下面是相关文字说明(no-bd)
no-hd 数字模块有一个边框 1px solid rgba(25, 186, 139, 0.17)
no-hd 数字模块里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
no-hd 利用 after 和 before制作2个小角，边框 2px solid #02a6b5 宽度为 30px 高度为 10px
小竖线给第一个小li after 就可以 1px宽背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px

引入字体格式文件DS-DIGIT.TTF
index.less

//数字模块样式
/* 声明字体*/
@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF);
}
.no {background: rgba(101, 132, 226, 0.1);padding: 0.1875rem;.no-hd {position: relative;border: 1px solid rgba(25, 186, 139, 0.17);&::before {content: "";position: absolute;width: 30px;height: 10px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;top: 0;left: 0;}&::after {content: "";position: absolute;width: 30px;height: 10px;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;right: 0;bottom: 0;}ul {display: flex;li {position: relative;flex: 1;text-align: center;height: 1rem;line-height: 1rem;font-size: 0.875rem;color: #ffeb7b;padding: 0.05rem 0;font-family: electronicFont;font-weight: bold;&:first-child::after {content: "";position: absolute;height: 50%;width: 1px;background: rgba(255, 255, 255, 0.2);right: 0;top: 25%;}}}}.no-bd ul {display: flex;li {flex: 1;height: 0.5rem;line-height: 0.5rem;text-align: center;font-size: 0.225rem;color: rgba(255, 255, 255, 0.7);padding-top: 0.125rem;}}
}
//地图模块样式
.map {position: relative;height: 10.125rem;.chart {position: absolute;top: 0;left: 0;z-index: 5;height: 10.125rem;width: 100%;}.map1,.map2,.map3 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 6.475rem;height: 6.475rem;background: url(../images/map.png) no-repeat;background-size: 100% 100%;opacity: 0.3;}.map2 {width: 8.0375rem;height: 8.0375rem;background-image: url(../images/lbx.png);opacity: 0.6;animation: rotate 15s linear infinite;z-index: 2;}.map3 {width: 7.075rem;height: 7.075rem;background-image: url(../images/jt.png);animation: rotate1 10s linear infinite;}@keyframes rotate {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(360deg);}}@keyframes rotate1 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}}
}

在 .mainbox > .column:nth-child(2)中加入margin值：

.mainbox {padding: 0.125rem 0.125rem 0;display: flex;.column {flex: 3;}&:nth-child(2) {flex: 5;margin: 0 0.125rem 0.1875rem;}
}
//通用布局，取出li标签无序列表前的圆点
li{list-style: none;
}

index.html

<!-- 中间模块 --><div class="column"><!-- 数字模块no --><div class="no"><div class="no-hd"><ul><li>125811</li><li>104563</li></ul></div><div class="no-bd"><ul><li>前端需求人数</li><li>市场供应人数</li></ul></div></div><!-- 地图模块map --><div class="map"><div class="chart"></div><div class="map1"></div><div class="map2"></div><div class="map3"></div></div></div>

5.ECharts设置

Echarts入门

入门可参考Echarts官网：https://echarts.apache.org/handbook/zh/get-started/

1.下载并引入echarts.min.js文件，
下载地址：https://echarts.apache.org/zh/download.html
引入：

//替换为你自己的ecahrts文件目录
<script src="echarts.js"></script>

2.准备一个具备大小的DOM容器

  <!-- 为 ECharts 准备一个 DOM容器，记住要设置宽高 --><div id="main" style="width: 600px;height:400px;"></div>

3.初始化echarts实例对象

      // 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));

4.指定配置项和数据option

 // 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};

5.将配置项设置给echarts实例对象

      // 使用刚指定的配置项和数据显示图表。myChart.setOption(option);

开始操作

在index.html中引入ecahrts.min.js文件

    <!-- 引入echarts.js文件 --><script src="js/echarts.min.js"></script>

创建index.js文件，并在html中引入

    <script src="js/index.js"></script>

使用立即执行函数避免全局变量污染，
标准形式：(function () { /* 函数体代码 */ })();

柱状图模块-左侧

在这里插入图片描述

// 柱状图1模块
(function() {// 实例化对象// @ts-ignorevar myChart = echarts.init(document.querySelector(".bar .chart"));// 指定配置和数据var option = {color: ["#2f89cf"],tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow" // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: "0%",top: "10px",right: "0%",bottom: "4%",containLabel: true},xAxis: [{type: "category",data: ["旅游行业","教育培训","游戏行业","医疗行业","电商行业","社交行业","金融行业"],axisTick: {alignWithLabel: true},axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: "12"}},axisLine: {show: false}}],yAxis: [{type: "value",axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: "12"}},axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"// width: 1,// type: "solid"}},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}}],series: [{name: "直接访问",type: "bar",barWidth: "35%",data: [200, 300, 300, 900, 1500, 1200, 600],itemStyle: {barBorderRadius: 5}}]};// 把配置给实例对象myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});// 数据变化var dataAll = [{ year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },{ year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }];$(".bar h2 ").on("click", "a", function() {option.series[0].data = dataAll[$(this).index()].data;myChart.setOption(option);});
})();

index.html中添加两个a标签用于点击事件，点击年份切换数据

            <div class="panel bar"><h2>柱状图-就业行业<a href="javascript:;">2019</a><a href="javacript:;"> 2020</a></h2><div class="chart"></div><div class="panel-footer"></div></div>

折线图模块-左侧

在这里插入图片描述

/ 折线图定制
document.addEventListener('DOMContentLoaded', function() {
(function() {// 基于准备好的dom，初始化echarts实例// @ts-ignorevar myChart = echarts.init(document.querySelector(".line .chart"));// (1)准备数据var data = {year: [[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]]};// 2. 指定配置和数据var option = {color: ["#00f2f1", "#ed3f35"],tooltip: {// 通过坐标轴来触发trigger: "axis"},legend: {// 距离容器10%right: "10%",// 修饰图例文字的颜色textStyle: {color: "#4c9bfd"}// 如果series 里面设置了name，此时图例组件的data可以省略// data: ["邮件营销", "联盟广告"]},grid: {top: "20%",left: "3%",right: "4%",bottom: "3%",show: true,borderColor: "#012f4a",containLabel: true},xAxis: {type: "category",boundaryGap: false,data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],// 去除刻度axisTick: {show: false},// 修饰刻度标签的颜色axisLabel: {color: "rgba(255,255,255,.7)"},// 去除x坐标轴的颜色axisLine: {show: false}},yAxis: {type: "value",// 去除刻度axisTick: {show: false},// 修饰刻度标签的颜色axisLabel: {color: "rgba(255,255,255,.7)"},// 修改y轴分割线的颜色splitLine: {lineStyle: {color: "#012f4a"}}},series: [{name: "新增粉丝",type: "line",stack: "总量",// 是否让线条圆滑显示smooth: true,data: data.year[0]},{name: "新增游客",type: "line",stack: "总量",smooth: true,data: data.year[1]}]};// 3. 把配置和数据给实例对象myChart.setOption(option);// 重新把配置好的新数据给实例对象myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});
})();
});

饼图模块-左侧

在这里插入图片描述

(function() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.querySelector(".pie .chart"));option = {tooltip: {trigger: "item",formatter: "{a} <br/>{b}: {c} ({d}%)",position: function(p) {//其中p为当前鼠标的位置return [p[0] + 10, p[1] - 10];}},legend: {top: "90%",itemWidth: 10,itemHeight: 10,data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],textStyle: {color: "rgba(255,255,255,.5)",fontSize: "12"}},series: [{name: "年龄分布",type: "pie",center: ["50%", "42%"],radius: ["40%", "60%"],color: ["#065aab","#066eab","#0682ab","#0696ab","#06a0ab","#06b4ab","#06c8ab","#06dcab","#06f0ab"],label: { show: false },labelLine: { show: false },data: [{ value: 1, name: "0岁以下" },{ value: 4, name: "20-29岁" },{ value: 2, name: "30-39岁" },{ value: 2, name: "40-49岁" },{ value: 1, name: "50岁以上" }]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});
})();

柱状图模块-右侧

在这里插入图片描述

// 学习进度柱状图模块
(function() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.querySelector(".bar1 .chart"));var data = [70, 34, 60, 78, 69];var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];var valdata = [702, 350, 610, 793, 664];var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];option = {//图标位置grid: {top: "10%",left: "22%",bottom: "10%"},xAxis: {show: false},yAxis: [{show: true,data: titlename,inverse: true,axisLine: {show: false},splitLine: {show: false},axisTick: {show: false},axisLabel: {color: "#fff",rich: {lg: {backgroundColor: "#339911",color: "#fff",borderRadius: 15,// padding: 5,align: "center",width: 15,height: 15}}}},{show: true,inverse: true,data: valdata,axisLabel: {textStyle: {fontSize: 12,color: "#fff"}}}],series: [{name: "条",type: "bar",yAxisIndex: 0,data: data,barCategoryGap: 50,barWidth: 10,itemStyle: {normal: {barBorderRadius: 20,color: function(params) {var num = myColor.length;return myColor[params.dataIndex % num];}}},label: {normal: {show: true,position: "inside",formatter: "{c}%"}}},{name: "框",type: "bar",yAxisIndex: 1,barCategoryGap: 50,data: [100, 100, 100, 100, 100],barWidth: 15,itemStyle: {normal: {color: "none",borderColor: "#00c1de",borderWidth: 3,barBorderRadius: 15}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});
})();

折线图模块-右侧

在这里插入图片描述

// 折线图 优秀作品
(function() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.querySelector(".line1 .chart"));option = {tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: "#dddc6b"}}},legend: {top: "0%",textStyle: {color: "rgba(255,255,255,.5)",fontSize: "12"}},grid: {left: "10",top: "30",right: "10",bottom: "10",containLabel: true},xAxis: [{type: "category",boundaryGap: false,axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: 12}},axisLine: {lineStyle: {color: "rgba(255,255,255,.2)"}},data: ["01","02","03","04","05","06","07","08","09","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30"]},{axisPointer: { show: false },axisLine: { show: false },position: "bottom",offset: 20}],yAxis: [{type: "value",axisTick: { show: false },axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: 12}},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}}],series: [{name: "播放量",type: "line",smooth: true,symbol: "circle",symbolSize: 5,showSymbol: false,lineStyle: {normal: {color: "#0184d5",width: 2}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(1, 132, 213, 0.4)"},{offset: 0.8,color: "rgba(1, 132, 213, 0.1)"}],false),shadowColor: "rgba(0, 0, 0, 0.1)"}},itemStyle: {normal: {color: "#0184d5",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 12}},data: [30,40,30,40,30,40,30,60,20,40,20,40,30,40,30,40,30,40,30,60,20,40,20,40,30,60,20,40,20,40]},{name: "转发量",type: "line",smooth: true,symbol: "circle",symbolSize: 5,showSymbol: false,lineStyle: {normal: {color: "#00d887",width: 2}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(0, 216, 135, 0.4)"},{offset: 0.8,color: "rgba(0, 216, 135, 0.1)"}],false),shadowColor: "rgba(0, 0, 0, 0.1)"}},itemStyle: {normal: {color: "#00d887",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 12}},data: [50,30,50,60,10,50,30,50,60,40,60,40,80,30,50,60,10,50,30,70,20,50,10,40,50,30,70,20,50,10,40]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});
})();

饼图模块-右侧

在这里插入图片描述

// 点位分布统计模块
(function() {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".pie1  .chart"));// 2. 指定配置项和数据var option = {legend: {top: "90%",itemWidth: 10,itemHeight: 10,textStyle: {color: "rgba(255,255,255,.5)",fontSize: "12"}},tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {c} ({d}%)"},// 注意颜色写的位置color: ["#006cff","#60cda0","#ed8884","#ff9f7f","#0096ff","#9fe6b8","#32c5e9","#1d9dff"],series: [{name: "点位统计",type: "pie",// 如果radius是百分比则必须加引号radius: ["10%", "70%"],center: ["50%", "42%"],roseType: "radius",data: [{ value: 20, name: "云南" },{ value: 26, name: "北京" },{ value: 24, name: "山东" },{ value: 25, name: "河北" },{ value: 20, name: "江苏" },{ value: 25, name: "浙江" },{ value: 30, name: "深圳" },{ value: 42, name: "广东" }],// 修饰饼形图文字相关的样式 label对象label: {fontSize: 10},// 修饰引导线样式labelLine: {// 连接到图形的线长度length: 10,// 连接到文字的线长度length2: 10}}]};// 3. 配置项和数据给我们的实例化对象myChart.setOption(option);// 4. 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
})();