大家好，很高兴又见面了，我是" 高级前端‬进阶 ‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

apexcharts,apexcharts鎬庝箞浣跨敤

什么是 ApexCharts

ApexCharts 是现代 JavaScript 图表库，允许开发者使用简单的 API 和 100 多个开箱即用型示例构建交互式数据可视化。

ApexCharts 包含很多优秀的功能，比如十多种图表类型可在应用程序和仪表板中提供美观、响应灵敏的可视化效果。在 FireFox>31+、Chrome>=35+、Safari>=6+、Edge、IE11 等版本的浏览器中完全可用。

ApexCharts的典型特点包括：

可响应性： ApexCharts 可在台式机、平板电脑和手机上轻松扩展。可以设置响应式查询，并且可以针对不同的屏幕尺寸使用不同的布局
可交互性：缩放、平移、滚动数据、切换多个系列中的数据集可见性、当用户将鼠标悬停在数据点上时显示信息丰富的工具提示，从而更有效传达数据。
动态化 ： ApexCharts 的动态特性允许加载所选内容的数据并根据这些选择创建其他图表。换句话说，这些功能将使数据真正具有交互性。
高性能 ：除为图表提供优质外观外，ApexCharts 还提供高性能，支持大数据渲染。
流畅的动画 ： ApexCharts 在更改数据集、加载动态数据以及与图表交互时提供流畅的交互体验。
支持主题 ： ApexCharts 有 10 多个调色板可供选择。选择预定义的颜色主题或创建自己的颜色主题。

目前 ApexCharts 在 Github 上通过 MIT 协议开源，有超过 13.2k 的 star、1.2k 的 fork、代码贡献者 150+，妥妥的前端优质开源项目。

如何使用 ApexCharts

首先需要导入相应的库：

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();

渲染效果如下：

apexcharts,apexcharts鎬庝箞浣跨敤