[TOC] **以下为接口设置:** 选中该柱形图组件,在操作界面右侧,点击“![](https://img.kancloud.cn/49/06/4906ead2d133a7cfb9e739053c2d5930_389x49.png)”,可设置接口,如图2.199。 **备注:这里配置的都是最简单的柱形图样式,如果你想配置复杂的,请加官方交流群(群号码:769925425)咨询。** ### **1. 数据类型** 数据类型分为静态数据和动态数据; * 静态数据:写死的数据; * 动态数据:会随着接口传过来的数据实时变化;(一般这种比较常用) ### **2. 接口地址** * categories:X轴参数; * series:柱形内容;内部 name为柱形名称,data为柱形相对应Y轴的值; (1)静态数据,接口地址传过来的内容要符合以下格式: ``` a ) 两个柱形图接口格式: {"categories":["苹果","三星","小米","oppo","vivo"],"series":[{"name":"手机品牌","data":[1000879,3400879,2300879,5400879,3400879]},{"name":"手机品牌销售","data":[100087,340087,230087,540087,340087]}]} b)一个柱形图接口格式: {"categories":["苹果","三星","小米","oppo","vivo"],"series":[{"name":"手机品牌","data":[1000879,3400879,2300879,5400879,3400879]}]} ``` (2)动态数据,接口地址传过来的内容要符合以下格式: ``` a ) 两个柱形图接口格式如下,效果图如图2.1991; {"data":{"categories":["苹果","三星","小米","oppo","vivo"],"series":[{"name":"手机品牌","data":[1000879,3400879,2300879,5400879,3400879]},{"name":"手机品牌销售","data":[100087,340087,230087,540087,340087]}]}} b)一个柱形图接口格式如下,效果图如图2.1992; {"data":{"categories":["苹果","三星","小米","oppo","vivo"],"series":[{"name":"手机品牌","data":[1000879,3400879,2300879,5400879,3400879]}]}} ``` ### **3. 刷新时间** 这个参数主要针对动态数据设置的,完成数据的实时更新。 * 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### **4. 刷新数据** 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/fb/af/fbaf8c3b14a7a202689711804f5959b0_415x602.png) ![](https://img.kancloud.cn/61/e7/61e7bab5645b9531a0b3f865cdda8dd0_795x38.png) ![](https://img.kancloud.cn/41/22/4122cb9c304311428faaa95683cd8670_922x340.png) ### **5. 接口参数** 暂时未用到; ### **6. 数据处理** 这个参数用于处理图表中的数据,比如:你在不方便修改接口的时候,想修改一下图表中的某一个或某几个数据,可在这里边修改。 ![](https://img.kancloud.cn/1e/34/1e34b9f42e6f9bdf8bc27c2b4c57dc00_971x449.png) ![](https://img.kancloud.cn/4f/e9/4fe900c6cf38ec6551bf8702d601a615_804x23.png) * 查看数据格式: 点击数据“数据处理”的编辑按钮,输入“console.log('======>',option)”,如图2.1993操作;再点击“确定”按钮,再点击“刷新”,打开调试模式,就可看到数据格式和数据内容,可根据自己需求修改,如图2.1994; ![](https://img.kancloud.cn/ce/ba/ceba59aa05adce5c0ccd2d68de33da89_1334x557.png) ![](https://img.kancloud.cn/b9/11/b9111ab5689915a90d379ac5d30c61e5_797x25.png) ![](https://img.kancloud.cn/4f/e9/4fe900c6cf38ec6551bf8702d601a615_804x23.png) ![](https://img.kancloud.cn/a4/26/a426d1639dd7adf5ccad36ae6f9fd2f4_1138x796.png) ![](https://img.kancloud.cn/ee/3b/ee3bf7d8cbea61717bbe1a8aeb1d1a05_806x33.png) ![](https://img.kancloud.cn/4f/e9/4fe900c6cf38ec6551bf8702d601a615_804x23.png) * 修改格式如下: ``` option=>{ option.categories=["苹果1","三星1","小米1","oppo1","vivo1"] return option } ``` ![](https://img.kancloud.cn/4f/e9/4fe900c6cf38ec6551bf8702d601a615_804x23.png) ### **7.通用处理** 这个参数用于处理图表中的样式,比如:你在不方便修改的样式或样式配置中没有,可在这里边修改。 ![](https://img.kancloud.cn/06/db/06db03ddd5908fbde7c1f28e7356c8bc_990x488.png) ![](https://img.kancloud.cn/4f/e9/4fe900c6cf38ec6551bf8702d601a615_804x23.png) * 查看数据格式: 点击数据“通用处理”的编辑按钮,输入“console.log('======>',option)”,如图2.1995操作;再点击“确定”按钮,再点击“刷新”,打开调试模式,就可看到数据格式和数据内容,可根据自己需求修改,如图2.1996; ![](https://img.kancloud.cn/11/b3/11b312dd7d242fbdc30a3688345c060e_1343x614.png) ![](https://img.kancloud.cn/c0/ff/c0ffe1bdab2359e73f78aa1f15b3039c_806x31.png) ![](https://img.kancloud.cn/4f/e9/4fe900c6cf38ec6551bf8702d601a615_804x23.png) ![](https://img.kancloud.cn/07/e2/07e245504a72d7db9932d6d62662c060_1150x789.png) ![](https://img.kancloud.cn/f5/30/f53093a5f96b49bcc1509ba0b4fc894e_803x27.png) * 修改格式如下: ``` option=>{ option.title={ "show": false, "text": "销售", "left": "left", "textStyle": { "fontSize": 18, "fontWeight": "bolder", "color": "#c23531" } } return option } ``` ![](https://img.kancloud.cn/4f/e9/4fe900c6cf38ec6551bf8702d601a615_804x23.png) ### **8.提示事件** 提示事件是通过代码修改提示语的,比如修改提示语的样式或内容; 比如你可以在提示事件中输入下边代码,页面样式如下图: ``` option =>{ return 111 } ``` ![](https://img.kancloud.cn/e9/db/e9db96917b6a65f4febb2b0d71e25506_566x344.png) ![](https://img.kancloud.cn/40/bb/40bb20d476c0743a41df4be2092d9595_800x22.png) ### **9.标题事件** 标题事件是通过代码修改数值显示的; 比如你可以在标题事件中输入下边代码,页面样式如下图: ``` option =>{ return 111 } ``` ![](https://img.kancloud.cn/73/0e/730e4018ba66ad742ab4cf8617c93f33_533x303.png) ![](https://img.kancloud.cn/40/bb/40bb20d476c0743a41df4be2092d9595_800x22.png)