ECharts數(shù)據(jù)可視化

1、echarts數(shù)據(jù)可視化容易介紹 數(shù)據(jù)可視化主要目的:借助于圖形化手段，清楚有效地傳達與交流信息。 數(shù)據(jù)可視化可以把數(shù)據(jù)從冰冷的數(shù)字轉(zhuǎn)換成圖形，揭示蘊含在數(shù)據(jù)中的邏輯和道理。 echarts是一個用法javascript實現(xiàn)的開源可視化庫，可以流暢的運行在pc和移動設(shè)備上，兼容當(dāng)前絕大部分掃瞄器（ie8/9/10/11，chrome，firefox，safari等)，底層依靠矢量圖形庫zrender，提供直觀，交互豐盛，可高度共性化定制的數(shù)據(jù)可視化圖表。 目前互聯(lián)網(wǎng)需求 通用報表 地理可視化 圖編輯&圖分析 大屏可視化 移動端圖表 常見數(shù)據(jù)可視化庫 antv螞蟻金服全新一代數(shù)據(jù)可視化解

2、決計劃 highcharts.js國外的前端數(shù)據(jù)可視化庫，非商用免費，被許多國外大公司所用法 echarts.js百度出品的一個開源javascript數(shù)據(jù)可視化庫 d3.js ：目前web端評價最高的javascript可視化工具庫(入手難) echarts用法步驟 比如我們需要一個柱狀圖： /1、引入js文件 .box width: 400px; height: 400px; background-color: pink; / 3.初始化echarts實例對象 var mychart = echarts.init(document.queryselector(&39;.box&39;);

3、/ 4.指定圖表的配置項和數(shù)據(jù) var option = title: text: &39;echarts 入門示例&39; , tooltip: , legend: data: &39;銷量&39; , xaxis: data: &39;襯衫&39;, &39;羊毛衫&39;, &39;雪紡衫&39;, &39;褲子&39;, &39;高跟鞋&39;, &39;襪子&39; , yaxis: , series: name: &39;銷量&39;, type: &39;bar&39;, data: 5, 20, 36, 10, 10, 20 ; / 5.用法剛指定的配置項和數(shù)據(jù)顯示圖表 設(shè)置給

4、 實例對象。 mychart.setoption(option); / 當(dāng)我們掃瞄器縮放的時候，圖表也等比例縮放 window.addeventlistener("resize", function () / 讓我們的圖表調(diào)用 resize這個辦法 mychart.resize(); ); 效果： 按照需求可在echarts官網(wǎng)查找想要的圖表及舉行效果修改 詳細的參數(shù)可查詢官方文檔，這里附上幾個常用參數(shù) 附上一個數(shù)據(jù)可視化項目： 【代碼在文末】 面試題 一、dom0級和dom2級有什么區(qū)分 dom0級中為某個dom元素綁定多個大事時，惟獨最后一個大事有效。onclick dom2級中可以為單個元素綁定多個大事，每個大事都可以被觸發(fā)。addeventlistener 二、textcontent、innertext、innnerhtml、value的區(qū)分 textcontent用來獵取和設(shè)置文本內(nèi)容，與innertext的差別是:textcontent獵取到的內(nèi)容包 括了元素中的style標(biāo)簽和script標(biāo)簽的內(nèi)容。