快速上手

下面使用 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 的版本,修改后可用浏览器打开检查折线图是否正常。

  • 折线图组件创建完成


加载组件

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

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


在项目中使用组件

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

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


下一步

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