什么是 ivia
ivia 是一个基于 Vue.js 的交互式数据可视化工具，它可以帮助前端开发者快速搭建数据可视化应用，还支持多种可视化类型和交互方式。
安装和使用
安装 ivia 很简单，只需要在终端中运行下面的命令：
npm install ivia --save
然后在 Vue.js 项目中使用 ivia，首先在入口文件中引入 ivia 的 CSS 文件：
import 'ivia/dist/ivia.css'
然后在 Vue SFC 中使用 <ivia> 标签即可使用 ivia：
-- -------------------- ---- -------
----------
-----
----- ------------------ --------------------
------
-----------
--------
------ ---- ---- ------
------ ------- -
----------- - ---- --
------ -
------ -
-------- ---
----- --
-
-
-
---------以上代码中，options 表示 ivia 的配置项，data 表示要呈现的数据。
配置项说明
以下是 ivia 支持的配置项及其说明。
el
- 类型：
String - 默认值：
'' - 描述：绑定 ivia 实例的目标 DOM 元素的 CSS 选择器。如果忽略此选项，则 ivia 将直接渲染在 Vue.js 组件根元素中。
width
- 类型：
Number - 默认值：
0 - 描述：组件的宽度，单位为像素。
height
- 类型：
Number - 默认值：
0 - 描述：组件的高度，单位为像素。
data
- 类型：
Array - 默认值：
[] - 描述：呈现的数据，为一个数组。
options
- 类型：
Object - 默认值：
{} - 描述：配置项对象。
以下是 options 支持的属性及其说明。
type
- 类型：
String - 默认值：
'line' - 描述：呈现的图表类型，支持的类型有
line、bar、pie和scatter。
title
- 类型：
String - 默认值：
'' - 描述：图表的标题。
legend
- 类型：
Object|Boolean - 默认值：
true - 描述：图例配置。
如果值为 true，则显示默认的图例，如果值为 false，则不显示图例，如果值为一个对象，则可以设置下面的属性：
type: 图例类型，可以是plain（不带背景色）或scroll（滚动）。data: 图例数据，为一个数组，数组中的每个元素表示一个系列（series）的名称。
xAxis
- 类型：
Object - 默认值：
{} - 描述：X 轴配置。
以下是 xAxis 支持的属性及其说明。
type
- 类型：
String - 默认值：
'category' - 描述：X 轴的类型，可以是
'category'（类别型）或'value'（数值型）。
data
- 类型：
Array - 默认值：
[] - 描述：X 轴的数据，如果是类别型 X 轴，则为一个数组，数组中的每个元素为一个类别名；如果是数值型 X 轴，则为一个长度等于数据点数目的自然数数组。
name
- 类型：
String - 默认值：
'' - 描述：X 轴的名称。
yAxis
- 类型：
Object - 默认值：
{} - 描述：Y 轴配置。
以下是 yAxis 支持的属性及其说明。
type
- 类型：
String - 默认值：
'value' - 描述：Y 轴的类型，只能是
'value'。
name
- 类型：
String - 默认值：
'' - 描述：Y 轴的名称。
series
- 类型：
Array - 默认值：
[] - 描述：图表的系列（series）配置，每个系列表示一组数据。
以下是 series 中每个元素支持的属性及其说明。
name
- 类型：
String - 默认值：
'' - 描述：系列的名称，用于图例。
type
- 类型：
String - 默认值：
'line' - 描述：系列的图表类型，可以是
line、bar、pie和scatter。
data
- 类型：
Array - 默认值：
[] - 描述：系列的数据，为一个数组。
stack
- 类型：
String - 默认值：
'' - 描述：系列的堆栈，同一堆栈的系列会被叠加显示。
smooth
- 类型：
Boolean - 默认值：
false - 描述：是否启用平滑曲线。
label
- 类型：
Object - 默认值：
{} - 描述：系列的标签配置。
以下是 label 支持的属性及其说明。
show: 是否显示标签。position: 标签的位置，可以是inside（内部）或top（上方）。formatter: 标签格式化函数。
tooltip
- 类型：
Object - 默认值：
{} - 描述：图表的提示框配置。
以下是 tooltip 支持的属性及其说明。
trigger
- 类型：
String - 默认值：
'axis' - 描述：提示框触发方式，可以是
axis（坐标轴触发）或item（数据项触发）。
formatter
- 类型：
Function - 默认值：
undefined - 描述：提示框格式化函数，接收两个参数，分别为
params（当前数据点）和ticket（异步回调标识）。
示例代码
以下是一个使用 ivia 绘制单线图的示例代码。
-- -------------------- ---- -------
----------
-----
----- ------------------ --------------------
------
-----------
--------
------ ---- ---- ------
------ ------- -
----------- - ---- --
------ -
------ -
-------- -
----- -------
------ --------
------ -
----- -----------
----- ------ ----- ----- ----- ----- ----- ------
----- ----
--
------ -
----- ----
--
------- --
----- ------
----- ----- ---- ---- --- --- ---- ----
---
-------- -
-------- -------
---------- -------- -- -
------ ------------------------- - ----- -------------------------
-
-
--
----- --
-
-
-
---------以上代码中，options 对象的含义见上文的配置项说明，data 数组为空，因为本示例的数据已经在 options 对象中定义了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595d81e8991b448d6c1f