简介
@vowo/chart-elements 是一个基于 Vue2.x 和 Echarts4.x 开发的前端图表组件库，它提供了丰富的图表类型和配置选项，使前端开发人员可以轻松快捷地创建各种高度定制化的图表。
安装
使用 npm 进行安装：
npm install @vowo/chart-elements --save
引入
import Vue from 'vue' import ChartElements from '@vowo/chart-elements' Vue.use(ChartElements)
使用
基础使用
-- -------------------- ---- -------
----------
-----
---------
------------
------------------
------------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
----- -
------ ------ ----- ----- ----- ----- ----- ------
----------- ----- ---- ---- --- --- ---- ----
--
-------- -
------ -
----- -------
-
-
-
-
-
---------自定义样式
-- -------------------- ---- -------
----------
-----
--------
------------
------------------
--------------
-------------
-------------------
-----------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
----- -
------ ------ ----- ----- ----- ------
----------- ----- ---- ---- --- ---
--
-------- -
------ -
----- -------
-
--
----------- -
------- ---- ----- ------
------------- ------
---------- -- - ---- -----
-
-
-
-
---------动态绑定
-- -------------------- ---- -------
----------
-----
--------
---------------
------------------
-----------
------- ---------------------------------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
-------- -
----------- ------ ----- ----- ----- ------
----------- -
- ----- ----- ------ --- --
- ----- ----- ------ --- --
- ----- ----- ------ --- --
- ----- ----- ------ -- --
- ----- ----- ------ -- -
-
--
-------- -
------ -
----- ------
-
-
-
--
-------- -
------------ -
----------------------- - -
- ----- ----- ------ ------------------------ - ---- --
- ----- ----- ------ ------------------------ - ---- --
- ----- ----- ------ ------------------------ - ---- --
- ----- ----- ------ ------------------------ - ---- --
- ----- ----- ------ ------------------------ - ---- -
-
-
-
-
---------API 文档
VueLine
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| data | Object | Yes | - | 折线图数据，具体配置参考 Echarts 标准配置，必须包含 xData 和 seriesData 字段 |
| options | Object | No | - | 折线图配置，具体配置参考 Echarts 标准配置 |
| width | String/Number | No | 100% | 折线图宽度 |
| height | String/Number | No | 400px | 折线图高度 |
VueBar
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| data | Object | Yes | - | 柱状图数据，具体配置参考 Echarts 标准配置，必须包含 xData 和 seriesData 字段 |
| options | Object | No | - | 柱状图配置，具体配置参考 Echarts 标准配置 |
| width | String/Number | No | 100% | 柱状图宽度 |
| height | String/Number | No | 400px | 柱状图高度 |
VuePie
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| data | Object | Yes | - | 饼图数据，具体配置参考 Echarts 标准配置，必须包含 legendData 和 seriesData 字段 |
| options | Object | No | - | 饼图配置，具体配置参考 Echarts 标准配置 |
| width | String/Number | No | 100% | 饼图宽度 |
| height | String/Number | No | 400px | 饼图高度 |
结语
本文介绍了如何使用 @vowo/chart-elements 这个前端图表组件库，它支持折线图、柱状图和饼图等多种图表类型，并提供了丰富的配置选项和自定义样式的功能。希望本文对你学习和使用 @vowo/chart-elements 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6051ab1864dac67250