### **适用于:多数据对比柱形图、正负条形图、堆叠柱形图、堆叠条形图、多数据条形柱形图** #### **1. SQL数据** 使用SQL形式,可直接连接数据库,将SQl种的数据筛选并显示在图表上。 点击报表编辑器右侧的操作栏,点击“数据”,选择"数据类型"为“SQL数据集”,按步骤操作即可,下边讲解一下各个参数的意思: * 绑定数据集:是左侧绑定过的数据集,可选择任意一个SQL类型的数据集; * 分类属性:是X轴绑定数据库的字段; * 值属性:是Y轴绑定数据库的字段; ``` category:可设置为分类属性; value:可设置为值属性; series:可设置为系列属性; ``` ### **数据库配置字段如下:** ![](https://img.kancloud.cn/58/1e/581e73233847e21988f2ff23391959a2_385x561.png) ![](https://img.kancloud.cn/9d/a1/9da1c568dcf35899062993838162a5ed_1395x571.png) #### **2. 静态API数据** 报表绑定的数据可以是静态API的形式。 点击报表编辑器右侧的操作栏,点击“数据”,选择"数据类型"为“Api数据集”,“Api类型”选择“静态数据”,点击“数据值”,输入静态类型即可,如: ``` [ {"name":"周一","value":320,"type":"直接访问"}, {"name":"周二","value":332,"type":"直接访问"}, {"name":"周三","value":301,"type":"直接访问"}, {"name":"周四","value":334,"type":"直接访问"}, {"name":"周五","value":390,"type":"直接访问"}, {"name":"周六","value":330,"type":"直接访问"}, {"name":"周日","value":320,"type":"直接访问"}, {"name":"周一","value":120,"type":"邮件营销"}, {"name":"周二","value":132,"type":"邮件营销"}, {"name":"周三","value":101,"type":"邮件营销"}, {"name":"周四","value":134,"type":"邮件营销"}, {"name":"周五","value":90,"type":"邮件营销"}, {"name":"周六","value":230,"type":"邮件营销"}, {"name":"周日","value":210,"type":"邮件营销"}, {"name":"周一","value":220,"type":"联盟广告"}, {"name":"周二","value":182,"type":"联盟广告"}, {"name":"周三","value":191,"type":"联盟广告"}, {"name":"周四","value":234,"type":"联盟广告"}, {"name":"周五","value":290,"type":"联盟广告"}, {"name":"周六","value":330,"type":"联盟广告"}, {"name":"周日","value":310,"type":"联盟广告"} ] ``` 备注:代码格式按上边格式写,才可渲染效果; ![](https://img.kancloud.cn/31/b8/31b881dbde11c5a08be7b2272bcbe1ac_1384x530.png) #### **3. 动态API数据** 绑定的数据也可以是动态API的形式。 点击报表编辑器右侧的操作栏,点击“数据”,选择"数据类型"为“Api数据集”,“Api类型”选择“动态数据”,选择“绑定数据集”,点击“运行”,就可以将数据渲染过来,代码如: ``` 备注: 支持多数据源对比柱形图、堆叠条形图、条形柱状图; { "data": [ { "name": "周一", "value": 1000, "type": "iphone" }, { "name": "周二", "value": 1300, "type": "iphone" }, { "name": "周三", "value": 1400, "type": "iphone" }, { "name": "周四", "value": 1080, "type": "iphone" }, { "name": "周五", "value": 2000, "type": "iphone" }, { "name": "周一", "value": 1300, "type": "huawei" }, { "name": "周二", "value": 1600, "type": "huawei" }, { "name": "周三", "value": 1800, "type": "huawei" }, { "name": "周四", "value": 2000, "type": "huawei" }, { "name": "周五", "value": 3000, "type": "huawei" }, { "name": "周一", "value": 1100, "type": "xiaomi" }, { "name": "周二", "value": 1200, "type": "xiaomi" }, { "name": "周三", "value": 1300, "type": "xiaomi" }, { "name": "周四", "value": 1400, "type": "xiaomi" }, { "name": "周五", "value": 1500, "type": "xiaomi" }, { "name": "周一", "value": 1000, "type": "vivo" }, { "name": "周二", "value": 1000, "type": "vivo" }, { "name": "周三", "value": 1000, "type": "vivo" }, { "name": "周四", "value": 1000, "type": "vivo" }, { "name": "周五", "value": 1000, "type": "vivo" } ] } ``` 备注:代码格式按上边格式写,才可渲染效果; ![](https://img.kancloud.cn/1b/bf/1bbfba63478f906329c3d0c9a730a96f_1385x534.png) ##### **5、特别配置** (1)**堆叠条形图** 和 **堆叠柱形图** 数据源配置 数据源格式跟 **b)** 中一样,需要配置一下系列类型: 点击下图1中的“新增”按钮,弹出系列新增弹窗,如图2;图2中“系列”为我们设置的系列类型,“堆栈类型”可以我们自己设置,目的系列分组,比如图1是将“邮件营销”、“联盟广告”分为一组,“百度”、“谷歌”、“必应”分为一组,“直接访问”自己一组; ![](https://img.kancloud.cn/7c/59/7c59570c988fbf4a69e970ca23d0d1d5_1191x578.png) ![](https://img.kancloud.cn/51/bc/51bc862dced53567552a96e473a93e0f_798x28.png) ![](https://img.kancloud.cn/e5/8e/e58ec1b5ff338c8864087146e3809392_604x319.png) ![](https://img.kancloud.cn/7f/8c/7f8c8d4738a1e978a8bdfd7f75a07662_800x27.png) (2)**条形柱状图** 单数据源配置 **只需要把type值配置成一样的;** ``` { "data": [ { "name": "苹果", "value": 1000879, "type": "vivo" }, { "name": "三星", "value": 3400879, "type": "vivo" }, { "name": "小米", "value": 2300879, "type": "vivo" }, { "name": "oppo", "value": 2400879, "type": "vivo" }, { "name": "大疆", "value": 3000, "type": "vivo" }, { "name": "抖音", "value": 9000, "type": "vivo" } ] } ``` ![](https://img.kancloud.cn/ac/f2/acf20767a1ad6a5b23f0b74c1c93682d_364x481.png) ![](https://img.kancloud.cn/d3/54/d354b05a814e7221000539d77ad7347d_798x28.png) (3)**正负条形图** 数据源配置 正负条形图的数据源格式跟上边一样,需要注意的是:在配置“**系列类型**”的时候,系列类型字段一样的在一行; 如下图1中,将“收入”和“支出”的类型值设置成一样的,就会在同一行; ![](https://img.kancloud.cn/18/e4/18e430f852cdcb1d5ac201532736d85c_1570x588.png) ![](https://img.kancloud.cn/5b/9d/5b9dc0c829c09053890b3a09cfa2799d_804x32.png) ![](https://img.kancloud.cn/f3/0f/f30f7b871d404175202cf293738245f0_632x351.png) ![](https://img.kancloud.cn/df/39/df39ef014dd877887bb662f48bb9414e_649x355.png)