更新時(shí)間:2023-01-04 14:20:19 來源:動(dòng)力節(jié)點(diǎn) 瀏覽3864次
一.簡述數(shù)據(jù)可視化技術(shù)
1.什么是數(shù)據(jù)可視化技術(shù)
借助圖形化的數(shù)段,清晰有效的傳遞和溝通信息,以視覺的方式展現(xiàn)數(shù)據(jù),便于用戶的認(rèn)知,偏于圖表的樣式,相對(duì)于文字說明更加直觀
處理科學(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ù)加工,提取可用信息)
更傾向于展示信息
分析數(shù)據(jù)導(dǎo)向進(jìn)行展示,需要了解具體的事物邏輯
2.數(shù)據(jù)可視化技術(shù)優(yōu)點(diǎn)
3.數(shù)據(jù)可視化技術(shù)借助的軟件
二.Echarts概述
1.什么是Echarts
百度團(tuán)隊(duì)開發(fā)的,提供了一些直觀,易用的交互方式以便于對(duì)展示數(shù)據(jù)進(jìn)行挖掘.提取.修正或整合,擁有互動(dòng)圖形用戶界面的深度數(shù)據(jù)可視化工具
為什么要選擇Echarts(特性)
三.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)。
相關(guān)閱讀