快速上手
本节内容为 AIGC 可视化组件库的接入使用文档（相关推荐服务可以参考后端文档，详细可以询问@陈之帆）。
安装
引入组件库依赖可选择以下两种方式。
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/aigc
版本信息
| 公司内网 | 公司外网 |
|---|---|
| 1.15.9 | 1.15.8 |
cdn
如果是外网开发，可以直接引入构建的 JS 文件：
// umd
<script src="path/to/bundle.umd.min.js"></script>;
const chart = AIGCDataVis.render(dom, spec);
// esm
import { render } from 'path/to/bundle.esm.min.js';
const chart = render(dom, spec);
CDN 资源
CDN资源分为bundle（包含HXKline组件）和common（不包含HXKline组件）两个版本，会同时提供压缩版本 (.min.js) 和未压缩版本 (.js)，前者为生产环境使用，后者可用于开发环境便于调试（还将提供相应的 sourcemap 文件），为了减小构建体积，将行情图的依赖拆出改为cdn资源引入，使用 AIGC 可视化组件库的行情图组件前请确保先引入行情图资源。为了进一步减小构建体积，将标准范式图表组件库的依赖拆出改为cdn资源引入，对应资源为路径片段为/aigc-external-stdchart/的CDN链接。
使用
要使用 AIGC 可视化组件库，请先将组件库及其依赖安装到项目。
提示
由于 AIGC 可视化组件库封装了大量不同类型的组件（例如范式组件、行情组件等等），考虑到业务侧并非使用所有类型组件，所以将底层依赖剥离到组件库外部保持组件库自身体积足够小，来支持业务侧的加载性能优化。
因此，请先引入组件库的外部依赖项：
<body>
<!-- 如果需要渲染行情图组件，请引入依赖的日志库和行情图组件库（请确保行情图资源提前 AIGC 可视化组件库前引入） -->
<!-- https://khtest.10jqka.com.cn/kodexplorer/data/User/wangyifan/home/HXKlineChart/docs/ -->
<script
type="text/javascript"
src="//s.thsi.cn/cb?cd/weblog/0.0.1-alpha.28/weblog.js"
crossorigin="anonymous"
></script>
<script
type="text/javascript"
src="//s.thsi.cn/hxapp/m/base/js/skywalking.1.1.13.min.js"
crossorigin="anonymous"
></script>
<script src="https://s.thsi.cn/cd/b2cweb-component-hxkline-front/index.1.0.6.js"></script>
<script src="https://s.thsi.cn/cd/b2cweb-component-hxklinechart-front/index.2.0.7.js"></script>
<!-- 如果需要渲染 3D 组件，请引入依赖的原生 ECharts -->
<script src="./libs/echarts/echarts.min.js"></script>
<script src="./libs/echarts-gl//2.0.9/bundle.umd.min.js"></script>
<!-- 如果需要渲染常规可视化图表，请引入依赖的标准范式组件库 -->
<!-- https://datav.iwencai.com/components/paradigm-chart/docs/guide#cdn -->
<script src="https://s.thsi.cn/cd/iwc-datav-standard-chart/1.5.0/bundle.umd.min.js"></script>
<!-- 如果需要渲染动态范式图表，请引入依赖的时间轴组件库 -->
<!-- https://datav.iwencai.com/components/paradigm-chart/docs/more/paradigm-timeline-docs/usage-guide#cdn -->
<script src="https://s.thsi.cn/cd/iwc-datav-standard-chart/paradigm-timeline/0.5.0/bundle.umd.min.js"></script>
</body>
亦可参考组件库项目下的 examples/index.html 文件。
然后，参考以下示例代码即可初始化一个组件实例：
import AIGCDataVis from '@datav/aigc';
// 可视化数据集
const dataset = [
{
"name": "光线传媒",
"profitability": 89.0266204080834,
"date": "2024-01-01"
},
{
"name": "光线传媒",
"profitability": 31.755979924764176,
"date": "2023-01-01"
},
{
"name": "光线传媒",
"profitability": 83.85676611503831,
"date": "2022-01-01"
},
{
"name": "光线传媒",
"profitability": 48.08392510745112,
"date": "2021-01-01"
},
{
"name": "光线传媒",
"profitability": 2.4202069046315167,
"date": "2020-01-01"
}
];
// 可视化渲染
AIGCDataVis.render(dom, {
data: [
{
values: dataset
}
],
view: {
main: {
layers: [
{
type: 'line',
encoding: {
x: 'date',
y: 'profitability'
}
}
]
}
}
});
// 销毁
//destroy(dom);
实例：