引言：
當我們做一個后臺管理系統時，總有一大堆資料要進行處理，這個時候資料的可視化操作，就顯得非常重要，今天讓我們一起去學習下ECharts的應用吧，
正所謂文不如表，表不如圖，把資料用圖表的形式展示出來，就是簡單的資料可視化，
有關資料可視化主要有三種方式：1.報表類 2.商業智能BI 3.編碼類
我們主要是來學習第三種編碼類中的Echarts，官網地址：https://echarts.apache.org/zh/index.html
ECharts 定義：
- ECharts 是一個使用 JavaScript 實作的開源可視化庫，涵蓋各行業圖表，滿足各種需求，（百度公司做的）
- ECharts 遵循 Apache-2.0 開源協議，免費商用，
ECharts 包含了以下特性：
--------------------------------------------------------（本節來源于菜鳥教程）------------------------------------------------
豐富的可視化型別: 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理資料可視化的地圖、熱力圖、線圖，用于關系資料可視化的關系圖、treemap、旭日圖，多維資料可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭，
多種資料格式無需轉換直接使用: 內置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的資料源，此外還支持輸入 TypedArray 格式的資料，
千萬資料的前端展現: 通過增量渲染技術（4.0+），配合各種細致的優化，ECharts 能夠展現千萬級的資料量，
移動端優化: 針對移動端互動做了細致的優化，例如移動端小屏上適于用手指在坐標系中進行縮放、平移， PC 端也可以用滑鼠在圖中進行縮放（用滑鼠滾輪）、平移等，
多渲染方案，跨平臺使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表，
深度的互動式資料探索: 提供了 圖例、視覺映射、資料區域縮放、tooltip、資料刷選等開箱即用的互動組件，可以對資料進行多維度資料篩取、視圖縮放、展示細節等互動操作，
多維資料的支持以及豐富的視覺編碼手段: 對于傳統的散點圖等，傳入的資料也可以是多個維度的，
動態資料: 資料的改變驅動圖表展現的改變，
絢麗的特效: 針對線資料，點資料等地理資料的可視化提供了吸引眼球的特效，
通過 GL 實作更多更強大絢麗的三維可視化: 在 VR，大屏場景里實作三維的可視化效果，
無障礙訪問（4.0+）: 支持自動根據圖表配置項智能生成描述，使得盲人可以在朗讀設備的幫助下了解圖表內容，讓圖表可以被更多人群訪問！
--------------------------------------------------------（本節來源于菜鳥教程）------------------------------------------------
創建步驟：
創建一個ECharts圖示主要有以下幾步：
步驟1：引入echarts.js檔案
步驟2：準備一個呈現圖表的盒子（這個盒子要給予寬高）
步驟3：初始化echarts實體物件（這個script標簽要記得放在呈現圖表的盒子之后，或者window.onload）
步驟4：準備配置項（使用ECharts創建不同的表格，只有配置項會變化，其他代碼都是固定）
步驟5：將配置項配置給echarts實體物件
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 步驟1：引入echarts.js檔案 -->
<script src="./lib/echarts.min.js"></script>
</head>
<!--
步驟1：引入echarts.js檔案
步驟2：準備一個呈現圖表的盒子
步驟3：初始化echarts實體物件
步驟4：準備配置項
步驟5：將配置項配置給echarts實體物件
-->
<body>
<!-- 步驟2：準備一個呈現圖表的盒子 -->
<div style="width: 600px;height: 400px;"></div>
<script>
// 步驟3：初始化echarts實體物件
// 引數，dom，決定圖示最終呈現的位置
var mCharts = echarts.init(document.querySelector('div'))
// 步驟4：準備配置項
var option = {
// x軸
xAxis: {
type: 'category', // 類目軸
data: ['小明','小麗','小王'] // 類別
},
// y軸
yAxis: {
// 設定為value之后就不用設定data，它會自動去series的data里去找尋每個類別對應的值
type: 'value' //數值軸
},
// 系列串列，每個系列串列通過type決定自己的圖表型別
series: [
{
name: '語文',
type: 'bar', //bar -- 柱狀圖 pie--餅狀圖
data: [70, 88, 98]
}
]
}
// 步驟5：將配置項配置給echarts實體物件
mCharts.setOption(option)
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/290702.html
標籤：其他