?? 歡迎加入前端技術營！如果你也是前端學習者或者對前端有學習的想法，那就跟著我一起從零開始進擊前端，
??致力于盡可能詳細且簡潔的介紹前端知識、自己的捷徑，也是學習路上的記錄，歡迎探討
文章目錄
- 簡單介紹
- 目前互聯網需求
- 常見資料可視化庫
- Echarts使用步驟
- 面試題
- 一、DOM0級和DOM2級有什么區別
- 二、textContent、innerText、innnerHTML、value的區別
簡單介紹
資料可視化主要目的:借助于圖形化手段，清晰有效地傳達與溝通資訊，
資料可視化可以把資料從冰冷的數字轉換成圖形，揭示蘊含在資料中的規律和道理，
ECharts是一個使用JavaScript實作的開源可視化庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等)，底層依賴矢量圖形庫ZRender，提供直觀，互動豐富，可高度個性化定制的資料可視化圖表，
目前互聯網需求
通用報表
地理可視化
圖編輯&圖分析
大屏可視化
移動端圖表
常見資料可視化庫
AntV螞蟻金服全新一代資料可視化解決方案
Highcharts.js國外的前端資料可視化庫，非商用免費，被許多國外大公司所使用
ECharts.js百度出品的一個開源Javascript資料可視化庫
D3.js ：目前Web端評價最高的Javascript可視化工具庫(入手難)
Echarts使用步驟
比如我們需要一個柱狀圖：
//1、引入JS檔案
<script src="echarts.min.js"></script>
<!-- 2.準備一個具備大小的DOM容器 -->
<div class="box">
</div>
.box {
width: 400px;
height: 400px;
background-color: pink;
}
<script>
// 3.初始化echarts實體物件
var myChart = echarts.init(document.querySelector('.box'));
// 4.指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 5.使用剛指定的配置項和資料顯示圖表 設定給 實體物件，
myChart.setOption(option);
// 當我們瀏覽器縮放的時候，圖表也等比例縮放
window.addEventListener("resize", function () {
// 讓我們的圖表呼叫 resize這個方法
myChart.resize();
});
</script>
效果：
根據需求可在echarts官網查找想要的圖表及進行效果修改
具體的引數可查詢官方檔案，這里附上幾個常用引數
附上一個資料可視化專案：
【代碼在文末】
面試題
一、DOM0級和DOM2級有什么區別
DOM0級中為某個dom元素系結多個事件時，只有最后一個事件有效，onclick
DOM2級中可以為單個元素系結多個事件，每個事件都可以被觸發，addEventListener
二、textContent、innerText、innnerHTML、value的區別
textContent用來獲取和設定文本內容，與innerText的差別是:textContent獲取到的內容包
括了元素中的style標簽和script標簽的內容，
innerText只能獲取和設定文本內容，不能獲取和設定html代碼
innerHTML可以獲取和設定html代碼
value獲取的是表單元素的值
本期到這里就結束了，感謝閱讀！有問題留言，及時回復
- 掃碼回復： 資料可視化
- 點贊加關注，持續更新實用技巧、熱門資源、軟體教程等
- 有任何 軟體 影視 教程資源 考證資料等需求留言即可
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/389189.html
標籤：其他
上一篇：談談服務端渲染技術NuxtJS