山海鲸可视化

快速上手

【注意】自定义组件仅适用于山海鲸可视化 2.x 版本,3.x 版本请查看二次开发文档。
山海鲸可视化内置了一套丰富的组件库,自定义组件机制提供了扩充内置组件库的能力。
得益于软件的基础组件架构,自定义组件已经具有了一些基础组件的功能,比如数据筛选、数据联动、组件多状态、条件设置等等。
同时自定义组件提供了一套简洁高效的 API,方便开发者自定义设置项、读取数据、联动外部组件、自定义过场动画、自定义 app 控制等。

下面使用 echarts 的官方基础折线图示例,创建一个基础折线组件。

创建组件

  • 创建一个空文件夹,里面创建文件manifest.json,内容如下:
1
2
3
4
5
6
7
{
"id": "com.shanhaibi.demo.001.echarts基础折线图",
"name": "echarts基础折线图",
"version": "0.0.1",
"type": "plugin",
"main": "index.html"
}
  • 从 echarts 官网下载基础折线图的示例代码,将其重命名为index.html,并保存到上述的文件夹中。

  • 用文本编辑器打开index.html,并填入 echarts 的版本,修改后可用浏览器打开检查折线图是否正常。

  • 折线图组件创建完成


加载组件

  • 打开山海鲸可视化,点击左上角设置图标,进入个人中心,点击自定义组件

image.png

  • 点击添加路径按钮,选择上面创建的组件目录,点击选择文件夹,组件就会加载到软件中

image.png

在项目中使用组件

  • 打开已有项目或创建一个新项目,在组件菜单中选择刚才加载的echarts 基础折线图,将此组件添加到项目中

image.png

  • 可以看到 echarts 折线图已经添加并成功加载出来

image.png

下一步

自定义组件的创建及使用已经介绍完毕,接下来可以查看: