一.簡述數(shù)據(jù)可視化技術

1.什么是數(shù)據(jù)可視化技術

借助圖形化的數(shù)段，清晰有效的傳遞和溝通信息，以視覺的方式展現(xiàn)數(shù)據(jù)，便于用戶的認知，偏于圖表的樣式，相對于文字說明更加直觀

• 科學可視化(出現(xiàn)最早，最成熟)

處理科學數(shù)據(jù)，面向科學和工程數(shù)據(jù)方面，研究帶有空間坐標和幾何信息的三維空間，如何呈現(xiàn)數(shù)據(jù)中的幾何特征

主要面向自然科技中產(chǎn)生數(shù)據(jù)的建模操作和處理

應用于醫(yī)療(透析，CT)，科研，航天，天氣，生物等技術

• 信息可視化(更常見，接觸更多)

科學可視化演變而來，主要處理非結構化，非幾何的數(shù)據(jù)

金融交易，社交網(wǎng)絡，文本數(shù)據(jù)展示

減少視覺混淆對有用數(shù)據(jù)的干擾，把無用的數(shù)據(jù)過濾掉，而非簡單信息的堆疊(數(shù)據(jù)加工，提取可用信息)

更傾向于展示信息

• 可視化分析(前兩者的結合)

分析數(shù)據(jù)導向進行展示，需要了解具體的事物邏輯

2.數(shù)據(jù)可視化技術優(yōu)點

• 分析出數(shù)據(jù)的趨勢
• 進行精準的廣告投放
• 信息快人一步，優(yōu)先獲取信息就有更大的優(yōu)勢

3.數(shù)據(jù)可視化技術借助的軟件

二.Echarts概述

1.什么是Echarts

百度團隊開發(fā)的，提供了一些直觀，易用的交互方式以便于對展示數(shù)據(jù)進行挖掘.提取.修正或整合，擁有互動圖形用戶界面的深度數(shù)據(jù)可視化工具

為什么要選擇Echarts(特性)

• 拖拽重計算：拖動實現(xiàn)數(shù)據(jù)重新計算
• 數(shù)據(jù)視圖：通過編輯功能批量修改數(shù)據(jù)
• 動態(tài)類型切換：動態(tài)切換不同類型的圖表展示數(shù)據(jù)，針對用戶不同需求，對數(shù)據(jù)進行更多的解讀
• 多圖聯(lián)動：多列數(shù)據(jù)根據(jù)條件一同修改
• 百搭時間軸：根據(jù)時間動態(tài)的改變
• 大規(guī)模散點：大數(shù)據(jù)查找，需要專業(yè)工具
• 動態(tài)數(shù)據(jù)添加：實時改變數(shù)據(jù)變化
• 商業(yè)BI：用于商業(yè)數(shù)據(jù)展示
• 特效：吸引眼球功能

三.Echarts繪制條形圖

? 1、初始化類

? Html里面創(chuàng)建一個id為box1的div，并初始化echarts繪圖實例

var myChart = echarts.init(document.getElementById('box1'))

2、樣式配置

? title ：標題

? tooltip ：鼠標懸停氣泡

? xAxis : 配置橫軸類別，type類型為category類別

? series：銷量數(shù)據(jù)，data參數(shù)與橫軸一一對應，如果想調(diào)樣式，也可以簡單調(diào)整，比如每個條形圖的顏色可以通過函數(shù)進行數(shù)組返回渲染

? 3、渲染圖展示表

myChart.setOption(option);

四.切換其他組件統(tǒng)計圖時，出現(xiàn)卡頓問題如何解決

原因：每一個圖例在沒有數(shù)據(jù)的時候它會創(chuàng)建一個定時器去渲染氣泡，頁面切換后，echarts圖例是銷毀了，但是這個echarts的實例還在內(nèi)存當中，同時它的氣泡渲染定時器還在運行。這就導致Echarts占用CPU高，導致瀏覽器卡頓，當數(shù)據(jù)量比較大時甚至瀏覽器崩潰

解決方法：在mounted()方法和destroy()方法之間加一個beforeDestroy()方法釋放該頁面的chart資源，clear()方法則是清空圖例數(shù)據(jù)，不影響圖例的resize，而且能夠釋放內(nèi)存，切換的時候就很順暢了

beforeDestroy () {
	this.chart.clear()
}

五.echarts圖表自適應div resize問題

? echarts官網(wǎng)的實例都具有響應式功能

? echart圖表本身是提供了一個resize的函數(shù)的。

? 用于當div發(fā)生resize事件的時候，讓其觸發(fā)echart的resize事件，重繪canvas。

<div class="chart">
    <div class="col-md-3" style="width:73%;height:270px" id="chartx"></div>
</div>
<script src="/static/assets/scripts/jquery.ba-resize.js"></script>
js代碼：
var myChartx = echarts.init(document.getElementById('chartx'));
$('.chart').resize(function(){
		myChartx.resize();
})

注：jquery有resize()事件，但直接調(diào)用沒有起作用，引入jquery.ba-resize.js文件

以上就是“結合專業(yè)的分析：echarts面試題總結”，你能回答上來嗎?如果想要了解更多的Java面試題相關內(nèi)容，可以關注動力節(jié)點Java官網(wǎng)。