介绍
enlighten-vue-chartjs 是一个 Vue.js 的扩展包，它基于 Chart.js 实现的图表控件，并添加了一些智能功能，让你更轻松地创建、配置和管理图表。
安装
在你的 Vue.js 项目中安装 enlighten-vue-chartjs 。
npm install enlighten-vue-chartjs
快速上手
在 Vue.js 项目中，先导入 enlighten-vue-chartjs 并定义一个基本的数据格式。
-- -------------------- ---- -------
----------
-----
----------------------
----------------------
----------------------
------------------------
--
------
-----------
--------
------ ------------------- ---- -----------------------
------ ------- -
----------- -
-------------------
--
------ -
------ -
---------- --- -------
---------- -------
----------- -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- -
-
------ --- ----- ---------
---------------- -----------------------
------------ ---------------------
------------ --
----- ---- --- --- --- --- --- ---
--
-
------ --- ------ ---------
---------------- --------- ---- ---- ------
------------ --------- ---- ---- ----
------------ --
----- ---- --- --- --- --- --- ---
-
-
-
-
-
-
---------接着，你就可以在浏览器中看到你的图表了。
深入配置
除了基本的数据格式，还有更丰富的配置项可供定义。
设置图表高度、宽度。
<enlighten-vue-chartjs :chartName="chartName" :chartType="chartType" :dataSource="dataSource" :height="500" :width="800" />
设置 Y 轴刻度间隔。
<enlighten-vue-chartjs :chartName="chartName" :chartType="chartType" :dataSource="dataSource" :height="500" :width="800" :yAxisStepSize="10" />
设置图例方向。
<enlighten-vue-chartjs :chartName="chartName" :chartType="chartType" :dataSource="dataSource" :height="500" :width="800" :legendPosition="'top'" />
更多配置项，请参考 官方文档。
高级定制
enlighten-vue-chartjs 除了预设的配置项，还支持动态增加、修改、删除数据系列和数据点。
-- -------------------- ---- -------
----------
-----
----------------------
-------------
----------------------
----------------------
------------------------
-------------
------------
-----------------------
--
------- ----------------------- ----------------
------- ----------------------------- ----------------
------- ----------------------------- ----------------
------
-----------
--------
------ ------------------- ---- -----------------------
------ ------- -
----------- -
-------------------
--
------ -
------ -
---------- --- -------
---------- -------
----------- -
------- ----------- ----------- -------- -------- ------ ------- --------
--------- -
-
------ --- ----- ---------
---------------- -----------------------
------------ ---------------------
------------ --
----- ---- --- --- --- --- --- ---
-
-
-
-
--
-------- -
------------ -
--- ---------- - -
------ --- --- ---------
---------------- -----------------------
------------ ---------------------
------------ --
----- ---- --- --- --- --- --- ---
-
-----------------------------------------
--
--------------- -
--- ---------- - -----------------------------------------------
----------------------------------- -
----- ------------------------------------------ -- -
------ ----- - ----------
--
--
--
--------------- -
------------------------------------------
-
-
-
---------总结
enlighten-vue-chartjs 提供了一个方便易用、同时高度可定制的图表控件，让你在 Vue.js 项目中快速创建和管理图表。
在实际应用中，需要根据具体需求进行配置及开发。希望这篇文章对你有所帮助，进一步学习和了解 enlighten-vue-chartjs。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005644481e8991b448e1637