如何使用 UI5 web Component的React框架的柱状图和折线图

导入柱状图和折线图：

import { BarChart, LineChart } from “@ui5/webcomponents-react-charts”；

在自定义的React Component里，为图标创建数据集和数据标签对应的JavaScript数组：

最后在React 自定义组件里，直接为LineChart和BarChart这两个标签页维护刚才创建好的JavaScript数组：

最后的效果，折线图：

柱状图：

不出意外，还是通过canvas实现的：

导入组件@ui5/webcomponents-react-base：

然后在第17行的Text标签里给style属性附上值：spacing.sapUiContentPadding的值在运行时为padding: 1rem

这个值定义在文件夹C:\temp\react\my-app\node_modules@ui5\webcomponents-react-base\cjs下面的文件base.development.js里：

打开SAP云平台 portal Service的Content manager：

点击My Content，创建一个新的portal应用：

我们的自定义url就在这个新建应用的字段URL里维护：

创建的应用如下图所示：

再创建一个新的group：

将之前创建的url应用分配给这个group：

点击Go to site，打开url：

即可看到之前创建的URL应用出现在Launchpad里：

点击tile，即可在portal里打开对应的url：