數據可視化--Echarts插件的使用

時間 2020-11-30

標籤 javascript html java apache npm 瀏覽器 echarts dom 工具字體欄目 JavaScript 简体版

原文原文鏈接

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 文件javascript
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <script src="echarts.min.js"></script>
</head>
</html>
```

3.繪製一個簡單的圖表
3.1 在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器。html

<body>
      <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
      <div id="main" style="width: 600px;height:400px;"></div>
  </body>

3.2而後就能夠經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。java

<!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>

這樣你就能夠生成一個圖標：
apache

在實際操做中能夠在官網挑選符合項目要求的圖例，官網網頁支持在線編輯和更改樣式，更改樣式須要注意不一樣的結構更改樣式的語法不一，須要經過官網的文檔-配置項下查找對應結構修改樣式的語法。
官網-實例的選擇頁面上選擇所需圖例，便可進入到編輯頁面：圖所示左側爲編輯區，右側爲圖例展現區
npm

圖例使用屬性：
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：全局的字體樣式。瀏覽器