[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
产品官网 帮助文档 API 文档 视频教程 技术社区
在线Demo 免费试用
(Showing Draft Content)

示例-基于ECharts创建一个可视化插件

初始化工程

  1. 运行 wyn-visual-tools init， 输入工程名称， cli工具将会自动安装依赖。将得到以下的工程：

    1.png

  2. 运行 npm install echarts 以及 npm install @types/echarts --save-dev

  3. 运行 wyn-visual-tools develop 启动调试工具服务端

开发可视化插件

  1. 在 src/visual.ts 导入echarts 并在构造器中创建echarts 实例。

    2.png

  2. 添加一个render方法并在update方法中调用。目前我们先画一个mock chart。

    3.png

  3. 在仪表板设计器中添加开发工具组件， 点击开发工具的刷新按钮。现在可以看到效果。

    4.png

  4. 在capabilities.json中添加数据绑定信息。

    5.png

  5. 在update方法中将数据视图转化为echars需要的数据结构。

    visual.ts

  6. 在onResize方法中添加对应处理。

    6.png

  7. 添加自定义属性。

    7.png

  8. 在render方法中使用自定义属性。

    visual (1).ts

  9. 添加标题和交互支持。

    8.png

  10. 添加一些action。例如聚焦， 过滤和排名。

    9.png

  11. 最后记得及时销毁实例。

    10.png

发布

  1. 设置可视化插件的名字。

    11.png

  2. 运行 wyn-visual-tools package

  3. 上传simple_echarts.viz。 就可在仪表板设计器中使用该可视化插件了。

以下为相关代码：

SimpleEcharts.zip