<!-- * @Description: 各话务员总话务量 * @Author: 王晓颖 * @Date: --> <template> <div> <ve-histogram :data="chartData" :grid="grid" :extend="extend" :title="title" :settings="chartSettings"/> </div> </template> <script> export default { name: 'CallTotalBar', props: { data: { type: Array, default: function() { return [] } } }, data() { return { tableOption: { head: { show: false, // 是否需要标题栏, text: '数据列表' // 标题名称 }, options: { needIndex: false // 是否需要序号列 }, toolsOption: { selectColumns: false, // 是否需要筛选列 refresh: false // 是否需要刷新按钮 } }, // 表格属性 size: 'small', extend: { series: { label: { show: true, position: 'top' }, barMaxWidth: 35 // 最大柱宽度 }, yAxis: { max: 10 // y轴最大值 } }, grid: { right: 60 }, title: { text: '' }, chartSettings: { itemStyle: { 'barCategoryGap': 5 }, barWidth: 15, labelMap: { 'seat': '坐席', 'callTotalCount': '总话务量' }, dimension: ['seat'], metrics: ['callTotalCount'] }, chartData: { columns: ['seat', 'callTotalCount'], rows: [] } } }, watch: { data(val) { this.chartData.rows = this.data const maxValue = Math.max.apply(Math, this.data.map(function(item) { return item.caseNum })) if (maxValue < 10) { this.extend.yAxis = { max: 10 } } else { this.extend.yAxis = {} } } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> </style>