> ## 組件 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 // 最大值 } } ```