介绍

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，希望对你有所帮助！