一.簡述數據可視化技術

1.什么是數據可視化技術

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

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

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

主要面向自然科技中產生數據的建模操作和處理

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

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

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

金融交易，社交網絡，文本數據展示

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

更傾向于展示信息

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

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

2.數據可視化技術優點

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

3.數據可視化技術借助的軟件

二.Echarts概述

1.什么是Echarts

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

為什么要選擇Echarts(特性)

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

三.Echarts繪制條形圖

? 1、初始化類

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

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

2、樣式配置

? title ：標題

? tooltip ：鼠標懸停氣泡

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

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

? 3、渲染圖展示表

myChart.setOption(option);

四.切換其他組件統計圖時，出現卡頓問題如何解決

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

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

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

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

? echarts官網的實例都具有響應式功能

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

? 用于當div發生resize事件的時候，讓其觸發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()事件，但直接調用沒有起作用，引入jquery.ba-resize.js文件

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