1. 快速开始.md

快速开始

本教程将介绍如何使用 openinula-vchart 绘制一个简单的图表。VChart 是一款简单易用、跨平台、高性能的前端可视化图表库。图表由数据、series 系列和组件三部分组成，我们将使用配置项来声明图表。

环境要求

确保你的环境中安装了node，npm以及Openinula，并且满足以下版本要求：

• node 10.12.0+

• npm 6.4.0+

• openinula 0.1.2+

安装

使用包管理器安装

# 使用 npm 安装
npm install @visactor/openinula-vchart

# 使用 yarn 安装
yarn add @visactor/openinula-vchart

引入 Openinula-VChart

推荐使用 npm 包引入

import { BarChart, Bar } from '@visactor/openinula-vchart';

绘制一个简单的柱状图

你可以像使用标准的 Openinula 组件一样，使用通过@visactor/openinula-vchart导入的BarChart组件。

以下是一个简单柱状图是示例代码：

import React from 'openinula';
import ReactDOM from 'openinula';
import { BarChart, Bar } from '@visactor/openinula-vchart';

const barData = [
  {
    id: 'barData',
    values: [
      { month: 'Monday', sales: 22 },
      { month: 'Tuesday', sales: 13 },
      { month: 'Wednesday', sales: 25 },
      { month: 'Thursday', sales: 29 },
      { month: 'Friday', sales: 38 }
    ]
  }
];

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <BarChart data={barData}>
    <Bar xField="month" yField="sales" />
  </BarChart>
);

上述例子中，BarChart为图表容器，Bar组件为柱状图元组件，一个图表容器中可以有多个图元组件，组成组合图。更多使用方法请参考使用教程。

注意：上述例子中展示的图表定义方式是 Openinula-VChart 提供的语法化标签API 风格，与统一图表标签的区别请参考API 设计。