| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.getUtilizationRateRankByApi() |
| | | window.addEventListener('resize', this.handleWindowSizeChange) |
| | | }, |
| | | methods: { |
| | |
| | | } |
| | | ] |
| | | const defaultData = [] |
| | | const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value |
| | | const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0 |
| | | let yAxisMax |
| | | if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0,则将背景默认值设置为1 |
| | | else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值,思路为数据最大值最接近的能被5整除的数字 |
| | |
| | | show: false |
| | | } |
| | | }, |
| | | yAxis: [{ |
| | | yAxis: [ |
| | | { |
| | | type: 'category', |
| | | inverse: true, |
| | | triggerEvent: true, |
| | |
| | | show: false |
| | | }, |
| | | data: data.map(item => item.name) |
| | | }, { |
| | | }, |
| | | { |
| | | type: 'category', |
| | | inverse: true, |
| | | axisTick: 'none', |
| | |
| | | } |
| | | }, |
| | | data: data |
| | | }], |
| | | series: [{ |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '利用率', |
| | | type: 'bar', |
| | | zlevel: 1, |
| | | itemStyle: { |
| | | barBorderRadius: 100, |
| | | borderRadius: 100, |
| | | color: function(params) { |
| | | let num = colorArray.length |
| | | return { |
| | |
| | | data: defaultData, |
| | | itemStyle: { |
| | | color: '#11294d', |
| | | barBorderRadius: 100 |
| | | borderRadius: 100 |
| | | } |
| | | } |
| | | ] |
| | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | |
| | | </style> |