快速上手

本节内容为标准范式图表组件库的接入使用文档。

安装

引入组件库依赖可选择以下两种方式。

npm

公司内网，使用前请确保已设置好内网 npm 源的 host：

10.0.35.249  repositories.myhexin.com
10.0.35.249  repositories-public.myhexin.com

公司外网 npm 源地址设置:

npm config set registry http://repositories.myhexin.com:8081/repository/npm-public/

然后在你的项目中添加组件库依赖：

npm install --save @datav/standard

版本信息

公司内网	公司外网
1.11.2	1.11.2

cdn

如果是外网开发，可以直接引入构建的 JS 文件：

// umd
<script src="path/to/bundle.umd.min.js"></script>;
const chart = ThsDataVStandardChart.init(dom, theme?, initOption?);

// esm
import { init } from 'path/to/bundle.esm.min.js';
const chart = init(dom, theme?, initOption?);

// esm 分包版本
import { init } from 'path/to/loader.min.js';
const chart = init(dom, theme?, initOption?);

CDN 资源

会同时提供压缩版本 (.min.js) 和未压缩版本 (.js)，前者为生产环境使用，后者可用于开发环境便于调试（还将提供相应的 sourcemap 文件）。esm会提供 bundle.esm.js和loader.js。前者加载资源一次性加载，后者加载资源分包。

---

点击查看历史版本（国内）

点击查看历史版本（海外）

使用

要使用标准范式图表组件，请先将组件库依赖安装到项目，然后参考以下示例代码即可初始化一个组件实例：

import { init } from '@datav/standard';

// 初始化一个图表实例
const chart = init(dom);

// 渲染图表数据并播放动画
chart.play({
  option: {
    xAxis: {
      data: [1, 2, 3, 4],
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: [50, 100, 150, 200],
      },
    ],
  },
});

实例：

组件实例的 play() 方法用来控制图表的数据渲染和动画播放，所以在多周期数据的场景下，多次调用 play() 方法来根据需要渲染指定周期的数据。 实例：

查看组件示例，更多信息请参考配置项文档和 APIs 文档。