介紹

ApexCharts.JS是一個開源的現代化JavaScript圖表庫，可以使用簡單的API構建可視化交互式圖表，ApexCharts.JS比較好的地方在於它支持原生的js和當前主流的Web框架，如React、Vue以及Angular，雖然諸如阿里Antv以及百度ECharts都已經做的非常好了，但是畢竟你可以多一個選擇，況且它足夠簡單！

相關鏈接

官網：

https://apexcharts.com/javascript-chart-demos/

Github：

https://github.com/apexcharts/apexcharts.js

Vue：

https://github.com/apexcharts/vue-apexcharts

React：

https://github.com/apexcharts/react-apexcharts

Angular：

https://github.com/apexcharts/ng-apexcharts

瀏覽器兼容性

它的瀏覽器兼容新還是不錯的，特別是針對除IE以外的其它瀏覽器的低版本

下載和安裝

• npm包管理

npm install apexcharts --save

• 瀏覽器直接引入

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

用法

建議使用模塊化的方式

import ApexCharts from 'apexcharts'

var options = {
 chart: {
 type: 'bar'
 },
 series: [{
 name: 'sales',
 data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
 }],
 xaxis: {
 categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
 }
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

這樣一個基礎的圖表就完成了

示例

下面介紹一下官方的一些示例和簡介

• 交互

按照選擇的方式進行圖表的顯示，如縮放，平移，滾動數據等

• 動態更新

由其中一個圖表來更新另一個數據，類似於聯動的效果

• 混合圖表

可以組合多種圖表類型來創建組合/混合圖表。可能的組合可以是單個圖表中的行/區域/列。每個圖表類型都可以擁有自己的y軸。

• 燭臺圖表

使用燭臺圖表（常見的金融圖表）來描述證券，衍生品或貨幣的價格變化。下圖顯示瞭如何將另一個圖表用作畫筆/預覽窗格，該窗格用作瀏覽主燭臺圖表的句柄。

• 熱圖

使用Heatmaps通過顏色和陰影表示數據。經常與更大的數據集合一起使用，它們對於識別模式和焦點區域很有價值。

• 儀表圖

• 迷你圖

利用迷你圖來指示數據趨勢，例如，偶爾的增量或下降，貨幣週期，或以最極端和最小值為特徵

• 圖表面板

現代化風格：

實時面板：

更多示例和用法可以參照官網文檔，都會有詳細的介紹和代碼演示

本土化

apexcharts提供了自定義的本土化功能，用於一些標題、格式的顯示，只需要更改相關配置文件即可，詳情參考官方文檔

主題更換

apexcharts提供了非常人性化的主題功能，如果不想自定義，只需要設置相關屬性即可，官方提供10中可選顏色主題

總結

總體來說ApexCharts是一個相對簡單，但是功能不簡單的圖表庫，而且文檔也非常的詳細，當你不需要ECharts或者AntV那樣強大的功能的話，倒是可以選擇ApexCharts，希望對你有所幫助！