100字范文 > 数据可视化（BI报表的开发）第二天

数据可视化（BI报表的开发）第二天

时间：2019-07-18 14:19:43

相关推荐

数据可视化（BI报表的开发）第二天

9、公用面板样式

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

面板 .panel ：box-sizing，边框图，大小，定位【51 38 20 132】容器 .inner：padding：24，36，定位外部拉宽标题 h3：20px，颜色

/* 面板样式 */.panel{box-sizing: border-box;border: 2rem solid transparent;border-width: 2.125rem 1.583rem 0.833rem 5.5rem;border-image: url(../images/border.png) 51 38 21 132;margin-bottom: 0.833rem;position: relative;}.panel .inner{padding: 1rem 1.5rem;position: absolute;top: -2.125rem;right: -1.583rem;bottom: -0.833rem;left: -5.5rem;}.panel h3{font-size: 0.833rem;color: #fff;}

10、概览区域-布局

html结构：

<div class="overview panel"><div class="inner"><div class="item"><h4>2,190</h4><span><i class="icon-dot" style="color: #006cff"></i>设备总数</span></div><div class="item"><h4>190</h4><span><i class="icon-dot" style="color: #6acca3"></i>季度新增</span></div><div class="item"><h4>3,001</h4><span><i class="icon-dot" style="color: #6acca3"></i>运营设备</span></div><div class="item"><h4>108</h4><span><i class="icon-dot" style="color: #ed3f35"></i>异常设备</span></div></div></div>

样式描述：

容器高度 110pxh4字体 28px #fff 左边距 4.8px 下间隙 8pxspan字体 16px #4c9bfd注意：引入图标地址（fonts文件夹里面的css）

/* 概览区域 */.overview{height: 4.583rem;}.overview .inner{display: flex;justify-content: space-between;}.overview h4{font-size: 1.167rem;padding-left: 0.2rem;color: #fff;margin-bottom: 0.333rem}.overview span{font-size: 0.667rem;color: #4c9bfd;}

11、监控区域-布局

html结构：

<div class="monitor panel"><div class="inner"><div class="tabs"><a href="javascript:;" data-index="0" class="active">故障设备监控</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="marquee-view"><div class="marquee"><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 class="row"><span class="col">0601</span><span class="col">北京市昌平区城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0704</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000003</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建路金燕龙写字楼</span><span class="col">1000004</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000005</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000006</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建西路金燕龙写字楼</span><span class="col">1000007</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000008</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000009</span><span class="icon-dot"></span></div><div class="row"><span class="col">0710</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">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000001</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0703</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0704</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0705</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0706</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0707</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0708</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0709</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0710</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div></div></div></div></div></div>

结构解释：

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

样式描述：

.inner 容器内间距 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;}.monitor .inner{padding: 1rem 0;display: flex;flex-direction: column;}.monitor .tabs{padding: 0 1.5rem;margin-bottom: 0.75rem;}.monitor .tabs a{color: #1950c4;font-size: 0.75rem;padding: 0 1.125rem;}.monitor .tabs a:first-child{border-right: 0.083rem solid #00f2f1;padding-left: 0;}.monitor .tabs a.active{color: #fff;}.monitor .content{flex: 1;display: none;position: relative;}.monitor .head{background: rgba(255, 255, 255, 0.1);font-size: 0.583rem;padding: 0.5rem 1.5rem;color: #68d8fe;display: flex;justify-content: space-between;line-height: 1.05;}.monitor .col:nth-child(1) {width: 3.2rem;}.monitor .col:nth-child(2) {width: 8.4rem;/* 不换行一行省略*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.monitor .col:nth-child(3) {width: 3.2rem;}.monitor .marquee-view{position: absolute;top: 1.6rem;bottom: 0; width: 100%; overflow: hidden;}.monitor .row{line-height: 1.05;padding: 0.5rem 1.5rem;color: #61a8ff;font-size: 0.5rem;position: relative;display: flex;justify-content: space-between;}.monitor .row:hover{color:#68d8ff;background: rgba(255, 255, 255, 0.1);}.monitor .row:hover .icon-dot{opacity: 1;}.monitor .icon-dot{position: absolute;left: 0.64rem;opacity: 0;}.monitor .marquee-view{position: absolute;top: 1.6rem;bottom: 0; width: 100%; overflow: hidden;}.monitor .row{line-height: 1.05;padding: 0.5rem 1.5rem;color: #61a8ff;font-size: 0.5rem;position: relative;display: flex;justify-content: space-between;}.monitor .row:hover{color:#68d8ff;background: rgba(255, 255, 255, 0.1);}.monitor .row:hover .icon-dot{opacity: 1;}.monitor .icon-dot{position: absolute;left: 0.64rem;opacity: 0;}

12、监控区域-效果

切换功能：

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

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

动画功能：

实现思路：先克隆列表，追加在后面marquee-view 占满剩余高度，溢出隐藏绝对定位，top 1.6rem bottom 0宽度100%，溢出隐藏使用animation实现动画使用 translateY 向上位移 50%动画时间15s，匀速播放，循环执行。

js代码：

// 动画$('.marquee').each(function(){var $cloneList = $(this).children().clone()$(this).append($cloneList)})

css代码：

/* 动画 */.monitor .marquee-view{position: absolute;width: 100%;top: 1.6rem;bottom: 0;overflow: hidden;}.monitor .marquee{animation: scroll-top 15s linear infinite;}.monitor .marquee:hover{animation-play-state: paused;}@keyframes scroll-top {0%{}100%{transform: translateY(-50%);}}

13、点位区域-布局

html结构：

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

css样式：

/* 点位 */.point {height: 14.167rem;}.point .chart {display: flex;margin-top: 1rem;justify-content: space-between;}.point .pie {width: 13rem;height: 10rem;margin-left: -0.4rem;}.point .data {display: flex;flex-direction: column;justify-content: space-between;width: 7rem;padding: 1.5rem 1.25rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover;}.point h4 {margin-bottom: 0.5rem;font-size: 1.167rem;color: #fff;}.point span {display: block;color: #4c9bfd;font-size: 0.667rem;}

14、点位区域-饼图

实现步骤：

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

第一步：参考官方例子

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

第二步：使用起来

// 实现点位-饼状图(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)})();

第三步：按照需求定制

需求1：数据使用

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

需求2：颜色设置

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

需求3：字体略小些 10 px需求4：引导线略短些连接图表 8 px连接文字 10 px

-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'}-]+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:{+fontSize: 10+ },+ // 引导线调整+ labelLine: {+// 连接扇形图线长+length: 8,+// 连接文字线长+length2: 10+ } +}+ ],+ // 每块图颜色+ color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']

day2

15、地图区域-预留布局

html结构：

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

css样式：

/* 地图 */.map {height: 24.1rem;margin-bottom: 0.833rem;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%;}

16、用户统计-布局

html结构：

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

css样式：

/* 用户模块 */.users {height: 14.167rem;display: flex;}.users .chart {display: flex;margin-top: 1rem;}.users .bar {width: 24.5rem;height: 10rem;}.users .data {display: flex;flex-direction: column;justify-content: space-between;width: 7rem;padding: 1.5rem 1.25rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover;}.users h4 {margin-bottom: 0.5rem;font-size: 1.167rem;color: #fff;}.users span {display: block;color: #4c9bfd;font-size: 0.667rem;}

17、用户统计-柱状图

实现步骤：

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

第一步：参考官方示例 + 分析

option = {// 工具提示tooltip: {// 触发类型经过轴触发axis 经过轴触发itemtrigger: 'axis',// 轴触发提示才有效axisPointer: {// 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果 type: 'shadow' }},// 图表边界控制grid: {// 距离上右下左的距离left: '3%',right: '4%',bottom: '3%',// 边框大小是否包含文本【类似于boxsizing】containLabel: true},// 控制x轴xAxis: [{// 使用类目，必须有data属性type: 'category',// 使用 data 中的数据设为刻度文字data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],// 刻度设置axisTick: {// true意思：图形在刻度中间// false意思：图形在刻度之间alignWithLabel: true}}],// 控制y轴yAxis: [{// 使用数据的值设为刻度文字type: 'value'}],// 控制x轴series: [{// 图表数据名称name: '用户统计',// 图表类型type: 'bar',// 柱子宽度barWidth: '60%',// 数据data: [10, 52, 200, 334, 390, 330, 220]}]};

第二步：使用起来

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

第三步：按照需求修改

调整刻度柱子在刻度之间【小短线】剔除刻度：show：false文字颜色 #4c9bfd：axisLabel {color : #4c9bfd}

// 控制x轴xAxis: [{// 使用类目，必须有data属性type: 'category',// 使用 data 中的数据设为刻度文字data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],// 刻度设置axisTick: {// true意思：图形在刻度中间// false意思：图形在刻度之间-alignWithLabel: true,+alignWithLabel: false,+show: false}, + // 文字+ axisLabel: {+color: '#4c9bfd'+ }}

// 控制y轴yAxis: [{// 使用数据的值设为刻度文字type: 'value',+ // 刻度设置+ axisTick: {+show: false+ },+ // 文字+ axisLabel: {+color: '#4c9bfd'+ }+}],

调整边框与间距加上边框，颜色 rgba(0, 240, 255, 0.3)边距调整 3% 3% 3% 0%y轴分割线颜色 rgba(0, 240, 255, 0.3)

// 图表边界控制grid: {// 距离上右下左的距离+top: '3%',+right: '3%',+bottom: '3%',+left: '0%',// 是否包含文本containLabel: true,+// 显示边框+show: true,+// 边框颜色+borderColor: 'rgba(0, 240, 255, 0.3)'},

// 控制y轴yAxis: [{// 使用数据的值设为刻度文字type: 'value',// 刻度设置axisTick: {show: false},// 文字axisLabel: {color: '#4c9bfd'},+ splitLine: {+lineStyle: {+ color: 'rgba(0, 240, 255, 0.3)'+}+ }}],

调整数据，与省略图形。

// seriesdata: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]

// xAxisdata: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆']

柱子颜色，和工具提示。

颜色，使用渐变，从上#00fffb 到下#0061ce设置渐变：itemStyle

// series配置// 颜色itemStyle: {// 提供的工具函数生成渐变颜色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: 'axis',+trigger: 'item',

// 中间省略的数据准备三项var item = {name:'',value: 1200,// 柱子颜色itemStyle: {color: '#254065'},// 鼠标经过柱子颜色emphasis: {itemStyle: {color: '#254065'}},// 工具提示隐藏tooltip: {extraCssText: 'opacity:0'}}

// series配置data选项在中使用- data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240],+ data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],

总结：写echarts繁杂难记，今后在工作中只需要按照需求去查找，切勿死记硬背。

18、订单区域-布局

html结构：

<div class="order panel"><div class="inner"><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></div>

css样式：

/* 订单 */.order {height: 6.167rem;}.order .filter {display: flex;}.order .filter a {display: block;height: 0.75rem;line-height: 1;padding: 0 0.75rem;color: #1950c4;font-size: 0.75rem;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 {display: flex;margin-top: 0.833rem;}.order .item {width: 50%;}.order h4 {font-size: 1.167rem;color: #fff;margin-bottom: 0.417rem;}.order span {display: block;color: #4c9bfd;font-size: 0.667rem;}

19、订单区域-效果

实现步骤：

提前准备数据点击后切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' }}// 获取显示订单数量容器var $h4Orders = $('.order h4:eq(0)')// 获取显示金额数量容器var $h4Amount = $('.order h4:eq(1)')$('.order').on('click','.filter a',function(){// 2. 点击切换激活样式$(this).addClass('active').siblings().removeClass('active')// 3. 点击切换数据var currdata = data[this.dataset.key]$h4Orders.html(currdata.orders)$h4Amount.html(currdata.amount)})// 4. 开启定时器切换数据var index = 0var $allTab = $('.order .filter a')setInterval(function(){index ++ if (index >= 4) index = 0$allTab.eq(index).click()},5000)})();

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

网友评论

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