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

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

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

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

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

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

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

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

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

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

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

更傾向于展示信息

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

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

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

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

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

二.Echarts概述

1.什么是Echarts

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

為什么要選擇Echarts(特性)

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

三.Echarts繪制條形圖

? 1、初始化類

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

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

2、樣式配置

? title ：標(biāo)題

? tooltip ：鼠標(biāo)懸停氣泡

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

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

? 3、渲染圖展示表

myChart.setOption(option);

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

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

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

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

五.echarts圖表自適應(yīng)div resize問題

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

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

? 用于當(dāng)div發(fā)生resize事件的時(shí)候，讓其觸發(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文件

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