100字范文 > 数据可视化 - Echarts图表

数据可视化 - Echarts图表

时间：2019-06-13 12:29:51

相关推荐

数据可视化 - Echarts图表

可视化项目

代码 - - > 底部

01-项目介绍

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。

该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …

线上地址：http://mylovebase.gitee.io/my-view-project/

代码仓库：/mylovebase/my-view-project.git

课程目标：

实践css布局相关技术实践jquery相关技术初步了解echarts的基本使用

02-使用技术

完成该项目需要具备以下知识：

div + css 布局flex 布局–难点css3动画css3渐变css3边框图片–新内容border-image原生js + jquery 使用rem适配(或者其它适配方式)echarts基础

03-Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

大白话：

是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表，且可定制。折线图、柱状图、散点图、饼图、K线图

04-Echarts-体验

官方教程：[五分钟上手ECharts](/zh/tutorial.html#5 分钟上手 ECharts)

自己步骤：

下载echarts /apache/incubator-echarts/tree/4.5.0引入echartsdist/echarts.min.js准备一个具备大小（宽高）的 DOM

<div id="main" style="width: 600px;height:400px;"></div>

初始化echart实例

var myChart = echarts.init(document.getElementById('main'));

指定图表的配置项和数据 (根据文档提供示例找到option)

var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]};

使用刚指定的配置项和数据显示图表

myChart.setOption(option);

05-Echarts-基础配置

需要了解的主要配置：seriesxAxisyAxisgridtooltiptitlelegendcolor

series 系列列表。每个系列通过type决定自己的图表类型大白话：图标数据，指定什么类型的图标，可以多个图表重叠。 xAxis：直角坐标系 grid 中的 x 轴yAxis：直角坐标系 grid 中的 y 轴grid：直角坐标系内绘图网格title：标题组件tooltip：提示框组件legend：图例组件color：调色盘颜色列表

演示代码：

var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',name:'线形图'},{data: [22, 333, 111, 222, 444, 666, 777],type: 'bar',name:'饼状图'}],grid: {show: true},title: {text: '标题'},tooltip: {padding: 20},legend: {data: ['线形图']},color: ['red','green']};

06-REM适配

设计稿是1920px ，约定rem基准值为 24px 。意味着：1rem === 24px那么：设备宽度与rem基准值比例为 80 。结论：适配设备的时候保持80的比例即可。将来：换算rem单位的时候(类似使用扩展插件的时候)，使用24px基准值即可。

实现代码，在页面底部加载index.js文件实现动态设置基准值逻辑：

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

// 实现rem适配(function () {var setFont = function () {var html = document.documentElementvar width = document.documentElement.clientWidthif (width < 1024) width = 1024if (width > 1920) width = 1920var fontSize = width / 80 + 'px'html.style.fontSize = fontSize}setFont()window.onresize = function () {setFont()}})()

07-基础布局

html结构：

<body><div class="layout"><div class="column"><div></div><div></div> <div></div> </div><div class="column"><div></div><div></div> </div><div class="column"><div></div><div></div> <div><div></div><div></div></div><div></div> </div> </div></body>

body 设置背景图layout主体容器，限制最小宽度1024px，与最大宽度1920px，最小高度780px。需要居中显示使用logo.png做为背景图，在容器内显示内间距 88px 20px 0 column 列容器，分三列，占比 3：4：3 中间容器外边距 32px 20px 0

css样式：

/* 基础布局 */body{font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;font-size: 0.5rem;line-height: 1.15;background: url(../images/bg.jpg) no-repeat 0 0 / cover;}h4,h3,ul{margin: 0;padding: 0;font-weight: normal;}ul{list-style: none;}a{text-decoration: none;}.layout{max-width: 1920px;min-width: 1024px;margin: 0 auto;min-height: 780px;padding: 3.667rem 0.833rem 0;background: url(../images/logo.png) no-repeat 0 0 / contain;display: flex;}.column{flex: 3;position: relative;}.column:nth-child(2){flex: 4;margin: 1.333rem 0.833rem 0;}

08-边框图片

css3中自适应边框图片运用：

组合写法：

/*border-image: source slice/width/outset repeat;*/border-image: url("images/border.jpg") 167/20px round;

拆分写法：

border-image-source: url("images/border.jpg");border-image-slice: 167 167 167 167;border-image-width: 20px;border-image-repeat: round;

解释：

border-image-source：边框图片资源地址border-image-slice：裁剪尺寸（上右下左）单位默认px，可使用百分百。border-image-width：边框图片的宽度，默认边框的宽度。border-image-repeat：平铺方式： stretch 拉伸（默认）repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。round 环绕，是完整的使用切割后的图片进行平铺。

DEMO代码：

<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}div{width: 200px;height: 200px;margin:100px auto;box-sizing: border-box;border: 27px solid red;/*padding: 27px;*//*添加边框图片*//*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*//*border-image-source: url("../images/border1.png");*//*让它成为九宫格：border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充问题：如果分别设置1，2，3，4个值代表什么意思*//*border-image-slice: 27 fill;*//*border-image-width:边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。细节：1.边框图片的本质是背景，并不会影响元素内容的放置 2.内容只会被容器的border和padding影响建议：一般将值设置为原始的边框的宽度*//*border-image-width: 27px;*//*border-image-outset:扩展边框*//*border-image-outset: 0px;*//*border-image-repeat:repeat:直接重复平铺round:将内容缩放进行完整的重复平铺*//*border-image-repeat: round;*//*缩写：*//*border-image: source slice / width/outset repeat;*/border-image: url("../images/border1.png") 27 / 27px /0px round;}</style></head><body><div>边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度</div></body></html>

09-公用面板样式

所有的面板的基础样式是一致的，提前布局好。

切割示例图：

面板 .panel

/* 面板样式 */.panel {border:1px solid;border-image-source: url('../images/border.png');/* 上右下左 *//* 上左右下 *//* 上下左右 *//* 四周一样 */border-image-slice: 55 42 26 138;border-image-width: 2.291667rem 1.75rem 1.083333rem 5.75rem;padding:.416667rem;box-sizing: border-box;margin-bottom: .833333rem;}.panel h3{font-size: 0.833rem;color: #fff;}

10-整体信息区域-布局

html结构：

<div class="baseinfo panel"><div class="item"><h2>2,190</h2><p><i class="icon-dot"></i><span>设备总数</span></p></div><div class="item"><h2>190</h2><p><i class="icon-dot"></i><span>设备总数</span></p></div><div class="item"><h2>3,001</h2><p><i class="icon-dot"></i><span>设备总数</span></p></div><div class="item"><h2>108</h2><p><i class="icon-dot"></i><span>设备总数</span></p></div></div>

样式描述：

容器高度 110pxh4字体 28px #fff 左边距 4.8px 下间隙 8pxspan字体 16px #4c9bfd

/* 概览区域 */.baseinfo{height: 4.666667rem;display: flex;justify-content: space-around;}.baseinfo h2{color: #fff;font-size: 1.25rem;font-weight: normal;line-height: 30px;}.baseinfo .item:nth-child(2) .icon-dot{color: red;}

11-监控区域-布局

html结构：

<div class="monitor panel"><div class="tabs"><a href="javascript:;" data-index="0" class="active aaaa">故障设备监控</a><a href="javascript:;" data-index="1">异常设备监控</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="list"><div class="anilist"><div class="row"><span class="col">0701</span><span class="col">11北京市昌平西路金燕龙写字楼</span><span class="col">1000001</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="list"><div class="anilist"><div class="row"><span class="col">0701aa</span><span class="col">11北京市昌平西路金燕龙写字楼</span><span class="col">1000001</span><span class="icon-dot"></span></div>...</div></div></div></div>

结构解释：

.tabs 标签选项加上active激活选项默认激活第一个选项.content 切换内容加上style="display: block;"显示内容默认激活第一个内容

样式描述：

容器内间距 24px 0.tabs 容器内间距 0 36px a 容器颜色： #1950c4 内间距：0 27px 字体：18px第一个a容器去除左侧内间距加上右侧2px宽度边框#00f2f1激活的时候颜色白色 .content容器占满剩余高度 flex:1默认隐藏 .head 容器行高 1.05 背景 rgba(255, 255, 255, 0.1) 内间距 12px 36px 颜色 #68d8fe 字体大小 14px row 容器行高 1.05 内间距 12px 36px 颜色 #68d8ff 字体大小 12px.icon-dot 字体图标绝对定位左边0.64rem 透明度0鼠标经过后：背景 rgba(255, 255, 255, 0.1) 透明度1 col容器宽度：3.2rem 8.4rem 3.2rem第二个col 一行不换行溢出省略

.monitor{height: 20rem;display: flex;flex-direction: column;position: relative;}/* 创建动画 */@keyframes scroll-top {0%{}100%{transform: translateY(-50%);}}.monitor .anilist{animation: scroll-top 15s linear infinite;}.monitor .anilist:hover{animation-play-state:paused;}.monitor .icon-dot{opacity: 0;position: absolute;left: 0.45rem;}.monitor .row:hover .icon-dot{opacity: 1;}.monitor .tabs{margin-bottom: 0.75rem;}.monitor .tabs a{color: #1950c4;font-size: 1.033333rem;padding: 0 .625rem;}.monitor .tabs a:first-child{border-right: solid #00f2f1 .083333rem;}.monitor .tabs a.active{color: #fff;}.monitor .content{flex: 1;display: none;overflow: hidden;}.monitor .content .head{padding: 0.5rem 1.0rem;background: rgba(255, 255, 255, 0.1);font-size: .683333rem;line-height: 1rem;display: flex;justify-content: space-between;text-align: left;}.monitor .content .list{width: 100%; overflow: hidden;}.monitor .anilist {width: 100%;}.monitor .content .list .row{line-height: 1.05;color: #61a8ff;font-size: 0.5rem;display: flex;justify-content: space-between;padding: 0.5rem 1.0rem;}.monitor .content .list .row .col:nth-child(2){white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

12-点位区域-布局

html结构：

<div class="site panel"><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>

css样式：

/* 点位 */.site{height: 14.166667rem;}.site h3{color:#fff;font-size: 0.783333rem;padding: .416667rem 0;}.site .chart{display: flex;justify-content: space-between;}.site .pie {flex: 3;height: 10rem;}.site .data {flex: 1;display: flex;flex-direction: column;justify-content: space-between;background-image: url(../images/rect.png);padding: 1.5rem 0.5rem;box-sizing: border-box;}.site .data h4{font-size: 1.666667rem;color: #fff;}

14-地图区域-预留布局

html结构：

<div class="map"><h3><span class="icon-cube"></span>设备数据统计</h3><div class="chart"><div class="geo"></div></div></div>

css样式：

/* 地图 */.map{height: 24rem;margin-top: .833333rem;display: flex;flex-direction: column;}.map h3 {line-height: 1;padding: 0.667rem 0;margin: 0;font-size: 0.833rem;color: #fff;}.map .icon-cube {color: #68d8fe;}.map .chart {flex: 1;background-color: rgba(255, 255, 255, 0.05);}.map .geo {width: 100%;height: 100%;}

15-用户统计-布局

html结构：

<div class="userCount panel"><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>

css样式：

/* 用户模块 */.userCount{height: 14.166667rem;}.userCount h3{color:#fff;font-size: 0.783333rem;padding: .416667rem 0;}.userCount .chart{display: flex;justify-content: space-between;}.userCount .pie {flex: 3;height: 10rem;}.userCount .data {flex: 1;display: flex;flex-direction: column;justify-content: space-between;background-image: url(../images/rect.png);padding: 1.5rem 1.25rem;box-sizing: border-box;}.userCount .data h4{font-size: 1.666667rem;color: #fff;}

16-订单区域-布局

html结构：

<div class="order panel"><div class="filter"><a href="javascript:;" data-key="day365" class="active">365天</a><a href="javascript:;" data-key="day90">90天</a><a href="javascript:;" data-key="day30">30天</a><a href="javascript:;" data-key="day1">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>

css样式：

/* 订单 */.order{height: 6.467rem;}.order .filter {display: flex;}.order .filter a {display: block;padding: 0 .833333rem;font-size: .75rem;color: #1950c4;border-right: 0.083rem 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.833rem;}.order .data{margin-top: 0.833rem;display: flex;}.order .item {flex: 1;}.order .item h4{font-size: 1.166667rem;color: #fff;margin-bottom: 0.417rem;}

17-销售统计-布局

html结构：

<div class="sales panel"><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="line"></div></div></div>

css样式：

/* 销售区域 */.sales{height: 10.333rem;}.sales {display: flex;flex-direction: column;}.sales .caption {display: flex;line-height: 1;}.sales .caption h3{font-size: 1.066667rem;color: #fff;padding-right: 0.75rem;border-right: 0.083rem solid #00f2f1;}.sales .caption a {font-size: .866667rem;padding: .208333rem;border-radius: .166667rem;margin: 0 .833333rem;}.sales .caption a.active {background-color: #4c9bfd;color: #fff;}.sales .chart{flex: 1;padding-top: 0.6rem;}.sales .chart .line{width: 100%;height: 100%;}

18-渠道区域&销售进度-布局

html结构：

<div class="wrap"><div class="channel panel"><h3>渠道分布</h3><div class="data"><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div></div></div><div class="quarter panel"><h3>一季度销售进度</h3><div class="chart"><div class="box"><div class="gauge"></div><div class="label">75<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>

css样式：

/* 渠道区块 */.wrap{display: flex;}.channel,.quarter {flex: 1;height: 9.667rem;}.channel {margin-right: 0.833rem;display: flex;flex-direction: column;}.channel h3 {color: #fff;font-size: .833333rem;margin-bottom: .416667rem;}.channel .data {flex: 1;display: flex;flex-wrap: wrap;}.channel .data .item{width: 50%;margin-bottom: .625rem;}.channel .data .item:nth-of-type(2n){text-align: center;}.channel .data .item h4{font-size: 1.5rem;color: #fff;}.channel .data .item h4 small{font-size: .5rem;}.channel .data .item > span {padding: .333333rem 0;}/* 季度区块 */.quarter {display: flex;flex-direction: column;margin: 0 -0.25rem;}.quarter .chart {flex: 1;padding-top: 0.75rem;}.quarter .box {position: relative;}.quarter .label {transform: translate(-50%, -30%);color: #fff;font-size: 1.25rem;position: absolute;left: 50%;top: 50%;}.quarter .label small {font-size: 50%;}.quarter .gauge {height: 3.5rem;}.quarter .data {display: flex;justify-content: space-between;}.quarter .item {width: 50%;}.quarter h4 {color: #fff;font-size: 1rem;margin-bottom: 0.4rem;}.quarter span {display: block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;color: #4c9bfd;font-size: 0.583rem;}

19-热销排行-布局

html结构：

<div class="list panel"><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><li><span>上海</span><span>20,760 <s class="icon-up"></s></span></li><li><span>江苏</span><span>23,252 <s class="icon-down"></s></span></li><li><span>山东</span><span>20,760 <s class="icon-up"></s></span></li></ul><ul class="sub"><li><span>你好</span><span>6.00<s class="icon-up"></s></span></li><li><span>你好</span><span>6.00<s class="icon-up"></s></span></li><li><span>你好</span><span>6.00<s class="icon-up"></s></span></li></ul></div></div></div>

css样式：

/* 排行榜 */.list{height: 11.8rem;}.list {display: flex;}.list .all{width: 10rem;display: flex;flex-direction: column;font-size: .666667rem;}.list .all ul{flex: 1;display: flex;flex-direction: column;justify-content: space-around;}.list .all [class^='icon-']{font-size: 1.466667rem;vertical-align: middle;margin-right: .625rem;}.list .province{flex: 1;flex-direction: column;}.list .province li.active{color:#fff;}.list .province i{float: right;}.list .province .data{flex: 1;display: flex;margin-top: .625rem;}.list .province .data ul {flex: 1;}.list .province .data ul li {display: flex;justify-content: space-between;padding: 0.5rem;}.list .province .data ul.sub{display: flex;color: #52ffff;flex-direction: column;justify-content: space-around;font-size: 0.5rem;background-color: rgba(10, 67, 188, 0.4);}.list .province .data ul.sub li {padding: 0.417rem 0.6rem;}

###页面效果开始-------------------

图表效果

echarts.js
我们只需要了解一些常见的图表配置即可，大部分配置项不用去纠结啊，人生主要是要开心

基本使用步骤

引入js文件添加一个用于展示图表的结构，必须有合理的宽高值初始化charts实例：echarts.init(dom)配置图表–难点调用setOption方法生成图表

常见配置

柱状图

饼图

20-监控区域-效果

功能实现分析

绑定标签页点击事件点击的时候获取data-index的值当前容器加active其他容器移除activeindex对应的内容容器显示其他容器隐藏

$('.monitor').on('click', '.tabs a', function (e) {// 样式切换$(this).addClass('active').siblings().removeClass('active')// 面板切换$('.monitor .content').eq(this.dataset.index).show().siblings('.content').hide()})

添加动画功能

实现思路：先克隆列表，追加在后面使用animation实现动画使用 translateY 向上位移 50%动画时间15s，匀速播放，循环执行。

js代码：

// 列表无限滚动,动画在样式时已经添加好，这里只是将结构复制追加，产生循环滚动的效果$(".monitor .anilist").each(function () {var $row = $(this).children().clone()$(this).append($row)})

css代码：

/* 创建动画 */@keyframes scroll-top {0%{}100%{transform: translateY(-50%);}}.monitor .anilist{animation: scroll-top 15s linear infinite;}.monitor .anilist:hover{animation-play-state:paused;}

21-点位区域-饼图

实现步骤分析

从官方示例中找到最接近项目需求的例子，适当修改。在自己的项目中使用起来按照产品需求，来定制图表。

参考官方例子

地址：/examples/zh/editor.html?c=pie-roseType

添加图表

// 实现点位-饼状图(function () {var option = {// 控制提示tooltip: {// 非轴图形，使用item的意思是放到数据对应图形上触发提示trigger: 'item',// 格式化提示内容：// a 代表图表名称 b 代表数据名称 c 代表数据 d代表当前数据/总数据的比例formatter: "{a} <br/>{b} : {c} ({d}%)"},// 控制图表series: [{// 图表名称name: '点位统计',// 图表类型type: 'pie',// 南丁格尔玫瑰图有两个圆内圆半径10% 外圆半径70%// 百分比基于图表DOM容器的半径radius: ['10%', '70%'],// 图表中心位置 left 50% top 50% 距离图表DOM容器center: ['50%', '50%'],// 半径模式，另外一种是 area 面积模式roseType: 'radius',// 数据集 value 数据的值 name 数据的名称data: [{value: 10, name: 'rose1' },{value: 5, name: 'rose2' },{value: 15, name: 'rose3' },{value: 25, name: 'rose4' },{value: 20, name: 'rose5' },{value: 35, name: 'rose6' },{value: 30, name: 'rose7' },{value: 40, name: 'rose8' }]}]};var myChart = echarts.init($('.pie')[0])myChart.setOption(option)})();

按照需求定制

数据使用

{value: 20, name: '云南' },{value: 26, name: '北京' },{value: 24, name: '山东' },{value: 25, name: '河北' },{value: 20, name: '江苏' },{value: 25, name: '浙江' },{value: 30, name: '四川' },{value: 42, name: '湖北' }

颜色设置

['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

完整代码

// 占位分布统计(function () {// 基于准备好的dom，初始化echarts实例let mychart = echarts.init($('.pie')[0])// 指定图表的配置项和数据let option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},series: [{name: '面积模式',type: 'pie',radius: [10%, 70%],center: ['50%', '50%'],roseType: 'area',// color:['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],data: [{value: 10, name: '云南' },{value: 5, name: '北京' },{value: 15, name: '山东' },{value: 25, name: '河北' },{value: 20, name: '江苏' },{value: 35, name: '广东' },{value: 30, name: '四川' },{value: 40, name: '湖北' }]}]};// 使用刚指定的配置项和数据显示图表。mychart.setOption(option)})();

22-用户统计-柱状图

实现步骤：找到合适的图表示例，拷贝代码
修改配置
1.图表数据的数量以及值
2.修改柱状图的颜色
3.修改两个轴上面的标签的颜色
4.修改垂直方向上的轴的颜色
5.修改图表的大小

参考官方示例 + 分析

地址：/examples/zh/editor.html?c=bar-simple

使用起来

// 用户统计-柱状图(function () {var option = {// 参考上面即可...};var myChart = echarts.init($('.bar')[0])myChart.setOption(option)})();

修改配置

图表数据的数量以及值

// seriesdata: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]// xaxisdata: ['上海', '广州', '北京', '深圳', '合肥', '', '...', '', '杭州', '厦门', '济南', '成都', '重庆']

修改柱状图的颜色

添加渐变色
series里面添加配置项

// 文档说明来源于：backgroundColorcolor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#00fffb' // 0% 处的颜色}, {offset: 1, color: '#0061ce' // 100% 处的颜色}]}

修改两个轴上面的标签的颜色

// xaxis 和 yaxisaxisLabel:{color:'rgb(0, 115, 211)'}

修改垂直方向上的轴的颜色

// yaxissplitLine:{show:true,lineStyle:{color: ['#00fffb']}}

修改图表的大小

grid: {left: '3%',right: '4%',bottom: '1%',top:'7%',containLabel: true}

总结：写echarts就像写css样式，且繁杂难记，今后在工作中只需要按照需求去查找，切勿死记硬背，也不需要记住呢。。。

23-订单区域-效果

单击切换，修改数据和样式
自动的切换，修改数据和样式
实现效果的关键是能够定义出合适结构的数据，并且实现页面元素和数据的关联

元素和数据的关联

<span data-id='day365'>365天</span><span data-id='day90'>90天</span>----------------------------------------------let data = {“day365":[11,22],"day90":[44,55]}----------------------------------------------那么实现关联的方式就是1.单击元素，获取元素的自定义属性，如day3652.通过自定义属性获取数据对象中的值：let arr = data['day365']3.赋值-----------------------------------------------总结：如何建立起元素和数据的关联1.如果数据是数组，就通过元素的索引关联2.如果数据是对象，那么就通过自定义属性关联

实现步骤：

提前准备数据点击后切tab激活样式点击后切换数据内容开启定时器动态切换数据

// 订单区域(function () {// 订单切换// 1.准备数据var data = {day365: {orders: '20,301,987', amount: '99834' },day90: {orders: '301,987', amount: '9834' },day30: {orders: '1,987', amount: '3834' },day1: {orders: '987', amount: '834' }}// 2.点击时切换样式// 3.点击时切换数据--操作dom$('.order').on('click', '.filter a', function () {$(this).addClass('active').siblings().removeClass('active')let key = $(this).data('key')let cdata = data[key]var $h4Order = $('.order h4:eq(0)')var $h4Amount = $('.order h4:eq(1)')$h4Order.html(cdata.orders)$h4Amount.html(cdata.amount)})// 4.定时切换let index = 0let allA = $('.order .filter a')setInterval(() => {index++if (index >= 4) {index = 0}// allA.eq(index).trigger('click')allA.eq(index).click()}, 1000);})();

24-销售统计

折线图图表的添加
jq功能
1.单击切换，同时切换样式和数据
2.自动切换，切换样式和数据：trigger(‘click’)

实现步骤分析

准备切换需要依赖的数据添加图表并进行配置绑定点击事件切换激活 tab 的样式切换图表依赖的数据开启定时器，进行切换。

定义数据

数据后期需要与标签进行关联
数据的格式是对象，对象的属性值是数据，它是一个数组

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]]}

添加图表并配置

折线图图表的配置需求

标签颜色大小图例的添加：legend线的颜色分割线的颜色水平轴标签的内容数据

标签颜色

axisLabel: {color: 'rgb(0, 115, 211)'}

大小

grid:{left: '3%',right: '4%',bottom: '1%',top: '20%',containLabel: true}

图例的添加：legend

图例的值必须和series中的数据的name属性对应

legend: {data: ['预期销售额', '实际销售额'],textStyle:{color: 'rgb(0, 115, 211)'}}------------------要设置name属性-------------------series: [{name:'预期销售额',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true},{name:'实际销售额',data: [333, 323, 456, 456, 543, 213, 666],type: 'line',smooth: true}]

线的颜色

// 设置线的颜色lineStyle:{color:'red'}

分割线的颜色

splitLine:{lineStyle:{color:'rgb(0, 115, 211)'}}

设置水平轴的标签

xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],axisLabel: {color: 'rgb(0, 115, 211)'}}

设置数据

series: [{name:'预期销售额',data: data['year'][0],type: 'line',smooth: true,// 设置线的颜色lineStyle:{color:'red'}},{name:'实际销售额',data: data['year'][1],type: 'line',smooth: true,lineStyle:{color:'yellow'}}]

jq功能的实现

单击切换：绑定click事件
自动切换:添加定时器，触发元素的单击事件
在事件中拿到元素的自定义属性，通过自定义属性获取对应的数据，赋值给series的data
添加鼠标进入到移出事件，停止和重启定时器

// jq功能$('.sales .caption a').on('click',function(){$(this).addClass('active').siblings().removeClass('active')let type = $(this).data('type')let current = data[type]// 给series的data属性赋值option.series[0].data = current[0]option.series[1].data = current[1]// 重新渲染图表:修改了图表的配置之后,要让配置起作用必须重新渲染mychart.setOption(option)})let index = 0let timeid = setInterval(function() {index ++if(index >= $('.sales .caption a').length){index = 0}$('.sales .caption a').eq(index).trigger('click')}, 2000);// 添加鼠标移入和移出的事件$('.sales .line').on('mouseenter',function(){clearInterval(timeid)}).on('mouseleave',function(){timeid = setInterval(function() {index ++if(index >= $('.sales .caption a').length){index = 0}$('.sales .caption a').eq(index).trigger('click')}, 2000)})

25-销售进度-饼状图

实现步骤分析

寻找官方的类似示例，给予分析。在项目中使用起来。按照需求来定制它。

添加图表

参考官方示例：/examples/zh/editor.html?c=pie-doughnut

// 销量进度-饼状图(function () {var option = {series: [{type: 'pie',radius: ['50%', '70%'],label: {show: false,},data: [{value: 100, name: '直接访问' },{value: 100, name: '邮件营销' },{value: 200, name: '联盟广告' }]}]}var myChart = echarts.init($('.gauge')[0])myChart.setOption(option)})();

图表配置

需求1：改成半圆，大一些，让75%文字在中心。

需求2：鼠标经过无需变大，第一段颜色和第二段颜色不一样。

// 一季度销售进度(function () {let mychart = echarts.init($('.quarter .gauge')[0])let option = {series: [{name: '访问来源',type: 'pie',radius: ['80%', '100%'],avoidLabelOverlap: false,startAngle: 180,labelLine: {show: false},hoverOffset: 0,data: [{value: 75, itemStyle: {color: 'skyblue'},emphasis: {itemStyle: {color: 'skyblue' // 鼠标上移没有高亮效果，因为高亮色和原始是同一个颜色}}},{value: 25 },{value: 100, itemStyle: {color: 'transparent'}}]}]};mychart.setOption(option)})()

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

27-热销排行-效果-课后完成

实现思路：

准备假数据，只有一组当数据进入 tab 的时候激活当前的tab样式，删除其他tab的样式随机打乱事先准备好的一组数据根据新数据拼接html格式字符串，进行渲染默认激活第一个tab的效果开启定时器，按顺便切换

预备知识：

扩展知识1：排序sort函数

扩展知识2：ES6模版字符

// 数据var data = [1,5,12,10]// 从小到大排序data.sort(function(a,b){return a-b})// 从大到小排序data.sort(function(a,b){return b-a})// 每次取出两个值进行比较 a 是第二个 b 是第一个// 如果回调函数返回值大于0 a排b后// 如果回调函数返回值等于0 不排// 如果回调函数返回值小于0 b排a后// 随机排序data.sort(function(a,b){return 0.5-Math.random()})

// 模版字符var data = {name:'tom'}var str = `你的名字是：${data.name}`// 用户拼接字符串，可以换行，在拼接html的时候常用。

开始实现：

第一步：模拟数据

var data = [{name: '可爱多', num: '9,086' },{name: '娃哈哈', num: '8,341' },{name: '喜之郎', num: '7,407' },{name: '八喜', num: '6,080' },{name: '小洋人', num: '6,724' },{name: '好多鱼', num: '2,170' },]

第二步：绑定鼠标经过事件，激活样式，根据随机数据渲染内容。

$('.province').on('mouseenter','.sup li',function(){// 样式$(this).addClass('active').siblings().removeClass('active')// 打乱数据var randomData = data.sort(function(a,b){return 0.5 - Math.random()})// 拼接字符串var html = ''randomData.forEach(function(item){html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`})// 渲染$('.sub').html(html)})

第三步：默认激活第一个tab

// 所有的LIvar $lis = $('.province .sup li')// 第一个默认激活$lis.eq(0).mouseenter()

第四步：开启定时切换

// 开启定时器切换var index = 0setInterval(function () {index++// 大于等于5索引切换到0索引if (index >= 5) index = 0// 选中对应tab触发点击$lis.eq(index).mouseenter()}, 1000)

补充-Echarts-社区介绍

社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。

在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。

补充-Echarts-map使用（扩展）

参考社区的例子：/editor.html?c=x2Ei_JbHZb

实现步骤：

需要下载china.js提供中国地图的js文件导入后，使用社区提供的配置即可。

(function () {// 使用配置即可...var myecharts = echarts.init($('.map .geo')[0])myecharts.setOption(option)})()

需要修改：

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

总结：这例子是扩展案例，大家以后可以多看看社区里面的案例。

代码:

index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="./assets/fonts/icomoon.css" /><link rel="stylesheet" href="./styles/reset.css" /><link rel="stylesheet" href="./styles/index.css" /><title>68-可视化</title></head><body><div class="layout"><div class="left"><div class="info borderImage"><div class="item"><span>2,190</span><span> <i class="icon-dot" style="color:red"></i> 设备总数</span></div><div class="item"><span>2,190</span><span> <i class="icon-dot" style="color:green"></i> 设备总数</span></div><div class="item"><span>2,190</span><span> <i class="icon-dot" style="color:blue"></i> 设备总数</span></div><div class="item"><span>2,190</span><span><i class="icon-dot" style="color:yellow"></i> 设备总数</span></div></div><div class="monitor borderImage"><div class="title"><span class="active">故障设备监控</span> |<span>异常设备监控</span></div><div class="content"><div class="title"><span>故障时间</span><span>设备地址</span><span>异常代码</span></div><div class="box"><ul class="list"><li><span>127356</span><span>广州传智播客1</span><span>100001</span></li><li><span>127356</span><span>广州传智播客2</span><span>100001</span></li><li><span>127356</span><span>广州传智播客3</span><span>100001</span></li><li><span>127356</span><span>广州传智播客4</span><span>100001</span></li><li><span>127356</span><span>广州传智播客5</span><span>100001</span></li><li><span>127356</span><span>广州传智播客6</span><span>100001</span></li><li><span>127356</span><span>广州传智播客7</span><span>100001</span></li><li><span>127356</span><span>广州传智播客8</span><span>100001</span></li><li><span>127356</span><span>广州传智播客9</span><span>100001</span></li><li><span>127356</span><span>广州传智播客10</span><span>100001</span></li><li><span>127356</span><span>广州传智播客11</span><span>100001</span></li></ul></div></div><div class="content" style="display:none"><div class="title"><span>故障时间</span><span>设备地址</span><span>异常代码</span></div><div class="box"><ul class="list"><li><span>127356</span><span>黑马程序员1</span><span>100001</span></li><li><span>127356</span><span>黑马程序员2</span><span>100001</span></li><li><span>127356</span><span>黑马程序员3</span><span>100001</span></li><li><span>127356</span><span>黑马程序员4</span><span>100001</span></li><li><span>127356</span><span>黑马程序员5</span><span>100001</span></li><li><span>127356</span><span>黑马程序员6</span><span>100001</span></li><li><span>127356</span><span>黑马程序员7</span><span>100001</span></li><li><span>127356</span><span>黑马程序员8</span><span>100001</span></li><li><span>127356</span><span>黑马程序员9</span><span>100001</span></li><li><span>127356</span><span>黑马程序员10</span><span>100001</span></li><li><span>127356</span><span>黑马程序员11</span><span>100001</span></li></ul></div></div></div><div class="site borderImage"><h3 class="title">站点分布统计</h3><div class="content"><div class="pie"></div><div class="data"><div class="item"><h2>2,190</h2><span><i class="icon-dot" style="color:red"></i> 设备总数</span></div><div class="item"><h2>2,190</h2><span><i class="icon-dot" style="color:green"></i> 设备总数</span></div></div></div></div></div><div class="center"><div class="map"><h3><span class="icon-cube"></span>设备数据统计</h3><div class="chart"><div class="geo"></div></div></div><div class="user borderImage"><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 class="right"><div class="order borderImage"><div class="filter"><a href="javascript:;" data-key="day365" class="active">365天</a><a href="javascript:;" data-key="day90">90天</a><a href="javascript:;" data-key="day30">30天</a><a href="javascript:;" data-key="day1">24小时</a></div><div class="data"><div class="item"><h4 class="orderNum"></h4><span><i class="icon-dot" style="color: #ed3f35;"></i>订单量</span></div><div class="item"><h4 class="saleNum"></h4><span><i class="icon-dot" style="color: #eacf19;"></i>销售额(万元)</span></div></div></div><div class="sales borderImage"><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="line"></div></div></div><div class="channel"><div class="channel_left borderImage"><h3>渠道分布</h3><div class="data"><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div></div></div><div class="channel_right borderImage"><h3>一季度销售进度</h3><div class="chart"><div class="box"><div class="gauge"></div><div class="label">75<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 class="list borderImage"><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><li><span>上海</span><span>20,760 <s class="icon-up"></s></span></li><li><span>江苏</span><span>23,252 <s class="icon-down"></s></span></li><li><span>山东</span><span>20,760 <s class="icon-up"></s></span></li></ul><ul class="sub"><li><span>你好</span><span>6.00<s class="icon-up"></s></span></li><li><span>你好</span><span>6.00<s class="icon-up"></s></span></li><li><span>你好</span><span>6.00<s class="icon-up"></s></span></li></ul></div></div></div></div></div><script src="./libs/jquery-1.12.4.js"></script><script src="./libs/echarts.min.js"></script><script src="./js/index.js"></script><script src="./libs/china.js"></script><script src="./libs/mychart-map.js"></script></body></html>

end

index.less

@normalColor: #0079d5;body {background-image: url(../images/bg.jpg);background-size: cover;font-size: 12px;}.layout {width: 100%;min-width: 1024px;max-width: 1920px;min-height: 780px;background-image: url(../images/logo.png);background-repeat: no-repeat;background-size: contain;display: flex;padding: 3.666667rem 0.833333rem 0;box-sizing: border-box;}.borderImage {/* 添加边框图片 */border: 1px solid;/* border-width: 2.291667rem 1.708333rem 0.958333rem 5.458333rem; */border-image-source: url('../images/border.png');border-image-slice: 55 41 23 131;/* 边框图片的默认宽度和你设置的border-width一样 */border-image-width: 2.291667rem 1.708333rem 0.958333rem 5.458333rem;padding: 0.416667rem;box-sizing: border-box;}// 添加位移动画@keyframes move {from {}to {transform: translateY(-100%);}}/* 第一列 */.left {flex: 3;.info {height: 4.583333rem;display: flex;// 设置主轴方向上的元素的排列方式justify-content: space-around;// 设置侧轴方向上元素的排列方式align-items: center;// 列表块.item {color: #fff;display: flex;// 设置主轴的方向，默认是rowflex-direction: column;span:nth-child(1) {font-size: 1.083333rem;}span:nth-child(2) {color: @normalColor;line-height: 1.166667rem;}}}.monitor {height: 19.833333rem;margin: 0.833333rem 0;display: flex;flex-direction: column;> .title {color: @normalColor;text-indent: 2em;margin: 0.333333rem 0;> span {line-height: 1.25rem;font-size: 0.916667rem;cursor: pointer;&.active {color: #fff;}}}.content {flex: 1;> .title {display: flex;color: @normalColor;justify-content: space-around;background-color: #1a1f2e;> span {line-height: 1.5rem;}}.box {flex: 1;display: flex;height: 14rem;overflow: hidden;> .list {flex: 1;list-style: none;animation: move 8s 2s linear infinite;> li {display: flex;color: @normalColor;justify-content: space-around;line-height: 1.25rem;}}}}}.site {height: 14.083333rem;display: flex;flex-direction: column;.title {flex: 0;color: #fff;line-height: 30px;font-size: 16px;text-indent: 1em;}.content {flex: 1;display: flex;.pie {flex: 2;}.data {flex: 1;background-color: #021137;display: flex;flex-direction: column;justify-content: space-around;align-items: center;h2 {color: #fff;font-size: 1.083333rem;}span {color: #006cff;}}}}}/* 第二列 */.center {flex: 4;margin: 1.416667rem 0.833333rem 0;.map {height: 24rem;margin-top: 0.833333rem;display: flex;flex-direction: column;h3 {line-height: 1;padding: 0.667rem 0;margin: 0;font-size: 0.833rem;color: #fff;.icon-cube {color: #68d8fe;}}.chart {flex: 1;background-color: rgba(255, 255, 255, 0.5);.geo {width: 100%;height: 100%;}}}.user {height: 13.083333rem;margin-top: 0.833333rem;padding: 0 20px;> h3 {color: #fff;font-size: 0.783333rem;padding: 0.416667rem 0;text-indent: 2em;}.chart {display: flex;justify-content: space-between;.pie {flex: 3;height: 10rem;}.data {flex: 1;display: flex;flex-direction: column;justify-content: space-between;background-image: url(../images/rect.png);background-repeat: no-repeat;padding: 1.5rem 1.25rem;box-sizing: border-box;h4 {font-size: 1.083333rem;color: #fff;}span {color: #fff;}}}}}/* 第三列 */.right {flex: 3;.order {height: 6.083333rem;padding: 10px 20px;.filter {display: flex;a {display: block;padding: 0 0.833333rem;font-size: 0.75rem;color: #1950c4;border-right: 0.083rem solid #00f2f1;&.active {color: #fff;font-size: 0.833rem;}}a:first-child {padding-left: 0;}a:last-child {border-right: none;}}.data {margin-top: 0.833rem;display: flex;.item {flex: 1;h4 {font-size: 1.083333rem;color: #fff;margin-bottom: 0.417rem;}span {color: #fff;}}}}.sales {height: 10.25rem;margin: 0.833333rem 0;display: flex;flex-direction: column;padding: 10px 20px;.caption {display: flex;line-height: 1;h3 {font-size: 0.833333rem;color: #fff;padding-right: 0.75rem;border-right: 0.083rem solid #00f2f1;}a {font-size: 0.866667rem;padding: 0.208333rem;border-radius: 0.166667rem;margin: 0 0.833333rem;&.active {background-color: #4c9bfd;color: #fff;}}}.chart {flex: 1;padding-top: 0.6rem;.line {width: 100%;height: 100%;}}}.channel {height: 9.583333rem;display: flex;justify-content: space-between;margin-bottom: 0.833333rem;.channel_left {flex: 1;margin-right: 0.833rem;display: flex;flex-direction: column;padding: 0.416667rem 0.833333rem;h3 {color: #fff;font-size: 0.833333rem;margin-bottom: 0.416667rem;}.data {flex: 1;display: flex;flex-wrap: wrap;.item {width: 50%;margin-bottom: 0.625rem;h4 {font-size: 1.5rem;color: #fff;small {font-size: 0.5rem;}}> span {padding: 0.333333rem 0;color: #fff;}}.item:nth-of-type(2n) {text-align: center;}}}.channel_right {flex: 1;display: flex;flex-direction: column;margin: 0 -0.25rem;.chart {flex: 1;padding-top: 0.75rem;.box {position: relative;.gauge {height: 3.5rem;}.label {transform: translate(-50%, -30%);color: #fff;font-size: 1.25rem;position: absolute;left: 50%;top: 50%;small {font-size: 50%;}}}.data {display: flex;justify-content: space-between;.item {width: 50%;h4 {color: #fff;font-size: 1rem;margin-bottom: 0.4rem;}span {display: block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;color: #4c9bfd;font-size: 0.583rem;}}}}}}.list {height: 11.666667rem;display: flex;.all {width: 10rem;display: flex;flex-direction: column;font-size: 0.666667rem;ul {flex: 1;display: flex;flex-direction: column;justify-content: space-around;[class^='icon-'] {font-size: 1.466667rem;vertical-align: middle;margin-right: 0.625rem;}li {color: #fff;}}}.province {flex: 1;flex-direction: column;h3 {color: #fff;}li.active {color: #fff;}.data {flex: 1;display: flex;margin-top: 0.625rem;ul {flex: 1;li {display: flex;justify-content: space-between;padding: 0.5rem;color: #fff;}&.sub {display: flex;color: #52ffff;flex-direction: column;justify-content: space-around;font-size: 0.5rem;background-color: rgba(10, 67, 188, 0.4);li {padding: 0.417rem 0.6rem;}}}}}}}

end

index.js

$(function() {// 1.实现屏幕的适配// 1.获取当前页面的宽度// 2.按之前约定的份数计算出1rem在当前页面宽度下的px值// 3.将计算出的大小设置为当前页面的html根元素function shipei() {// 1.获取当前页面的宽度let width = document.documentElement.clientWidthif (width > 1920) {width = 1920}if (width < 1024) {width = 1024}// 2.按之前约定的份数计算出1rem在当前页面宽度下的px值let fontsize = width / 80// 3.将计算出的大小设置为当前页面的html根元素,因为rem是参照html根元素的字体大小的document.documentElement.style.fontSize = fontsize + 'px'}shipei()window.resize = function() {shipei()}// 监控区域// 1，单击标题能够// 1.1 切换样式// 1.2 切换内容面板// 2.实现动画的无缝滚动// 2.1 拷贝两个content下面的li元素，追加到对应的容器中;(function() {// 实现动画的无缝滚动$('.monitor .list').each(function(index, value) {// 拷贝当前list下面的所有子元素，并添加到当前list做为子元素// clone：复制$(value).append($(value).children().clone())})// 单击标题能够切换样式和内容面板$('.monitor > .title > span').on('click', function() {// 切换样式$(this).addClass('active').siblings().removeClass('active')// 获取当前标题的索引，这个索引就对应着content内容面板的索引let index = $(this).index()// .siblings('.content')，因为content还有其它的兄弟元素，而我们只需要控制content的显示隐藏$('.monitor .content').eq(index).show().siblings('.content').hide()})})()// 3.添加饼图;(function() {// 1.创建图表实例let mychart = echarts.init($('.pie')[0])// 2.找到option配置let option = {color: ['red','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'],tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},series: [{name: '面积模式',type: 'pie',radius: [20, 70],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 5},data: [{value: 30, name: 'rose 1' },{value: 28, name: 'rose 2' },{value: 26, name: 'rose 3' },{value: 24, name: 'rose 4' },{value: 22, name: 'rose 5' },{value: 20, name: 'rose 6' },{value: 18, name: 'rose 7' },{value: 16, name: 'rose 8' }]}]}// 3.使用配置进行图表的绘制mychart.setOption(option)})()// 4.添加柱状图;(function() {let item = {value: 1300,itemStyle: {color: '#ccc'}}// 添加图表// initlet mychart = echarts.init($('.user .pie')[0])// optionlet option = {color: {type: 'linear', // 线性渐变// 下面四个选项组成一个向量x: 0, // 起始x坐标y: 0, // 起始y坐标x2: 0, // 结束x坐标y2: 1, // 结束y坐标colorStops: [{offset: 0,color: '#00eff6' // 0% 处的颜色},{offset: 1,color: '#006ad0' // 100% 处的颜色}],global: false // 缺省为 false},// 工具提示tooltip: {trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},// 网格：设置大小grid: {left: '3%',right: '3%',bottom: '2%',top: '8%',containLabel: true},// 水平轴，与水平轴相差的设置都在这个配置选项中xAxis: [{type: 'category',data: ['上海','广州','北京','深圳','合肥','','...','','杭州','厦门','济南','成都','重庆'],axisTick: {alignWithLabel: true},axisLabel: {// 水平轴标签文本的配置选项color: 'skyblue', //标签文本颜色interval: 0, //标签的间隔，0代表强制显示所有的标签文本rotate: 45 // 对标签文本进行放置设置},axisLine: {lineStyle: {color: 'skyblue'}}}],// Y轴yAxis: [{type: 'value',axisLabel: {color: 'skyblue'},axisLine: {lineStyle: {color: 'skyblue'}},splitLine: {// 垂直方向上的分隔线--网格线lineStyle: {color: 'skyblue'}}}],// 数据系列series: [{name: '直接访问',type: 'bar',barWidth: '60%',data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240]}]}// setOptionmychart.setOption(option)})()// 5.实现订单销售区域;(function() {// 5.1 模拟，使用数组方式模拟，里面的每个元素都是对象。每个对象有两个属性，分别代表订单和销售数据let data = [{order: 1234567, sale: 2345678 },{order: 12345, sale: 23456 },{order: 123, sale: 2348 },{order: 12, sale: 23 }]let index = 0 // 全局的索引// 5.2 为四个选项添加单击事件$('.order > .filter > a').on('click', function() {// 切换样式：排他法$(this).addClass('active').siblings().removeClass('active')// 数据在数组中，所以我们应该获取当前被单击的元素的索引，通过索引获取到数据let cindex = $(this).index()// 单击之后，要重置全局的索引，以便让定时从当前索引继续轮播index = cindex// 获取索引位置的数据对象let current = data[cindex]// 为元素赋值$('.orderNum').text(current.order)$('.saleNum').text(current.sale)})// 页面加载之后，让第一个a标签自动触发一次click事件// $('.order > .filter > a').eq(1).click()$('.order > .filter > a').eq(0).trigger('click')// 添加定时器，实现自动轮播let timeid = nullfunction startTime() {timeid = setInterval(function() {index++if (index >= $('.order > .filter > a').length) {index = 0}$('.order > .filter > a').eq(index).trigger('click')}, 2000)}// 启用定时器startTime()// 鼠标进入到四个选项区域，清除定时器，移出之后重启定时器$('.order > .filter > a').on('mouseenter', function() {clearInterval(timeid)}).on('mouseleave', function() {startTime()})})()// 6.销售统计;(function() {// 数据模拟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]]}// 实现自动轮播let index = 0let timerId = null// 6.1 添加图表let mychart = echarts.init($('.line')[0])let option = {// 图例legend: {data: ['预期销售额', '实际销售额'],textStyle: {color: 'skyblue'}},// 工具提示tooltip: {trigger: 'axis'},// 网格：设置大小grid: {left: '3%',right: '3%',bottom: '2%',top: '20%',containLabel: true},xAxis: {type: 'category',data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],axisLabel: {color: 'skyblue',interval: 0,rotate: 45}},yAxis: {type: 'value',axisLabel: {color: 'skyblue'},splitLine: {lineStyle: {color: '#444'}}},series: [{name: '预期销售额',data: data['year'][0],type: 'line',smooth: true,lineStyle: {color: 'yellow',width: 3}},{name: '实际销售额',data: data['year'][1],type: 'line',smooth: true,lineStyle: {color: 'red',width: 3}}]}mychart.setOption(option)// 添加选项的单击事件$('.sales .caption > a').on('click', function() {// 样式切换$(this).addClass('active').siblings().removeClass('active')// 当前单击之后，要将索引重置index = $(this).index() - 1// 切换图表数据// 先获取当前被单击元素的自定义属性type的值// let type = $(this).attr('data-type')// let type = $(this).data('type')let type = $(this).data().type// 获取数据let current = data[type]// 为图表series的data属性赋值option.series[0].data = current[0]option.series[1].data = current[1]// 更新数据之后，需要重新渲染图表，否则没有效果mychart.setOption(option)})function start() {timerId = setInterval(function() {index++if (index >= $('.sales .caption > a').length) {index = 0}$('.sales .caption > a').eq(index).click()}, 2000)}start()// 移入到图表区域停止定时器，移出之后重启定时器$('.line').on('mouseenter', function() {clearInterval(timerId)}).on('mouseleave', function() {start()})})()})

end

mymap.js

end

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。