闭关修炼JS之数据可视化

简单的前言：生病赋闲在家，无事写点东西。

数据可视化常用解决方案

最常用的自然是Echarts
不过实际开发中，移动端可能更多的是用F2
熟练之后，还可以尝试玩一下d3.js

Echarts的基本使用

echarts使用五部曲：

下载并引入echarts.js文件------图表依赖这个js库
准备一个具备大小的DOM容器------生成的图表会放入这个容器内
初始化echarts实例对象------实例化echarts对象
指定配置项和数据------根据具体需求修改配置选项
将配置项设置给echarts实例对象------让echarts对象根据修改好的配置生效

定制配置项

学echarts的关键在于查阅文档，根据需求修改配置：echarts官网-----文档-----配置项手册
比较常见的配置有：

title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox：工具栏
grid：直角坐标系内绘图网格
xAxis：直角坐标系grid中的x轴
yAxis：直角坐标系grid中的y轴
series：系列列表。每个系列通过type决定自己的图表类型
color：调色盘颜色列表

数据可视化项目适配方案

3合1方案：
flexible.js------检测浏览器宽度，修改html文字大小
rem单位-------页面元素根据rem适配大小，配合cssrem插件
flax布局-------页面快速布局

具体来说，如：

设计稿是1920px
PC端适配：宽度在1024-1920之间页面元素宽高自适应

具体做法：

下载并引入flexible.js，打开flexible.js，修改第18行，改为除以24（flexible默认将屏幕10等分，也就是一份192px，但是这个数字太大了而且不好计算，可改为24等分，一份80px）
安装插件px to rem & rpx (cssrem) ，第一次安装好，重启vscode，在插件的配置当中设置基准值，即cssrem：root font size，当在flexible修改为24之后，就设置为80
设置限制，最小支持为1024px，最大支持1920px，也就是说小于1024px的和大于1920px的不做自适应（即固定尺寸），具体代码如下：

@media screen and （max-width:1024px）{html {font-size: 42.66px!important;}
}
@media screen and （min-width:1920px）{html {font-size: 80px!important;}
}

项目实例

index.html

<!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="fonts/icomoon.css" /><link rel="stylesheet" href="css/index.css" /><script src="js/echarts.min.js"></script><script src="js/flexible.js"></script><script src="js/jquery.min.js"></script></head><body><!-- 父容器大盒子 --><div class="viewport"><div class="column"><!-- 概览区域模块制作 --><div class="panel overview"><div class="inner"><ul><li><h4>2,190</h4><span><i class="icon-dot" style="color: #006cff"></i>设备总数</span></li><li class="item"><h4>190</h4><span><i class="icon-dot" style="color: #6acca3"></i>季度新增</span></li><li><h4>3,001</h4><span><i class="icon-dot" style="color: #6acca3"></i>运营设备</span></li><li><h4>108</h4><span><i class="icon-dot" style="color: #ed3f35"></i>异常设备</span></li></ul></div></div><!-- 监控区域模块制作 --><div class="panel monitor"><div class="inner"><div class="tabs"><a href="javascript:;" class="active">故障设备监控</a><a href="javascript:;">异常设备监控</a></div><div class="content" style="display: block;"><div class="head"><span class="col">故障时间</span><span class="col">设备地址</span><span class="col">异常代码</span></div><div class="marquee-view"><div class="marquee"><div class="row"><span class="col">20180701</span><span class="col">11北京市昌平西路金燕龙写字楼</span><span class="col">1000001</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190601</span><span class="col">北京市昌平区城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190704</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000003</span><span class="icon-dot"></span></div><div class="row"><span class="col">20180701</span><span class="col">北京市昌平区建路金燕龙写字楼</span><span class="col">1000004</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000005</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000006</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平区建西路金燕龙写字楼</span><span class="col">1000007</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000008</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000009</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190710</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000010</span><span class="icon-dot"></span></div></div></div></div><div class="content"><div class="head"><span class="col">异常时间</span><span class="col">设备地址</span><span class="col">异常代码</span></div><div class="marquee-view"><div class="marquee"><div class="row"><span class="col">20190701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000001</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190703</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190704</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190705</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190706</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190707</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190708</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190709</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190710</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div></div></div></div></div></div><!-- 点位分布统计模块制作 --><div class="point panel"><div class="inner"><h3>点位分布统计</h3><div class="chart"><div class="pie"></div><div class="data"><div class="item"><h4>320,11</h4><span><i class="icon-dot" style="color: #ed3f35"></i>点位总数</span></div><div class="item"><h4>418</h4><span><i class="icon-dot" style="color: #eacf19"></i>本月新增</span></div></div></div></div></div></div><div class="column"><!-- 地图模块 --><div class="map"><h3><span class="icon-cube"></span>设备数据统计</h3><div class="chart"><div class="geo"></div></div></div><!-- 用户统计模块 --><div class="users panel"><div class="inner"><h3>全国用户总量统计</h3><div class="chart"><div class="bar"></div><div class="data"><div class="item"><h4>120,899</h4><span><i class="icon-dot" style="color: #ed3f35"></i>用户总量</span></div><div class="item"><h4>248</h4><span><i class="icon-dot" style="color: #eacf19"></i>本月新增</span></div></div></div></div></div></div><div class="column"><!-- 订单 --><div class="order panel"><div class="inner"><!-- 筛选 --><div class="filter"><a href="javascript:;" class="active">365天</a><a href="javascript:;">90天</a><a href="javascript:;">30天</a><a href="javascript:;">24小时</a></div><!-- 数据 --><div class="data"><div class="item"><h4>20,301,987</h4><span><i class="icon-dot" style="color: #ed3f35;"></i>订单量</span></div><div class="item"><h4>99834</h4><span><i class="icon-dot" style="color: #eacf19;"></i>销售额(万元)</span></div></div></div></div><!-- 销售额 --><div class="sales panel"><div class="inner"><div class="caption"><h3>销售额统计</h3><a href="javascript:;" class="active" data-type="year">年</a><a href="javascript:;" data-type="quarter">季</a><a href="javascript:;" data-type="month">月</a><a href="javascript:;" data-type="week">周</a></div><div class="chart"><div class="label">单位:万</div><div class="line"></div></div></div></div><!-- 渠道分布以及季度销售模块 --><div class="wrap"><div class="channel panel"><div class="inner"><h3>渠道分布</h3><div class="data"><div class="radar"></div></div></div></div><!-- 销售进度模块 --><div class="quarter panel"><div class="inner"><h3>一季度销售进度</h3><div class="chart"><div class="box"><div class="gauge"></div><div class="label">50<small> %</small></div></div><div class="data"><div class="item"><h4>1,321</h4><span><i class="icon-dot" style="color: #6acca3"></i>销售额(万元)</span></div><div class="item"><h4>150%</h4><span><i class="icon-dot" style="color: #ed3f35"></i>同比增长</span></div></div></div></div></div></div><!-- 全国热榜模块制作 --><div class="top panel"><div class="inner"><div class="all"><h3>全国热榜</h3><ul><li><i class="icon-cup1" style="color: #d93f36;"></i>可爱多</li><li><i class="icon-cup2" style="color: #68d8fe;"></i>娃哈啥</li><li><i class="icon-cup3" style="color: #4c9bfd;"></i>喜之郎</li></ul></div><div class="province"><h3>各省热销 <i class="date">// 近30日 //</i></h3><div class="data"><ul class="sup"><!-- <li><span>北京</span><span>25,179 <s class="icon-up"></s></span></li><li><span>河北</span><span>23,252 <s class="icon-down"></s></span></li> --></ul><ul class="sub"><!-- <li><span></span><span> <s class="icon-up"></s></span></li> --></ul></div></div></div></div></div></div><script src="js/index.js"></script><!-- 想使用中国地图必须先引用这个china.js文件 --><script src="js/china.js"></script><!-- 引入我们自己的地图js文件 --><script src="js/myMap.js"></script></body>
</html>

index.css

/*清除元素默认的内外边距  */
* {margin: 0;padding: 0;box-sizing: border-box;
}
/*让所有斜体 不倾斜*/
em,
i {font-style: normal;
}
/*去掉列表前面的小点*/
li {list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {border: 0; /*ie6*/vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {cursor: pointer;
}
/*取消链接的下划线*/
a {color: #666;text-decoration: none;
}a:hover {color: #e33333;
}
h4 {font-weight: 400;
}
body {background: url(../images/bg.jpg) no-repeat 0 0 / cover;/* background-size: cover; */
}
/* // 实现rem适配 */
@media screen and (max-width: 1024px) {html {font-size: 42.66px !important;}
}@media screen and (min-width: 1920px) {html {font-size: 80px !important;}
}
.viewport {display: flex;min-width: 1024px;max-width: 1920px;margin: 0 auto;padding: 1.1rem 0.25rem 0;background: url(../images/logo.png) no-repeat 0 0 / contain;min-height: 780px;
}
.viewport .column {flex: 3;
}
.viewport .column:nth-child(2) {flex: 4;margin: 0.4rem 0.25rem 0;
}
/* 公共面板样式  */
.panel {position: relative;border: 15px solid transparent;border-width: 0.6375rem 0.475rem 0.25rem 1.65rem;border-image-source: url(../images/border.png);border-image-slice: 51 38 20 132;margin-bottom: 0.25rem;
}
.inner {position: absolute;top: -0.6375rem;left: -1.65rem;right: -0.475rem;bottom: -0.25rem;padding: 0.3rem 0.45rem;
}
.panel h3 {font-size: 0.25rem;color: #fff;font-weight: 400;
}
/* 概览区域模块制作 */
.overview {height: 1.375rem;
}
.overview ul {display: flex;justify-content: space-between;
}
.overview ul li h4 {font-size: 0.35rem;color: #fff;margin: 0 0 0.1rem 0.06rem;
}
.overview ul li span {font-size: 0.2rem;color: #4c9bfd;
}
/* 监控区域模块制作 */
.monitor {height: 6rem;
}
.monitor .inner {padding: 0.3rem 0;display: flex;flex-direction: column;
}
.monitor .tabs {padding: 0 0.45rem;margin-bottom: 0.225rem;display: flex;
}
.monitor .tabs a {color: #1950c4;font-size: 0.225rem;padding: 0 0.3375rem;
}
.monitor .tabs a:first-child {padding-left: 0;border-right: 0.025rem solid #00f2f1;
}
.monitor .tabs a.active {color: #fff;
}
.monitor .content {flex: 1;position: relative;display: none;
}
.monitor .head {display: flex;justify-content: space-between;line-height: 1.05;background-color: rgba(255, 255, 255, 0.1);padding: 0.15rem 0.45rem;color: #68d8fe;font-size: 0.175rem;
}
.monitor .marquee-view {position: absolute;top: 0.5rem;bottom: 0;width: 100%;overflow: hidden;
}.monitor .row {display: flex;justify-content: space-between;line-height: 1.05;font-size: 0.15rem;color: #61a8ff;padding: 0.15rem 0.45rem;
}
.monitor .row .icon-dot {position: absolute;left: 0.2rem;opacity: 0;
}
.monitor .row:hover {background-color: rgba(255, 255, 255, 0.1);color: #68d8fe;
}
.monitor .row:hover .icon-dot {opacity: 1;
}
.monitor .col:first-child {width: 1rem;
}
.monitor .col:nth-child(2) {width: 2.5rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.monitor .col:nth-child(3) {width: 1rem;
}
/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {animation: move 15s linear infinite;
}
@keyframes move {0% {}100% {transform: translateY(-50%);}
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {animation-play-state: paused;
}
/* 点位分布统计模块制作 */
.point {height: 4.25rem;
}
.point .chart {display: flex;margin-top: 0.3rem;justify-content: space-between;
}
.point .pie {width: 3.9rem;height: 3rem;margin-left: -0.125rem;
}
.point .data {display: flex;flex-direction: column;justify-content: space-between;width: 2.1rem;padding: 0.45rem 0.375rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover;
}
.point h4 {margin-bottom: 0.15rem;font-size: 0.35rem;color: #fff;
}
.point span {display: block;color: #4c9bfd;font-size: 0.2rem;
}
/* 地图模块制作 */
.map {height: 7.225rem;margin-bottom: 0.25rem;display: flex;flex-direction: column;
}
.map h3 {line-height: 1;padding: 0.2rem 0;margin: 0;font-size: 0.25rem;color: #fff;font-weight: 400;
}
.map .icon-cube {color: #68d8fe;
}
.map .chart {flex: 1;background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {width: 100%;height: 100%;
}
/* 用户统计模块 */
.users {height: 4.25rem;display: flex;
}
.users .chart {display: flex;margin-top: 0.3rem;
}
.users .bar {width: 7.35rem;height: 3rem;
}
.users .data {display: flex;flex-direction: column;justify-content: space-between;width: 2.1rem;padding: 0.45rem 0.375rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover;
}
.users h4 {margin-bottom: 0.15rem;font-size: 0.35rem;color: #fff;
}
.users span {display: block;color: #4c9bfd;font-size: 0.2rem;
}
/* 订单模块制作 */
.order {height: 1.875rem;
}
.order .filter {display: flex;
}
.order .filter a {display: block;height: 0.225rem;line-height: 1;padding: 0 0.225rem;color: #1950c4;font-size: 0.225rem;border-right: 0.025rem solid #00f2f1;
}
.order .filter a:first-child {padding-left: 0;
}
.order .filter a:last-child {border-right: none;
}
.order .filter a.active {color: #fff;font-size: 0.25rem;
}
.order .data {display: flex;margin-top: 0.25rem;
}
.order .item {width: 50%;
}
.order h4 {font-size: 0.35rem;color: #fff;margin-bottom: 0.125rem;
}
.order span {display: block;color: #4c9bfd;font-size: 0.2rem;
}
/* 销售区域 */
.sales {height: 3.1rem;
}
.sales .caption {display: flex;line-height: 1;
}
.sales h3 {height: 0.225rem;padding-right: 0.225rem;border-right: 0.025rem solid #00f2f1;
}
.sales a {padding: 0.05rem;font-size: 0.2rem;margin: -0.0375rem 0 0 0.2625rem;border-radius: 0.0375rem;color: #0bace6;
}
.sales a.active {background-color: #4c9bfd;color: #fff;
}
.sales .inner {display: flex;flex-direction: column;
}
.sales .chart {flex: 1;padding-top: 0.1875rem;position: relative;
}
.sales .label {position: absolute;left: 0.525rem;top: 0.225rem;color: #4996f5;font-size: 0.175rem;
}
.sales .line {width: 100%;height: 100%;/* background-color: pink; */
}
/* 渠道分布以及季度销售模块 */
.wrap {display: flex;
}
.channel,
.quarter {flex: 1;height: 2.9rem;
}
.channel {margin-right: 0.25rem;
}
.channel .data {overflow: hidden;
}
.channel .data .radar {height: 2.1rem;width: 100%;
}
.channel h4 {color: #fff;font-size: 0.4rem;margin-bottom: 0.0625rem;
}
.channel small {font-size: 50%;
}
.channel span {display: block;color: #4c9bfd;font-size: 0.175rem;
}
/* 季度区块 */
.quarter .inner {display: flex;flex-direction: column;margin: 0 -0.075rem;
}
.quarter .chart {flex: 1;padding-top: 0.225rem;
}
.quarter .box {position: relative;
}
.quarter .label {transform: translate(-50%, -30%);color: #fff;font-size: 0.375rem;position: absolute;left: 50%;top: 50%;
}
.quarter .label small {font-size: 50%;
}
.quarter .gauge {height: 1.05rem;
}
.quarter .data {display: flex;justify-content: space-between;
}
.quarter .item {width: 50%;
}
.quarter h4 {color: #fff;font-size: 0.3rem;margin-bottom: 0.125rem;
}
.quarter span {display: block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;color: #4c9bfd;font-size: 0.175rem;
}
/* 全国热榜模块制作 */
/* 排行榜 */
.top {height: 3.5rem;
}
.top .inner {display: flex;
}
.top .all {display: flex;flex-direction: column;width: 2.1rem;color: #4c9bfd;font-size: 0.175rem;vertical-align: middle;
}
.top .all ul {padding-left: 0.15rem;margin-top: 0.15rem;flex: 1;display: flex;flex-direction: column;justify-content: space-around;
}
.top .all li {overflow: hidden;
}
.top .all [class^="icon-"] {font-size: 0.45rem;vertical-align: middle;margin-right: 0.15rem;
}
.top .province {flex: 1;display: flex;flex-direction: column;color: #fff;
}
.top .province i {padding: 0 0.15rem;margin-top: 0.0625rem;float: right;font-style: normal;font-size: 0.175rem;color: #0bace6;
}
.top .province s {display: inline-block;transform: scale(0.8);text-decoration: none;
}
.top .province .icon-up {color: #dc3c33;
}
.top .province .icon-down {color: #36be90;
}
.top .province .data {flex: 1;display: flex;margin-top: 0.175rem;
}
.top .province ul {flex: 1;line-height: 1;margin-bottom: 0.175rem;
}
.top .province ul li {display: flex;justify-content: space-between;
}
.top .province ul span {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.top .province ul.sup {font-size: 0.175rem;
}
.top .province ul.sup li {color: #4995f4;padding: 0.15rem;
}
.top .province ul.sup li.active {color: #a3c6f2;background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub {display: flex;flex-direction: column;justify-content: space-around;font-size: 0.15rem;background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub li {color: #52ffff;padding: 0.125rem 0.175rem;
}
.clock {position: absolute;top: -0.45rem;right: 0.5rem;font-size: 0.25rem;color: #0bace6;
}
.clock i {margin-right: 5px;font-size: 0.25rem;
}
@media screen and (max-width: 1600px) {.top span {transform: scale(0.9);}.top .province ul.sup li {padding: 0.125rem 0.15rem;}.top .province ul.sub li {padding: 0.0625rem 0.15rem;}.quarter span {transform: scale(0.9);}
}

index.js

// 监控区域模块制作
(function() {$(".monitor .tabs").on("click", "a", function() {$(this).addClass("active").siblings("a").removeClass("active");// console.log($(this).index());//   选取对应索引号的content$(".monitor .content").eq($(this).index()).show().siblings(".content").hide();});// 1. 先克隆marquee里面所有的行（row）$(".marquee-view .marquee").each(function() {// console.log($(this));var rows = $(this).children().clone();$(this).append(rows);});
})();
// 点位分布统计模块
(function() {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".pie"));// 2. 指定配置项和数据var option = {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%", "50%"],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: 6,// 连接到文字的线长度length2: 8}}]};// 3. 配置项和数据给我们的实例化对象myChart.setOption(option);// 4. 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
})();
// 柱形图模块
(function() {var item = {name: "",value: 1200,// 1. 修改当前柱形的样式itemStyle: {color: "#254065"},// 2. 鼠标放到柱子上不想高亮显示emphasis: {itemStyle: {color: "#254065"}},// 3. 鼠标经过柱子不显示提示框组件tooltip: {extraCssText: "opacity: 0"}};// 1. 实例化对象var myChart = echarts.init(document.querySelector(".bar"));// 2. 指定配置和数据var option = {color: new echarts.graphic.LinearGradient(// (x1,y2) 点到点 (x2,y2) 之间进行渐变0,0,0,1,[{ offset: 0, color: "#00fffb" }, // 0 起始颜色{ offset: 1, color: "#0061ce" } // 1 结束颜色]),tooltip: {trigger: "item"},grid: {left: "0%",right: "3%",bottom: "3%",top: "3%",//  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系containLabel: true,// 是否显示直角坐标系网格show: true,//grid 四条边框的颜色borderColor: "rgba(0, 240, 255, 0.3)"},xAxis: [{type: "category",data: ["上海","广州","北京","深圳","合肥","","......","","杭州","厦门","济南","成都","重庆"],axisTick: {alignWithLabel: false,// 把x轴的刻度隐藏起来show: false},axisLabel: {color: "#4c9bfd"},// x轴这条线的颜色样式axisLine: {lineStyle: {color: "rgba(0, 240, 255, 0.3)"// width: 3}}}],yAxis: [{type: "value",axisTick: {alignWithLabel: false,// 把y轴的刻度隐藏起来show: false},axisLabel: {color: "#4c9bfd"},// y轴这条线的颜色样式axisLine: {lineStyle: {color: "rgba(0, 240, 255, 0.3)"// width: 3}},// y轴分割线的颜色样式splitLine: {lineStyle: {color: "rgba(0, 240, 255, 0.3)"}}}],series: [{name: "直接访问",type: "bar",barWidth: "60%",data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240]}]};// 3. 把配置给实例对象myChart.setOption(option);// 4. 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
})();
// 销售统计模块
(function() {// (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]],quarter: [[23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],[43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]],month: [[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]],week: [[43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],[32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]]};// 1. 实例化对象var myChart = echarts.init(document.querySelector(".line"));// 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: "#4c9bfd"},// 去除x坐标轴的颜色axisLine: {show: false}},yAxis: {type: "value",// 去除刻度axisTick: {show: false},// 修饰刻度标签的颜色axisLabel: {color: "#4c9bfd"},// 修改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);// 4. tab切换效果制作// (2) 点击切换效果$(".sales .caption").on("click", "a", function() {// 此时要注意这个索引号的问题index = $(this).index() - 1;// 点击当前a 高亮显示 调用active$(this).addClass("active").siblings("a").removeClass("active");// 拿到当前a 的自定义属性值// console.log(this.dataset.type);// 根据拿到的值 去找数据// console.log(data.year);// console.log(data["year"]);// console.log(data[this.dataset.type]);var arr = data[this.dataset.type];// console.log(arr);// 根据拿到的数据重新渲染 series里面的data值option.series[0].data = arr[0];option.series[1].data = arr[1];// 重新把配置好的新数据给实例对象myChart.setOption(option);});// 5. tab栏自动切换效果//  开启定时器每隔3s，自动让a触发点击事件即可var as = $(".sales .caption a");var index = 0;var timer = setInterval(function() {index++;if (index >= 4) index = 0;as.eq(index).click();}, 1000);// 鼠标经过sales，关闭定时器，离开开启定时器$(".sales").hover(function() {clearInterval(timer);},function() {clearInterval(timer);timer = setInterval(function() {index++;if (index >= 4) index = 0;as.eq(index).click();}, 1000);});// 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
})();
// 销售渠道模块 雷达图
(function() {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".radar"));// 2.指定配置var option = {tooltip: {show: true,// 控制提示框组件的显示位置position: ["60%", "10%"]},radar: {indicator: [{ name: "机场", max: 100 },{ name: "商场", max: 100 },{ name: "火车站", max: 100 },{ name: "汽车站", max: 100 },{ name: "地铁", max: 100 }],// 修改雷达图的大小radius: "65%",shape: "circle",// 分割的圆圈个数splitNumber: 4,name: {// 修饰雷达图文字的颜色textStyle: {color: "#4c9bfd"}},// 分割的圆圈线条的样式splitLine: {lineStyle: {color: "rgba(255,255,255, 0.5)"}},splitArea: {show: false},// 坐标轴的线修改为白色半透明axisLine: {lineStyle: {color: "rgba(255, 255, 255, 0.5)"}}},series: [{name: "北京",type: "radar",// 填充区域的线条颜色lineStyle: {normal: {color: "#fff",width: 1,opacity: 0.5}},data: [[90, 19, 56, 11, 34]],// 设置图形标记 （拐点）symbol: "circle",// 这个是设置小圆点大小symbolSize: 5,// 设置小圆点颜色itemStyle: {color: "#fff"},// 让小圆点显示数据label: {show: true,fontSize: 10},// 修饰我们区域填充的背景颜色areaStyle: {color: "rgba(238, 197, 102, 0.6)"}}]};// 3.把配置和数据给对象myChart.setOption(option);// 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
})();
// 销售模块 饼形图 半圆形 设置方式
(function() {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".gauge"));// 2. 指定数据和配置var option = {series: [{name: "销售进度",type: "pie",radius: ["130%", "150%"],// 移动下位置  套住50%文字center: ["48%", "80%"],//是否启用防止标签重叠策略// avoidLabelOverlap: false,labelLine: {normal: {show: false}},// 饼形图的起始角度为 180， 注意不是旋转角度startAngle: 180,// 鼠标经过不需要放大偏移图形hoverOffset: 0,data: [{value: 100,itemStyle: {// 颜色渐变#00c9e0->#005fc1color: new echarts.graphic.LinearGradient(// (x1,y2) 点到点 (x2,y2) 之间进行渐变0,0,0,1,[{ offset: 0, color: "#00c9e0" }, // 0 起始颜色{ offset: 1, color: "#005fc1" } // 1 结束颜色])}},{value: 100,itemStyle: {color: "#12274d"}},{value: 200,itemStyle: {color: "transparent"}}]}]};// 3. 把数据和配置给实例对象myChart.setOption(option);// 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
})();
// 全国热榜模块
(function() {// 1. 准备相关数据var hotData = [{city: "北京", // 城市sales: "25, 179", // 销售额flag: true, //  上升还是下降brands: [//  品牌种类数据{ name: "可爱多", num: "9,086", flag: true },{ name: "娃哈哈", num: "8,341", flag: true },{ name: "喜之郎", num: "7,407", flag: false },{ name: "八喜", num: "6,080", flag: false },{ name: "小洋人", num: "6,724", flag: false },{ name: "好多鱼", num: "2,170", flag: true }]},{city: "河北",sales: "23,252",flag: false,brands: [{ name: "可爱多", num: "3,457", flag: false },{ name: "娃哈哈", num: "2,124", flag: true },{ name: "喜之郎", num: "8,907", flag: false },{ name: "八喜", num: "6,080", flag: true },{ name: "小洋人", num: "1,724", flag: false },{ name: "好多鱼", num: "1,170", flag: false }]},{city: "上海",sales: "20,760",flag: true,brands: [{ name: "可爱多", num: "2,345", flag: true },{ name: "娃哈哈", num: "7,109", flag: true },{ name: "喜之郎", num: "3,701", flag: false },{ name: "八喜", num: "6,080", flag: false },{ name: "小洋人", num: "2,724", flag: false },{ name: "好多鱼", num: "2,998", flag: true }]},{city: "江苏",sales: "23,252",flag: false,brands: [{ name: "可爱多", num: "2,156", flag: false },{ name: "娃哈哈", num: "2,456", flag: true },{ name: "喜之郎", num: "9,737", flag: true },{ name: "八喜", num: "2,080", flag: true },{ name: "小洋人", num: "8,724", flag: true },{ name: "好多鱼", num: "1,770", flag: false }]},{city: "山东",sales: "20,760",flag: true,brands: [{ name: "可爱多", num: "9,567", flag: true },{ name: "娃哈哈", num: "2,345", flag: false },{ name: "喜之郎", num: "9,037", flag: false },{ name: "八喜", num: "1,080", flag: true },{ name: "小洋人", num: "4,724", flag: false },{ name: "好多鱼", num: "9,999", flag: true }]}];//  2. 根据数据渲染各省热销 sup 模块内容// (1) 遍历 hotData对象var supHTML = "";$.each(hotData, function(index, item) {// console.log(item);supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;});// 把生成的5个小li字符串给 sub dom盒子$(".sup").html(supHTML);// 3. 当鼠标进入 tab 的时候// 鼠标经过当前的小li要高亮显示$(".province .sup").on("mouseenter", "li", function() {index = $(this).index();render($(this));});// 声明一个函数 里面设置sup当前小li高亮还有 对应的品牌对象渲染// 这个函数需要传递当前元素进去function render(currentEle) {currentEle.addClass("active").siblings().removeClass();// 拿到当前城市的品牌对象// console.log($(this).index());// 可以通过hotData[$(this).index()] 得到当前的城市// console.log(hotData[$(this).index()]);// 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类// console.log(hotData[$(this).index()].brands);// 开始遍历品牌数组var subHTML = "";$.each(hotData[currentEle.index()].brands, function(index, item) {// 是对应城市的每一个品牌对象// console.log(item);subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;});// 把生成的6个小li字符串给 sub dom盒子$(".sub").html(subHTML);}// 4. 默认把第一个小li处于鼠标经过状态var lis = $(".province .sup li");lis.eq(0).mouseenter();// 5 开启定时器var index = 0;var timer = setInterval(function() {index++;if (index >= 5) index = 0;// lis.eq(index).mouseenter();render(lis.eq(index));}, 2000);$(".province .sup").hover(// 鼠标经过事件function() {clearInterval(timer);},// 鼠标离开事件function() {clearInterval(timer);timer = setInterval(function() {index++;if (index >= 5) index = 0;// lis.eq(index).mouseenter();render(lis.eq(index));}, 2000);});
})();

最终效果图

Echarts-map使用（扩展）

参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)

实现步骤：

第一需要下载china.js提供中国地图的js文件
第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入
使用社区提供的配置即可。

需要修改：

去掉图例组件和标题组件
去掉背景颜色
修改地图省份背景 #142957
地图放大通过 zoom 设置为1.2即可

    geo: {map: 'china',zoom: 1.2,label: {emphasis: {show: false}},roam: false,itemStyle: {normal: {areaColor: '#142957',borderColor: '#0692a4'},emphasis: {areaColor: '#0b1c2d'}}},

总结：实现一个需求，需要去推导，具备推导的能力需要练习，时间问题。

闭关修炼JS之数据可视化相关推荐

基于Echarts+百度地图+Three.js的数据可视化系统
上周重构项目数据统计部分写了几篇echarts相关的文章,重构的后台前端框架改用Vue,关于Vue中引用Echarts及可能遇到的问题的文章如下所示: VUE中使用Echarts图表 VUE父组件异步 ...
SpringBoot整合chart.js完成数据可视化，展现数据趋势与变化！
SpringBoot整合chart.js完成数据可视化项目源码点击进入github获取源码一个搭好的SpringBoot微服务框架,简单整合了一些东西,前后端分离,后端只需要向前端提供JSON ...
使用JavaScript和D3.js实现数据可视化
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数 ...
neo4j图形数据库第七弹——整合vis.js实现数据可视化
正经学徒,佛系记录,不搞事情基于上文:https://blog.csdn.net/qq_31748587/article/details/84232352 vis.js的项目基于上文:https ...
blender+Three.js 三维数据可视化:FUI
一个3D地球+FUI的大屏设计. 环境:blender-2.93.6-windows-x64+Three.js0.91.0+Echart2.0
加载geojson面数据_地理数据可视化
导读阅读完此文,你会了解: 1.常见的地理数据可视化图层及分类: 2.GeoJSON编码格式: 3.点的图层如何实现: 4.OD弧线图层如何实现: 5.热力图层如何实现: 数据可视化图层底图 vs ...
15种独一无二的创新数据可视化方式
全文共5489字,预计学习时长11分钟可视化能解答那些尚未发现的问题. 本·施耐德曼(Ben Shneiderman) 掌握数据可视化技术会打开新世界的大门,带来更多机会.精心设计的可视化能帮助程序 ...
Java数据可视化 (JavaFX, Apache ECharts)
需求定义~, &, ? 三种新运算. ~ a b c = a + b – c & a b c d e = a + b + c – d – e ? a b c d = a + b – ...
11个免费的数据可视化工具推荐
数据可视化之所以流行,不仅是因为它简化了我们查看复杂数据的方式,更是因为数据可视化可以加快我们获取数据信息的速度. 本文专门为您列出了11个免费的数据可视化工具,帮助您快速掌握数据可视化技能. 1.即 ...