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

20、销售统计-布局

html结构：

<!-- 销售额 --><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>

css样式：

/* 销售区域 */.sales {height: 10.333rem;}.sales .caption {display: flex;line-height: 1;}.sales h3 {height: 0.75rem;padding-right: 0.75rem;border-right: 0.083rem solid #00f2f1;}.sales a {padding: 0.167rem;font-size: 0.667rem;margin: -0.125rem 0 0 0.875rem;border-radius: 0.125rem;color: #0bace6;}.sales a.active {background-color: #4c9bfd;color: #fff;}.sales .inner {display: flex;flex-direction: column;}.sales .chart {flex: 1;padding-top: 0.6rem;position: relative;}.sales .label {position: absolute;left: 1.75rem;top: 0.75rem;color: #4996f5;font-size: 0.583rem;}.sales .line {width: 100%;height: 100%;}

21、销售统计-线形图

​ 实现步骤：

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

**第一步：**寻找官方的类似示例，给予分析。

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

var option = {xAxis: {// 类目类型 type: 'category',// x轴刻度文字 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {// 数据作为刻度文字 type: 'value'},series: [{// 数据 data: [820, 932, 901, 934, 1290, 1330, 1320],// 图表类型 type: 'line',// 圆滑连接 smooth: true}]};

**第二步：**在项目中使用起来。

(function () {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',smooth: true}]};var myChart = echarts.init($('.line')[0])myChart.setOption(option)})();

**第三步：**按照需求来定制它。

定制需求：

设置自己的图表大小，显示边框设置颜色：#012f4a，包含刻度文字在内。

// 设置网格样式grid: {show: true,// 显示边框top: '20%',left: '3%',right: '4%',bottom: '3%',borderColor: '#012f4a',// 边框颜色containLabel: true // 包含刻度文字在内},

x轴的刻度去除，字体颜色：#4c9bfd，剔除坐标轴线（将来使用Y轴分割线）, 轴两端是不需要内间距。

xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],+axisTick: {+ show: false // 去除刻度线+},+axisLabel: {+ color: '#4c9bfd' // 文本颜色+},+axisLine: {+ show: false // 去除轴线+},+boundaryGap: false // 去除轴内间距},

y轴的刻度去除，字体颜色：#4c9bfd，分割线颜色：#012f4a

yAxis: {type: 'value',+axisTick: {+ show: false // 去除刻度+},+axisLabel: {+ color: '#4c9bfd' // 文字颜色+},+splitLine: {+ lineStyle: {+color: '#012f4a' // 分割线颜色+ }+}},

显示图例组件（对图表的说明）, series数据必须有名称。

// 图例组件legend: {textStyle: {color: '#4c9bfd' // 图例文字颜色// fontSize},right: '10%' // 距离右边10%},

series: [{+name:'预期销售额',

鼠标经过需要工具提示

// 工具提示tooltip:{trigger: 'axis'},

两条线形图颜色分别：#00f2f1 #ed3f35

series: [{name:'预期销售额',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true,itemStyle: {color: '#00f2f1' // 线颜色}},{name:'实际销售额',data: [100, 331, 200, 123, 233, 543, 400],type: 'line',smooth: true,itemStyle: {color: '#ed3f35' // 线颜色}}]

套入数据

// x轴的文字xAxis: {type: 'category',- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

// 图标数据series: [{name:'预期销售额',-data: [820, 932, 901, 934, 1290, 1330, 1320],+[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]type: 'line',smooth: true,itemStyle: {color: '#00f2f1' // 线颜色}},{name:'实际销售额',-data: [100, 331, 200, 123, 233, 543, 400],+[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]type: 'line',smooth: true,itemStyle: {color: '#ed3f35' // 线颜色}}]

总结：现在给的是年份数据，还需要切换效果。

22 、销售统计-切换效果

实现步骤：

准备切换需要依赖的数据绑定点击事件 切换激活 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]]}

series: [{name:'预期销售额',+data: data.year[0],type: 'line',smooth: true,itemStyle: {color: '#00f2f1'}},{name:'实际销售额',+data: data.year[1],type: 'line',smooth: true,itemStyle: {color: '#ed3f35'}}]

第二步：点击后切换

// 切换$('.sales').on('click', '.caption a', function(){// 样式$(this).addClass('active').siblings().removeClass('active')// currData 当前对应的数据 // this.dataset.type 标签上的data-type属性值，对应data中的属性 var currData = data[this.dataset.type]// 修改图表1的数据option.series[0].data = currData[0]// 修改图表2的数据 option.series[1].data = currData[1]// 重新设置数据 让图标重新渲染 myChart.setOption(option)})

第三步：自动切换

// tab索引var index = 0;// 所有tabvar allTab = $('.sales .caption a')setInterval(function () {index++// 大于等于4索引切换到0索引if (index >= 4) index = 0// 选中对应tab触发点击allTab.eq(index).click()}, 1000)

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

html结构：

<!-- 渠道 季度 --><div class="wrap"><div class="channel panel"><div class="inner"><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>28 <small>%</small></h4><span><i class="icon-bag"></i>商场</span></div></div><div class="data"><div class="item"><h4>20 <small>%</small></h4><span><i class="icon-train"></i>地铁</span></div><div class="item"><h4>13 <small>%</small></h4><span><i class="icon-bus"></i>火车站</span></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">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>

css样式：

/* 渠道区块 */.wrap {display: flex;}.channel,.quarter {flex: 1;height: 9.667rem;}.channel {margin-right: 0.833rem;}.channel .data {overflow: hidden;}.channel .item {margin-top: 0.85rem;}.channel .item:first-child {float: left;}.channel .item:last-child {float: right;}.channel h4 {color: #fff;font-size: 1.333rem;margin-bottom: 0.2rem;}.channel small {font-size: 50%;}.channel span {display: block;color: #4c9bfd;font-size: 0.583rem;}/* 季度区块 */.quarter .inner {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;}

24、销售进度-饼状图

实现步骤：

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

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

var option = {series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],label: {show: false,},data:[{value:100, name:'直接访问'},{value:100, name:'邮件营销'},{value:200, name:'联盟广告'}]}]};

第二步：使用起来

// 销量进度-饼状图(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)})();

第三步：进行定制

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

var option = {series: [{type: 'pie',- radius: ['50%', '70%'],+ radius: ['130%', '150%'], // 放大图形+ center: ['48%', '80%'], // 往下移动 套住75%文字label: {show: false,},startAngle: 180,data: [-{ value: 100, name: '直接访问' },-{ value: 100, name: '邮件营销' },-{ value: 200, name: '联盟广告' }+{ value: 100 }, // 不需要名称+{ value: 100,}, // 不需要名称+{ value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域]}]}

需求：鼠标经过无需变大，第一段颜色渐变#00c9e0->#005fc1，第二段颜色#12274d。

+ hoverOffset: 0, // 鼠标经过不变大data: [{value: 100,+ itemStyle: { // 颜色渐变#00c9e0->#005fc1+ color: {+type: 'linear',+x: 0,+y: 0,+x2: 0,+y2: 1,+colorStops: [+ { offset: 0, color: '#00c9e0' },+ { offset: 1, color: '#005fc1' }+]+ }+ }+}, +{ value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d

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

25、热销排行-布局

html结构：

<!-- 排行榜 --><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><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> 数据<s class="icon-up"></s></span></li> --></ul></div></div></div></div>

css样式：

/* 排行榜 */.top {height: 11.8rem;}.top .inner {display: flex;}.top .all {display: flex;flex-direction: column;width: 7rem;color: #4c9bfd;font-size: 0.6rem;vertical-align: middle;}.top .all ul {padding-left: 0.5rem;margin-top: 0.5rem;flex: 1;display: flex;flex-direction: column;justify-content: space-around;}.top .all li {overflow: hidden;}.top .all [class^="icon-"] {font-size: 1.5rem;vertical-align: middle;margin-right: 0.5rem;}.top .province {flex: 1;display: flex;flex-direction: column;color: #fff;}.top .province i {padding: 0 0.5rem;margin-top: 0.208rem;float: right;font-style: normal;font-size: 0.583rem;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.6rem;}.top .province ul {flex: 1;line-height: 1;margin-bottom: 0.25rem;}.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.583rem;}.top .province ul.sup li {color: #4995f4;padding: 0.5rem;}.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.5rem;background-color: rgba(10, 67, 188, 0.2);}.top .province ul.sub li {color: #52ffff;padding: 0.417rem 0.6rem;}.clock {position: absolute;top: -1.5rem;right: 1.667rem;font-size: 0.833rem;color: #0bace6;}.clock i {margin-right: 5px;font-size: 0.833rem;}@media screen and (max-width: 1600px) {.top span {transform: scale(0.9);}.top .province ul.sup li {padding: 0.4rem 0.5rem;}.top .province ul.sub li {padding: 0.23rem 0.5rem;}.quarter span {transform: scale(0.9);}}

26、热销排行-效果

实现思路：

准备假数据，只有一组当数据进入 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)

27、Echarts-社区介绍

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

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

28、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'}}},

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