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

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

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

   • 科學可視化（出現(xiàn)最早，最成熟）
     • 處理科學數(shù)據(jù)，面向科學和工程數(shù)據(jù)方面，研究帶有空間坐標和幾何信息的三維空間，如何呈現(xiàn)數(shù)據(jù)中的幾何特征
     • 主要面向自然科技中產(chǎn)生數(shù)據(jù)的建模操作和處理
     • 應用于醫(yī)療（透析，CT），科研，航天，天氣，生物等技術
   • 信息可視化（更常見，接觸更多）
     • 科學可視化演變而來，主要處理非結構化，非幾何的數(shù)據(jù)
     • 金融交易，社交網(wǎng)絡，文本數(shù)據(jù)展示
     • 減少視覺混淆對有用數(shù)據(jù)的干擾，把無用的數(shù)據(jù)過濾掉，而非簡單信息的堆疊（數(shù)據(jù)加工，提取可用信息）
     • 更傾向于展示信息
   • 可視化分析（前兩者的結合）
     • 分析數(shù)據(jù)導向進行展示，需要了解具體的事物邏輯

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

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

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

二.Echarts概述

1. 什么是Echarts

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

       2\. 為什么要選擇Echarts（特性）
   復制代碼
   

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

三.Echarts繪制條形圖

1、初始化類

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

var myChart = echarts.init(document.getElementById('box1'))
復制代碼

2、樣式配置

title ：標題

tooltip ：鼠標懸停氣泡

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

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

3、渲染圖展示表

myChart.setOption(option);
復制代碼

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

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

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

   beforeDestroy () {
       this.chart.clear()
   },
   復制代碼
   

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

echarts官網(wǎng)的實例都具有響應式功能

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

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

六. echarts的基本用法

1. 初始化類

Html里面創(chuàng)建一個id為box1的div，并初始化echarts繪圖實例 var myChart = echarts.init(document.getElementById('box1'))

2. 樣式配置

• title ：標題
• tooltip ：鼠標懸停氣泡
• xAxis : 配置橫軸類別，type類型為category類別
• series：銷量數(shù)據(jù)，data參數(shù)與橫軸一一對應，如果想調樣式，也可以簡單調整，比如每個條形圖的顏色可以通過函數(shù)進行數(shù)組返回渲染

3. 渲染圖展示表

myChart.setOption(option);

7. Echarts特性介紹

• 拖拽重計算 數(shù)據(jù)視圖，滿足用戶對數(shù)據(jù)的需求 動態(tài)類型切換，嘗試不同類型的圖表展現(xiàn) 值域漫游，聚焦到你所關心的數(shù)值上 數(shù)據(jù)區(qū)域縮放，聚焦到你所關心的數(shù)值上 多圖聯(lián)動，更友好的關聯(lián)數(shù)據(jù)分析 百搭時間軸，時間維度拓展 大規(guī)模散點，展現(xiàn)大數(shù)據(jù)的魅力 力導向布局，復雜關系網(wǎng)絡的最美呈現(xiàn) 動態(tài)數(shù)據(jù)的添加，實時展現(xiàn)數(shù)據(jù)的變化 多維度圖例開關，切換你所關心的數(shù)據(jù)系列 多維度堆積圖，展現(xiàn)更具內涵的統(tǒng)計圖表 商業(yè)BI,一些廣泛應用的商務圖表 混搭，用最佳的組合方式展現(xiàn)你獨特的數(shù)據(jù) 高度個性化能力，釋放你的創(chuàng)造力 特效，吸引眼球的能力

8. 如何使用Echarts

• ①獲取Echarts ：在官網(wǎng)下載Echarts版本 或 npm下載 ②引入Echarts ：script引入 或者 vue在入口文件里引用 ③創(chuàng)建一個dom元素 用來放置圖表 ④配置Echarts屬性

9. Echarts3.x與Echarts2.x的區(qū)別

• Echarts2.x是通用的版本。 Echarts2.x版本的文檔實例比Echarts3.x版本的文檔實例要好，更加清晰，更加容易理解。 Echarts2.x版本做的圖表更炫酷。 Echarts2.x代表的是現(xiàn)在，而Echarts3.x代表的是未來。 Echarts3.x對Echarts的引用更靈活，更簡單，方便。

10.ECharts如何畫圖？

第一，ECharts是通過canvas來實現(xiàn)的，由于canvas的限制，所以echarts在實現(xiàn)的時候多是繪制一些規(guī)則的，可預期的，易于實現(xiàn)的東西

第二，echarts的核心就是options配置的對象。一般使用最多的是直角坐標圖，極點圖，餅狀圖，地圖。

第三，對于直角坐標，必須配置xAsix和yAxis，對于幾點坐標必須配置radiusAxis和angleAxis。

第四就是series系列的認識，它是一個數(shù)組，數(shù)組的每一項都代表著一個單獨的系列，可以配置各種圖形等等功能。然后data

一般是一個每一項都是數(shù)組的數(shù)組，也就是嵌套數(shù)組。里層數(shù)組一般代表坐標位置

11.echarts和chart對比

echarts的優(yōu)點：

1.國人開發(fā)，文檔全，便于開發(fā)和閱讀文檔。

2.圖表豐富，可以適用各種各樣的功能。

echarts的缺點：

移動端使用略卡，畢竟是PC端的東西，移植到移動端肯定多多少少有些問題吧，或許跟自己水平也有一定的關系，哎怎么說呢。

echarts不失為一款比較適合我們這種碼農(nóng)使用的框架。

echarts就不貼代碼了。畢竟文檔很全。

chart.js優(yōu)點：

1.輕量級，min版總大小50多k。

2.移動端使用比較流暢，畢竟小。

chart.js缺點：

1.功能欠缺比較多。

2.中文文檔奇缺。

12.echarts支持哪些圖標？

折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）

雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表