本專案中使用的是echarts圖表庫，Echarts提供了常規的折線圖、柱狀圖、散點圖、餅圖、k線圖，用于統計的盒形圖，用于地理資料可視化的地圖、熱力圖、線圖，用于關系資料可視化的關系圖、treemap、旭日圖，多維資料可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭，
一、效果展示圖
二、目錄結構
三、echarts基本使用
五步曲 one by one 教你 保你會
- 下載并引入echarts.js檔案 地址：Apache ECharts
- 準備一個具備大小的DOM容器
- 初始化echarts實體物件
- 指定配置項和資料(option)
- 將配置項設定給echarts實體物件
下面是一個簡單的實體
第一步
第二步
第三步
第四步
第五步
最終的效果
僅僅會插入圖表也是不夠的，通過修改里面的配置項里面的屬性來達到專案需求，直接去百度更方便，但是呢我們需要學會去查找檔案echarts官網-檔案-配置項手冊
上面這個小例子就是為了讓大家對echarts不迷茫，基本使用要會喲
四、知識點梳理
再回到我們的專案上面，從專案效果可以看出里面的引數很多，如果都去重新定義一個新的變數的話，代碼很多容易混淆，占用的空間也很大，這里呢 我們就使用立即執行函式
立即執行函式：
宣告一個函式，并馬上呼叫這個匿名函式就叫做立即執行函式；即立即執行函式是定義函式以后立即執行該函式，
()()
里面定義的引數相對于是區域變數，即使變數名相同，也不會有影響的，所以就放心使用吧
專案里面每個盒子的邊框不再是中規中矩的border了，之所以看起來很高級，那是因為邊框里面有圖片喲，大家不要覺得很難，因為它真的很簡單
邊框圖片
邊框效果圖：
首先來了解下邊框圖片需要掌握的屬性
| 屬性 | 說明 |
| border-image-source | 用在邊框的圖片的路徑 |
| border-image-slice | 圖片邊框內向偏移 裁剪的尺寸，一定不加單位，上右下左順序進行裁剪 |
| border-image-width | 圖片邊框的寬度（需要加單位）注意：不是邊框的寬度而是邊框圖片的寬度 |
| border-image-repeat | 圖片邊框是否平鋪（repeat）、鋪滿（round）、或拉伸（stretch）默認拉伸 |
我們來看看border-image-repeat屬性值不同的效果
<style>
html {
font-size: 80px !important;
}
.box {
width: 200px;
height: 200px;
position: relative;
border: 15px solid transparent;
border-width: 0.6375rem 0.475rem 0.25rem 1.65rem;
border-image-source: url(../charts-project/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;
font-size: .25rem;
color: #fff;
}
</style>
</head>
<body style="background:url('./images/bg.jpg');">
<div class="box">
<div class="inner">你好</div>
</div>
</body>分割多少，就以四個角圖片的完整度來喲
很多人會疑惑🤔 為什么還要在box盒子里面放一個inner盒子呢，注意看由于盒子模型的原因 如果直接寫文字，文字的書寫位置就達不到我們想要的這種效果，所以通過在邊框里面再添加一個子盒子，利用定位 ，里面的內容就可以改變位置啦，快去試一試吧
字體圖示
這里為什么要將字體圖示呢，以前我們使用字體圖示非常的麻煩 ，這里教給大家一種新的方法：通過類名呼叫字體圖示
使用步驟
- HTML頁面引入字體圖示中css檔案
- 標簽直接呼叫圖示對應的類名即可
老規矩，還是用一個簡單的例子 這樣大家就不用迷茫了，博主辛辛苦苦的為大家書寫例題，一定要三步曲喲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../charts-project/fonts/style.css">
</head>
<body>
<div class="icon-codeigniter"></div>
</body>
</html>類名是怎么來的呢：直接在style.css里面復制
效果圖：
修改線性漸變色方法
圖中的統計圖呈現的是一個顏色漸變的效果 看起來很好看 一起來看看它是如何實作的吧
效果圖：
注意修改的是option物件里面的color屬性喲
方法一：提倡這種方法 比較簡單
color:new echarts.graphic.LinearGradient(
//(x1,y2）點到點（x2,y2）之間進行漸變
0，0，0，1，
[
{offset:0,color:'#00fffb' },//0起始顏色
{offset:1,color:'#0061ce' },//1結束顏色
]
),方法二：
// 修改線性漸變色方式 2
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 處的顏色
}, {
offset: 1, color: 'blue' // 100% 處的顏色
}],
globalCoord: false // 預設為 false
},半圓形做法
前面只是教大家如何使用echarts圖表，但是這種半圓里面是沒有的，需要我們自己自己通過它提供的扇形圖 自己修改 ，本質還以一個餅形
效果圖：
做法：把一個餅形圖分成三段，下面一段顏色設定為透明色即可，做一個拱形離不開的是將不透明的那一部分旋轉正，在series里面設定調角度 其默認的角度是90度
startAngle :180 /起始角度，支持的范圍是[0，360]
注意：此角度不是旋轉角度，而是起始角度，
我們先來看看餅圖的起始角度
上面這個圖是我給大家準備的在線案例圖，根據我的這個步驟，不會都很難啊
全國熱榜模塊制作
效果圖： 從上面的動圖 大家就可以知道這個模塊要實作的功能，根據定時器 去切換到各省份相應的資料，與之前不同的是近30日的資料不是在html里面準備好的，而是動態的存盤資料得到的，一起來看看它是如何實作的吧
從這個案例中我們要學到的知識點
- 實際開發中，后臺回傳的真實資料如何渲染到頁面中
- ES6模版字符相關知識-拼接字串
ES6模版字符：
`${運算式} ` //模版字串使用返鉤號‘’而且允許自動換行 反鉤號是tab鍵上面的那個鍵
首先準備相關資料
首先來看它里面的屬性 city、sales、flag是各省熱銷的資料 flag的值決定了箭頭的方向，true就是箭頭向上，反之則向下；
brands陣列里面的物件是與城市相對應地資料模塊，里面的flag屬性和外面的含義一樣
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: "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: "21, 180",
flag: false,
brands: [
// 品牌種類資料
{ name: "可愛多", num: "8,907", flag: true },
{ name: "哇哈哈", num: "9,541", flag: true },
{ name: "喜之郎", num: "9,447", flag: false },
{ name: "小旺仔", num: "6,090", flag: false },
{ name: "小洋人", num: "5,924", flag: false },
{ name: "好多魚", num: "2,870", flag: true },
]
},
{
city: "江蘇",
sales: "28,148 ",
flag: false,
brands: [
// 品牌種類資料
{ name: "可愛多", num: "9,889", flag: true },
{ name: "哇哈哈", num: "7,381", flag: true },
{ name: "喜之郎", num: "5,487", flag: false },
{ name: "小旺仔", num: "2,080", flag: false },
{ name: "小洋人", num: "6,924", flag: false },
{ name: "好多魚", num: "2,770", flag: true },
]
},
{
city: "山東",
sales: "27, 874",
flag: true,
brands: [
// 品牌種類資料
{ name: "可愛多", num: "9,186", flag: true },
{ name: "哇哈哈", num: "6,341", flag: true },
{ name: "喜之郎", num: "8,447", flag: false },
{ name: "小旺仔", num: "7,087", flag: false },
{ name: "小洋人", num: "5,624", flag: false },
{ name: "好多魚", num: "2,370", flag: true },
]
}
]資料準備好啦，接下來就是將資料渲染到頁面中
首先就是遍歷上面的資料，index是索引號，item是對應的物件，里面有幾個物件，各省里面就有幾個li，我們使用字串的形式將遍歷的資訊放入到supHTML里面，直接用html()方法添加到sup盒子中，此方法識別標簽和換行，ES6模版字符里面不能書寫if陳述句 但是可以用三元運算式，根據flag屬性值判斷箭頭的方向
//(1) 遍歷 hotData 物件
var supHTML = "";
$.each(hotData, function (index, item) {
supHTML += `<li><span>${item.city}</span><span>${item.sales}<s class=${item.flag ? "icon-arrow-up2" : "icon-arrow-down2"}></s></span></li>`;
});
$(".sup").html(supHTML);此模塊實作的功能是使用定時器跟新內容，當滑鼠經過的時候定時器就停止，滑鼠離開開啟定時器
因為當我們滑鼠經過和定時器觸發都要改變相應城市的資料，何不將這個功能封裝到一個函式里面呢，哪里需要就直接呼叫它
這個函式就是將各城市的資料資訊插入到sub盒子里面
hotData[that.index()].brands 里面的that.index()]就是當前城市的索引號，通過城市的索引號找到對應的陣列里面的brands資料，還是利用相同的方法添加到sub盒子里面
function render(that) { that.addClass("active").siblings().removeClass(); // console.log(hotData[$(this).index()].brands); var subHTML = ""; $.each(hotData[that.index()].brands, function (i, item) { subHTML += `<li><span>${item.name}</span><span>${item.num}<s class=${item.flag ? "icon-arrow-up2" : "icon-arrow-down2"}></s></span></li>`; }); $(".sub").html(subHTML); }
頁面一重繪 就是第一個li設定為滑鼠經過事件，
設定一個index遍歷 控制顯示li，當到達最后一個li的時候，又重第一個li開始高亮顯示，所以用一個if陳述句判斷，呼叫render函式，注意的是里面的實參，不再是this指向 而是當前高亮的是第幾個li，對應的li里面渲染資料，再實作用戶滑鼠經過和離開事件，滑鼠經過定時器就停止，滑鼠離開，計時器就開啟
// 默認把第一個li 處于滑鼠經過狀態 var lis = $(".province .sup li"); lis.eq(0).mouseenter(); // 開啟定時器 var index = 0; var timer = setInterval(function () { index++; if (index >= 5) index = 0; render(lis.eq(index)); }, 2000); $(".province .sup").hover( function () { clearInterval(timer); }, function () { clearInterval(timer); timer = setInterval(function () { index++; if (index >= 5) index = 0; render(lis.eq(index)); }, 2000); } )
當滑鼠經過當前的li高亮，此時render里面的實參就是當前的li， index = $(this).index();這句代碼是當我們經過li之后，那么我們定時器里面的index就會發生改變，它的下一個li就不再是定時器里面index的順序了，索引在我們滑鼠經過的時候，要將當前的li的索引號給index，確保定時器是從當前li開始執行的
$(".province .sup").on("mouseenter", "li", function () {
index = $(this).index();
render($(this));
});五、總結
以上就是資料可視化專案的全部知識點啦，博主并不是將這個專案的代碼復制過來大家欣賞，而是通過根據實際例子來講解這個專案所用到的技術，所有的方法都教給大家啦，自己動手試試吧，方法會了還怕不會做嗎
授之以魚不如授之以漁
別忘啦 三步曲 點贊👍 評論 ?? 收藏 🌟
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/332645.html
標籤：其他
下一篇：@Scripts.Render("~/bundles/bootstrap")拋出NullReferenceException