diff --git a/src/views/rent-facility/index.vue b/src/views/rent-facility/index.vue index a6efca45..60a5817b 100644 --- a/src/views/rent-facility/index.vue +++ b/src/views/rent-facility/index.vue @@ -141,9 +141,13 @@ export default { const nameMap = { xianlu: '线路', dianlan: '电缆', biandian: '变电' } return nameMap[name] || name }, - right: '10%' + itemGap: 20, + bottom: 15, // 核心1:改为数值(px),预留图例+间距空间,值越大间距越宽 + left: 'center', + orient: 'horizontal' }, - grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, + // 核心2:调整grid.bottom为15%(字符串格式),释放底部空间,避免圆角被挤压 + grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true }, xAxis: { type: 'category', data: [], @@ -166,9 +170,57 @@ export default { }, yAxis: { type: 'value', axisLabel: { formatter: '{value}' } }, series: [ - { name: 'xianlu', type: 'bar', data: [], itemStyle: { color: '#409EFF' } }, - { name: 'dianlan', type: 'bar', data: [], itemStyle: { color: '#67C23A' } }, - { name: 'biandian', type: 'bar', data: [], itemStyle: { color: '#E6A23C' } } + { + name: 'xianlu', + type: 'bar', + data: [], + barBorderRadius: [10, 10, 0, 0], // 圆角正常生效 + itemStyle: { + color: { + type: 'linear', + x: 0, y: 0, + x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: '#46A8FF' }, + { offset: 1, color: '#7BC2FF' } + ] + } + } + }, + { + name: 'dianlan', + type: 'bar', + data: [], + barBorderRadius: [10, 10, 0, 0], // 圆角正常生效 + itemStyle: { + color: { + type: 'linear', + x: 0, y: 0, + x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: '#5EDDCA' }, + { offset: 1, color: '#32E1C6' } + ] + } + } + }, + { + name: 'biandian', + type: 'bar', + data: [], + barBorderRadius: [10, 10, 0, 0], // 圆角正常生效 + itemStyle: { + color: { + type: 'linear', + x: 0, y: 0, + x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: '#fdbe56' }, + { offset: 1, color: '#FFC468' } + ] + } + } + } ] }, resizeTimer: null, @@ -213,8 +265,8 @@ export default { const chartDom = this.$refs.chartRef if (!chartDom || this.chartInstance) return - const clientWidth = chartDom.clientWidth || 800 - const clientHeight = chartDom.clientHeight || 400 + const clientWidth = chartDom.clientWidth || 600 + const clientHeight = chartDom.clientHeight || 300 if (clientWidth === 0 || clientHeight === 0) { chartDom.style.width = '100%' chartDom.style.height = '450px'