条形图

# 1 功能介绍 条形图是用宽度相同的条形的高度或长短来表示数据多少的图形。用于比较数据，并且直观地展示各个数据的大小。下面将以条形图为例，介绍关于图表控件的一些属性与配置。 # 2 控件对象 `kd.bos.form.chart.BarChart` # 3 视觉展示  # 4 属性说明 ## 4.1 通用属性 >通用属性包含字段和控件的一些公有的属性，如宽高，帮助文本等等。请参考[通用属性](https://vip.kingdee.com/article/215559076720798976) ## 4.2 样式属性 >样式属性是每个控件在设计器右侧样式栏可以设置的属性，请参考[样式属性](https://vip.kingdee.com/article/252017936767406336) ## 4.3 业务属性 | 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | 显示标题 | 复选框 | true | | | 显示图例 | 复选框 | false | | | 图例纵向展示 | 复选框 | false | 控制图例的显示方向为纵向 | ### 4.3.1 图例 **图例** 是指图上的不同颜色所代表的内容和指标的说明  # 5 图表控件接口示例 ## 5.1 业务属性控制 * 插件中声明控件对象 ```java Control _barchart = this.getControl("barchartap"); if (_barchart instanceof BarChart) { BarChart barchart = (BarChart) _barchart; } ``` * 设置是否显示标题 ```java boolean isShowTitle = true; barchart.setShowTitle(isShowTitle); ``` * 设置是否显示图例 ```java boolean isShowLegend = true; barchart.setShowLegend(isShowLegend); ``` * 设置图例纵向展示 ```java boolean isLegendVertical = true; barchart.setLegendVertical(isLegendVertical); ``` ## 5.2 事件监听 ```java @Override public void click(EventObject evt) { super.click(evt); String key = ((Control)evt.getSource()).getKey(); if (key.equals("barchartap")) { ChartClickEvent e = (ChartClickEvent)evt; this.getView().showMessage("SeriesName:" + e.getSeriesName() + "; Name: " + e.getName() + "; Value: " + e.getValue()); } } ``` ## 5.3 高级用法 * 自定义图例（可参照官方示例往`legendData`里添加需要的配置，下同） ```java // 设置两个图例：支出，收入 Map<String, Object> legendData = new HashMap<>(); String[] data = {"支出", "收入"}; legendData.put("data", data); barchart.setLegendPropValue("legend",legendData); // 设置图例位置为中上 barchart.setLegendAlign(XAlign.center, YAlign.top); ``` * 自定义图表标题 ```java Map<String, Object> titlePropValue = new HashMap<>();// 主标题内容：text titlePropValue.put("text", "条形图"); // 副标题内容：subtext titlePropValue.put("subtext", "barchart"); // 点击副标题跳转的超链接：sublink titlePropValue.put("sublink", "https://www.echartsjs.com/examples/zh/index.html#chart-type-bar") barchart.setTitlePropValue("title", titlePropValue) ``` * 自定义提示框组件，包括提示框浮层和坐标指示器 ```java // 设置触发提示框的类型为axis：坐标轴触发 barchart.addToolTip("trigger", "axis"); // 设置指示器配置项为阴影，更多配置参考echarts官网再添加相应的参数即可 Map<String, Object> axisPointType = new HashMap<>(); axisPointType.put("type", "shadow"); barchart.addToolTip("axisPointer", axisPointType); // 设置提示框浮层内容格式器，参数含义可查阅echarts官网，这里不一一列举 // 字符串模板格式 List<Object> toolTipFuncPath = new ArrayList<>(); String formatter = "{b0}: {c0}
{b1}: {c1}" barchart.addToolTip("formatter", formatter); toolTipFuncPath.add("tooltip"); toolTipFuncPath.add("formatter"); barchart.addFuncPath(toolTipFuncPath); // 回调函数模式 List<Object> toolTipFuncPath = new ArrayList<>(); String formatter = "function(param){if(param.dataIndex===0){return 'placeholder0';} if(param.dataIndex==1){return 'placeholder1';}if(param.dataIndex==2){return 'placeholder2'}}"; barchart.addToolTip("formatter", formatter); toolTipFuncPath.add("tooltip"); toolTipFuncPath.add("formatter"); barchart.addFuncPath(toolTipFuncPath); ``` * 配置图表的X轴和Y轴 ```java // 设置X轴的坐标轴名称为日期，类型为category（类目），Y轴的名称为总量，类型为value Axis x = barchart.createXAxis("日期", "category"); Axis y = barchart.createYAxis("总量", "value"); // 设置X轴类目数据（如果没有设置，则需要再series中设置） String[] data = {"周一", "周二", "周三", "周四", "周五", "周六", "周日"}; x.setPropValue("data", data); // 坐标轴刻度标签文字相关设置，格式化刻度标签显示内容 Map<String, Object> data = new HashMap<>(); String dataFormatter = "function (params) {var level = placeholder0;var date