> ## 组件 wl-bar-chart 使用文档 &emsp;&emsp;wl-bar-chart 是基于 wl-echarts-plugin 封装的柱状图组件 ``` <wl-bar-chart :dataSource="dataSource" :option="option" :width="width" :height="height"></wl-bar-chart> ``` ### wl-bar-chart props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | dataSource | 柱状图数据源，接口配置 | Object | {} | | option | 柱状图格式配置 | Object | {} | | width | 柱状图宽度 | String | 300px | | height | 柱状图高度 | String | 300px | #### 备注说明 + option 为柱状图格式配置，简化版接收如下参数，title 为柱状图标题，xSetting 为柱状图横轴配置 ``` option: { title: '销量示例', // 标题 xSetting: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // x简化配置 } ``` + dataSource 为柱状图数据源的接口配置，url 为后端地址， params 是参数对象，默认 post 请求。下面是例子。 ``` dataSource: { // 接口配置 url: 'http://localhost:8080/barchart/list', params: { begin: 0, end: 6 } } ``` &emsp;&emsp;接口返回值格式如下所示，data 的键为柱状图的不同图例，值为柱状图内容数据。 ``` { errcode: 200, data: { '销量': [120, 200, 150, 80, 70, 110, 130], '销量1': [20, 100, 100, 180, 170, 10, 30] } } ``` --- + 定制的 option 配置如下所示，详细可以参考 echarts 的配置，传入 xAxis 或 yAxis [echarts 配置文档](https://echarts.apache.org/zh/option.html#xAxis) ``` option: { title: '销量示例', // 标题 color: ['#2EB7BD', '#3CE1D9'], // 每种柱子的颜色 xAxis: { // x轴配置 type: 'category', // 类型 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 横轴 }, // x轴配置 yAxis: { // y轴配置 type: 'value', // 类型 minInterval: 60, // 间隔 min: 0, // 最小值 max: 300 // 最大值 } } ```