简介
sphaera 是一个简单易用的前端视觉编排工具，它能够帮助开发者快速生成漂亮的图表、表格等数据可视化组件。它完全基于 Vue.js 打造，支持多种数据格式，包括数组、JSON、CSV 等。如何使用 sphaera 来快速搭建一个漂亮的数据可视化组件呢？接下来，我们将一步步介绍 sphaera 的使用方法。
安装
使用 npm 安装 sphaera：
npm install sphaera
使用方法
初始化
首先，在 Vue 组件中引入我们刚刚安装的 sphaera：
import Sphaera from 'sphaera'
接着，在 Vue 组件的 mounted 钩子函数里，创建一个新的 sphaera 实例：
-- -------------------- ---- -------
--------- -
----- ------- - --- ---------
--- -----------
----- -
-- --- --
--
------ -
-- ---- --
-
--
--其中，el 的属性值为要渲染组件的节点 ID，在这里，我们可以先在 template 中定义一个 div 元素：
<div id="sphaera"></div>
data 是数据源，它支持多种数据格式，包括数组、JSON、CSV 等。例如，我们使用一个数组来作为数据源：
const data = [
{ month: 'Jan', price: 100 },
{ month: 'Feb', price: 200 },
{ month: 'Mar', price: 300 },
{ month: 'Apr', price: 400 },
{ month: 'May', price: 500 },
{ month: 'Jun', price: 600 }
]chart 是图表配置，它用来控制图表的样式、布局等。例如，我们定义一个柱状图：
-- -------------------- ---- -------
----- ----- - -
----- ------
------- --------
------- --------
------ ------ --------
------- ----------- -----------
-------- -
----- ---
------ --
--
------ -
------ --------
-------------- --
-
-布局
当我们完成了数据源和图表配置的定义后，就可以开始布局了。首先，我们需要在组件的 mounted 钩子函数中获取到 sphaera 的实例：
mounted() {
const sphaera = new Sphaera(/* ... */)
this.sphaera = sphaera
},接着，我们在 created 或者 mounted 钩子函数内部，通过 $nextTick 方法获取到组件的 DOM 元素：
mounted() {
const sphaera = new Sphaera(/* ... */)
this.sphaera = sphaera
this.$nextTick(() => {
const dom = this.$el.querySelector('#sphaera')
this.sphaera.draw(dom)
})
},绑定数据
当我们完成了组件的布局后，即可以开始将数据源和图表配置绑定到 sphaera 实例中，这样，图表就会根据数据源和图表配置进行渲染：
-- -------------------- ---- -------
--------- -
----- ------- - --- ---------
--- -----------
----- ----- -- -----
------ ----- -- ------
--
------------ - -------
----------------- -- -
----- --- - ----------------------------------
----------------------
--
--响应式
最后，我们将 sphaera 实例放到 Vue 组件的 data 属性中，这样，就可以实现响应式更新了：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
----- -----
------ ------
-------- ----
-
--
--------- -
----- ------- - --- ---------
--- -----------
----- ---------- -- -----
------ ---------- -- ------
--
------------ - -------
----------------- -- -
----- --- - ----------------------------------
----------------------
--
--
------ -
------ -
-------------------------------
--
------- -
---------------------------------
-
-
-示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
----------
-----
---- -------------------
------- -------------------------- -------------
------- --------------------------- --------------
------
-----------
--------
------ ------- ---- ---------
----- ---- - -
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- -
-
----- ----- - -
----- ------
------- --------
------- --------
------ ------ --------
------- ----------- -----------
-------- -
----- ---
------ --
--
------ -
------ --------
-------------- --
-
-
------ ------- -
------ -
------ -
----- -----
------ ------
-------- ----
-
--
--------- -
----- ------- - --- ---------
--- -----------
----- ---------- -- -----
------ ---------- -- ------
--
------------ - -------
----------------- -- -
----- --- - ----------------------------------
----------------------
--
--
------ -
------ -
-------------------------------
--
------- -
---------------------------------
-
--
-------- -
------------ -
--------- - -
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- -
-
--
------------- -
---------- - -
----- -------
------- --------
------- --------
------ ------ -------
------ ----------
-------- -
----- ---
------ --
--
------ -
------ --------
-------------- --
-
-
-
-
-
---------当你运行示例代码后，你将会看到一个柱状图和两个按钮。点击这两个按钮，将会切换数据源和图表类型。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a58ccae46eb111f181