I. Component Introduction

@visactor/openinula-vchart is a packaged version of the VChart chart library provided by VisActor for Openinula. It offers a series of easy-to-use Openinula components for conveniently creating various types of charts in the Openinula development environment, including line charts, bar charts, pie charts, etc. The components of @visactor/openinula-vchart are highly customizable and extensible, allowing different chart effects to be achieved by passing different parameters and configurations.

II.

openinula-vchart provides two styles of components:

• Unified entry components, such as: <VChart /> and <VChartSimple />

• Semantic chart components, including:

• Charts, such as: <LineChart /> <BarChart /> etc.

• Series, such as <Line /> <Bar /> etc.

• Controls, such as <legend /> <Axes /> etc.

Features	<VChart />	<VChartSimple />	Semantic components
Configuration method	Full spec	Full spec, but only supports some charts	Componentized declaration
Extensibility	High	High	Medium
Development experience	Configuration-driven	Configuration-driven	Declarative development

# III. Usage Examples

Unified Entry Mode

import { VChart } from '@visactor/openinula-vchart';

const spec = {
  type: 'bar',
  data: [{ values: [...] }]
};

export default () => <VChart spec={spec} />;    

Declarative Pattern

import { LineChart, Line, Axis, Legend } from '@visactor/openinula-vchart';

export default () => (
  <LineChart data={[...]}>
    <Line xField="date" yField="value" />
    <Axis orient="bottom" />
    <Legend position="top" />
  </LineChart>
);    

This document was revised and organized by the following person

玄魂