XY数据型图

插入图表报表–XY数据型图

概述

XY数据型图：报表中插入折线图

应用场景

如下图所示，简单展示数据

示例说明

数据准备

在数据面板中添加数据集，可选择Json数据集和Http接口数据集，Json数据如下图所示：

[{"X":3.5,"Y":15.6,"Z":800,"ID":1,"Name":"序列 A"},{"X":14.5,"Y":24,"Z":700,"ID":2,"Name":"序列 A"},{"X":16.2,"Y":45,"Z":256,"ID":3,"Name":"序列 A"},{"X":21.2,"Y":67,"Z":567,"ID":4,"Name":"序列 A"},{"X":26.3,"Y":83,"Z":345,"ID":5,"Name":"序列 A"},{"X":30.5,"Y":92,"Z":234,"ID":6,"Name":"序列 A"},{"X":36.8,"Y":10,"Z":765,"ID":7,"Name":"序列 A"},{"X":38.4,"Y":25,"Z":345,"ID":8,"Name":"序列 A"},{"X":42.6,"Y":52,"Z":765,"ID":9,"Name":"序列 A"},{"X":49.3,"Y":85,"Z":123,"ID":10,"Name":"序列 A"},{"X":50.8,"Y":23,"Z":854,"ID":11,"Name":"序列 A"},{"X":60.7,"Y":16,"Z":368,"ID":12,"Name":"序列 A"},{"X":63.6,"Y":73,"Z":269,"ID":13,"Name":"序列 A"},{"X":69.1,"Y":25,"Z":853,"ID":14,"Name":"序列 A"},{"X":75.3,"Y":85,"Z":654,"ID":15,"Name":"序列 A"},{"X":18,"Y":56.3,"Z":453,"ID":16,"Name":"序列 B"},{"X":24,"Y":78.4,"Z":234,"ID":17,"Name":"序列 B"},{"X":35,"Y":37.5,"Z":654,"ID":18,"Name":"序列 B"},{"X":38,"Y":87.3,"Z":843,"ID":19,"Name":"序列 B"},{"X":46,"Y":25.7,"Z":521,"ID":20,"Name":"序列 B"},{"X":51,"Y":82.5,"Z":345,"ID":21,"Name":"序列 B"},{"X":55,"Y":64.5,"Z":657,"ID":22,"Name":"序列 B"},{"X":67,"Y":57.9,"Z":893,"ID":23,"Name":"序列 B"},{"X":73,"Y":43.2,"Z":923,"ID":24,"Name":"序列 B"},{"X":80,"Y":52.1,"Z":437,"ID":25,"Name":"序列 B"},{"X":84,"Y":78.5,"Z":683,"ID":26,"Name":"序列 B"},{"X":88,"Y":56.4,"Z":256,"ID":27,"Name":"序列 B"},{"X":93,"Y":65.2,"Z":673,"ID":28,"Name":"序列 B"},{"X":24.1,"Y":34.5,"Z":345,"ID":35,"Name":"序列 C"},{"X":25.3,"Y":29.1,"Z":236,"ID":36,"Name":"序列 C"},{"X":25.6,"Y":89.2,"Z":123,"ID":31,"Name":"序列 C"},{"X":35.3,"Y":78.6,"Z":345,"ID":30,"Name":"序列 C"},{"X":56.3,"Y":67.7,"Z":894,"ID":34,"Name":"序列 C"},{"X":68.3,"Y":12.1,"Z":478,"ID":32,"Name":"序列 C"},{"X":68.4,"Y":76,"Z":548,"ID":38,"Name":"序列 C"},{"X":78.4,"Y":34.7,"Z":742,"ID":37,"Name":"序列 C"},{"X":87.4,"Y":43.6,"Z":876,"ID":29,"Name":"序列 C"},{"X":89.2,"Y":34.5,"Z":763,"ID":33,"Name":"序列 C"}]

报表设计

将数据字段拖入A2-E2单元格，并设置为分组以及向下扩展。
选中A1-E2单元格，点击上方工具栏-添加分组。

点击上方工具栏-插入图表。

选择折线图和作用分组，点击确定。

点击即可拖拽表格至合适的位置。

效果预览

XY数据型图.json

https://www.yuque.com/attachments/yuque/0/2023/json/25420404/1700549213161-e6c295a2-006d-4380-a1c3-4b444438fc53.json

参考文档

• 小智报表样例源码下载
  • https://gitee.com/tizdata_admin/vue-xzreport-example.git
• 小智报表demo体验
  • https://xzdemo.tizdata.com/#/imbedShow/reportExample
  • 丰富的报表模板示例
• 小智报表在线试用
  • https://xzreport.com
• 小智报表js sdk下载
  • https://tizdata.com/xzdownload/
• 开发使用文档
  • https://doc.tizdata.com/xiaozhi/650