ECharts有哪些特點?
- ECharts 屬於開源軟件,並且我們提供了非常炫酷的圖形界面,特色是地圖,另外還提供了柱狀圖、折線圖、餅圖、氣泡圖及四象限圖等;
- ECharts 使用簡單,在官網中為我們封裝了 JS,只要會引用就會得到完美的展示效果;
- ECharts 種類多,ECharts 實現簡單,各類圖形都有;
- 相應的模板,還有豐富的 API 及文檔說明,非常詳細;ECharts 兼容性好,基於HTML5,有著良好的動畫渲染效果。
具體實現
今天的課程我們來實現上述視頻中的大數據可視化展示面板,先給大家看看圖,如下圖:
看著確實複雜,其實寫起來更復雜,不過不要怕,既然幹前端了,就得學會,遲早會用上,話不多說,我們一起來看看吧,到底是怎麼實現的。
我們親切的稱為可視化項目
A:需要的技術
- CSS佈局的相關知識點
- jQuery相關知識點
- 掌握echarts的基本使用
B:項目說明
要完成這個項目,看看信息面板,就知道我們的面板佈局肯定離不開DIV+CSS的知識,不過這作為前端肯定沒問題,此外還用到了一些CSS3的知識點,還引入了一些圖表的繪製,以及高級的地圖數據可視化案例,主要用到了一些餅狀圖、柱狀圖、線形圖、地圖等等幾類圖表。
C:技術掌握
- div+css佈局
- flex佈局
- CSS3動畫
- CSS3漸變
- CSS3邊框圖片
- 原生JS+jQuery
- rem適配
- echarts基礎使用
- 後端Json數據接收
D:Echarts基礎使用
1、下載引入(echarts.min.js)引入
2、準備一個具備(寬高的DOM)一般我們以瀏覽器窗口為容器,用jquery直接定義。
3、初始化echarts實例
通過echarts.init實例化一個容器(內部返回),例如:
var myChart = echarts.init(document.getElementById('main'));
4、指定圖表的配置項和數據(根據文檔提示例找到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' }]};
5、使用剛指定的配置項和數據顯示圖表,例如:
myChart.setOption(option);
E:echarts基礎配置
你想使用那些功能,大家可自行去官方文檔查看,下面我來說說主要的一些圖標功能函數:
title:標題組件,包含主標題和副標題以及標題的一些CSS屬性
legend:圖例組件展現了不同系列的標記(symbol),顏色和名字。可以通過點擊圖例控制哪些系列不顯示。
grid:直角座標系內繪圖網格,單個 grid 內最多可以放置上下兩個 X 軸,左右兩個 Y 軸。可以在網格上繪製折線圖,柱狀圖,散點圖(氣泡圖)。
XAxis:直角座標系 grid 中的 x 軸,一般情況下單個 grid 組件最多隻能放上下兩個 x 軸,多於兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。
yAxis:直角座標系 grid 中的 y 軸,一般情況下單個 grid 組件最多隻能放左右兩個 y 軸,多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。
polar:極座標系,可以用於散點圖和折線圖。每個極座標系擁有一個角度軸和一個半徑軸。
演示代碼:
var option = { xAxis: { type: 'category', data: ['星期一', '星期二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: '用戶註冊', data: [820, 932, 901, 934, 9222, 1330, 1320], type: 'line' }, { name: '用戶數據', data: [820, 932, 600, 934, 1290, 1330, 1320], type: "bar", }], grid: { show: true, // top : 100 }, tooltip: { trigger: "axis" }, title: { text: '年度統計' }, color: ['red', 'yellow'], legend: { data: ['用戶註冊', '用戶數據'] }};
F:rem適配
設計稿是1920px ,約定rem基準值為 24px (基準值html的font-size)。
【不同設配等比顯示,例如320和375等設備】
[1024-1920]
那麼:設備寬度與rem基準值比例為 80
結論:適配設備的時候保持80的比例即可。
將來:換算rem單位的時候,使用24px基準值即可。
/*不用媒體查詢,需要查詢區間,如果用JS可以實時監控大小*/
頁面初始化,就需要一個基準值:
(function () { // 1、頁面一加載就要知道頁面寬度計算 var setFont = function () { // 因為要定義變量可能和別的變量相互衝突,汙染,所有用自調用函數 var html = document.documentElement;// 獲取html // 獲取寬度 var width = html.clientWidth; // 判斷 if (width < 1024) width = 1024 if (width > 1920) width = 1920 // 設置html的基準值 var fontSize = width / 80 + 'px'; // 設置給html html.style.fontSize = fontSize; } setFont(); // 2、頁面改變的時候也需要設置 // 尺寸改變事件 window.onresize = function () { setFont(); } })();
注意:書寫CSS代碼,讓px轉換rem單位,使用一個cscode插件 cssrem
- vscode插件搜索cssrem,進行安裝既可
- 需要在設置中cssrem換算的時候使用80的比例
// rem換算"cssrem.rootFontSize": 24,//【計算時的基準值】"cssrem.fixedDigits":// 3,【取三位小數】
1920設計稿,比例80,基準值24,計算式可能有小數,很多位,保留3為有效小數,不去除0,例如(0.333);
G:基礎佈局和動畫
整體佈局和局部佈局都是採用flex佈局,跟平常切頁面差不多,效果是採用JS寫的效果,動畫是採用CSS3進行寫的。
因為代碼比較多,放上去不合適,大家可關注私信我,我會挨個發送。
閱讀更多 Web前端進階指南 的文章