介绍

ApexCharts.JS是一个开源的现代化JavaScript图表库，可以使用简单的API构建可视化交互式图表，ApexCharts.JS比较好的地方在于它支持原生的js和当前主流的Web框架，如React、Vue以及Angular，虽然诸如阿里Antv以及百度ECharts都已经做的非常好了，但是毕竟你可以多一个选择，况且它足够简单！

相关链接

官网：

Github：

Vue：

React：

Angular：

浏览器兼容性

它的浏览器兼容新还是不错的，特别是针对除IE以外的其它浏览器的低版本

下载和安装npm包管理

npm install apexcharts --save

<script src=""></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，希望对你有所帮助！