資料視覺化--Echarts外掛的使用
-
Echarts：
概述：ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴向量圖形庫 ZRender，提供直觀，互動豐富，可高度 個性化 定製的 資料視覺化圖表。
作用：讓資料視覺化，更加直觀的對比每個資料差異，官網(https://echarts.apache.org/zh/index.html)中的示例提供了多種圖示結構,常用的有:折線圖，餅狀圖，柱狀圖，K線圖，散點圖...
使用方法：
1.獲取 ECharts：可以上官網檢視教程有獲取方式，這裡只提供一種獲取方式。
登入 jsDelivr(https://www.jsdelivr.com/package/npm/echarts?version=5.0.0-rc.1) ，進入介面如下：
預設的顯示檔案就是所要的檔案（見圖片標註框），將要的檔案複製到自己的資料夾即可
2.引入 ECharts：通過標籤方式直接引入構建好的 echarts 檔案<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 檔案 --> <script src="echarts.min.js"></script> </head> </html>
3.繪製一個簡單的圖表
3.1 在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器。
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
3.2然後就可以通過 echarts.init 方法初始化一個 echarts 例項並通過 setOption 方法生成一個簡單的柱狀圖，下面是完整程式碼。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
這樣你就可以生成一個圖示：
在實際操作中可以在官網挑選符合專案要求的圖例，官網網頁支援線上編輯和更改樣式，更改樣式需要注意不同的結構更改樣式的語法不一，需要通過官網的文件-配置項下查詢對應結構修改樣式的語法。
官網-例項的選擇頁面上選擇所需圖例，即可進入到編輯頁面：圖所示左側為編輯區，右側為圖例展示區
圖例使用屬性：
title：標題元件，包含主標題和副標題。
legend：圖例元件。圖例元件展現了不同系列的標記(symbol)，顏色和名字。可以通過點選圖例控制哪些系列不顯示。
grid：直角座標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪製折線圖，柱狀圖，散點圖（氣泡圖）。
xAxis：直角座標系 grid 中的 x 軸，一般情況下單個 grid 元件最多隻能放上下兩個 x 軸，多於兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。
yAxis：直角座標系 grid 中的 y 軸，一般情況下單個 grid 元件最多隻能放左右兩個 y 軸，多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。
tooltip:提示框元件。
toolbox:工具欄。內建有匯出圖片，資料檢視，動態型別切換，資料區域縮放，重置五個工具。
backgroundColor：背景色，預設無背景。
textStyle：全域性的字型樣式。