数据可视化（BI报表的开发）第三天
生活随笔
收集整理的這篇文章主要介紹了
数据可视化（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、銷售統計-線形圖
? 實現步驟：
- 尋找官方的類似示例，給予分析。
- 在項目中使用起來。
- 按照需求來定制它。
**第一步：**尋找官方的類似示例，給予分析。
官方參考示例：https://www.echartsjs.com/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，包含刻度文字在內。
- x軸的刻度去除，字體顏色：#4c9bfd，剔除坐標軸線（將來使用Y軸分割線）, 軸兩端是不需要內間距。
- y軸的刻度去除，字體顏色：#4c9bfd，分割線顏色：#012f4a
- 顯示圖例組件（對圖表的說明）, series數據必須有名稱。
- 鼠標經過需要工具提示
- 兩條線形圖顏色分別：#00f2f1 #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、銷售進度-餅狀圖
實現步驟：
- 尋找官方的類似示例，給予分析。
- 在項目中使用起來。
- 按照需求來定制它。
第一步：參考官方示例：https://www.echartsjs.com/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 = [{ 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使用（擴展）
參考社區的例子：https://gallery.echartsjs.com/editor.html?c=x2Ei_JbHZb
實現步驟：
- 第一需要下載china.js提供中國地圖的js文件
- 導入后，使用社區提供的配置即可。
需要修改：
geo: {map: 'china', + zoom: 1.2,label: {emphasis: {show: false}},roam: false,itemStyle: {normal: { + areaColor: '#142957',borderColor: '#0692a4'},emphasis: {areaColor: '#0b1c2d'}}},總結：這例子是擴展案例，大家以后可以多看看社區里面的案例。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的数据可视化（BI报表的开发）第三天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端网页 — 初始化文件
- 下一篇： 数据可视化（BI报表的开发）第四天