Showing
2 changed files
with
41 additions
and
18 deletions
| ... | ... | @@ -9,15 +9,25 @@ |
| 9 | 9 | title="报表趋势图" |
| 10 | 10 | :showOkBtn="false" |
| 11 | 11 | > |
| 12 | - <div class="wrapper"> | |
| 13 | - <div v-if="initChartData.length > 0"> | |
| 14 | - <div class="inner item" v-for="(item, index) in initChartData" :key="index"> | |
| 12 | + <div :class="[initChartData.length % 2 !== 0 ? '' : 'wrapper']"> | |
| 13 | + <div | |
| 14 | + v-if="initChartData.length > 0" | |
| 15 | + :class="[initChartData.length % 2 !== 0 ? '' : 'chart-style']" | |
| 16 | + > | |
| 17 | + <div | |
| 18 | + :class="[ | |
| 19 | + initChartData.length % 2 !== 0 ? '' : 'inner', | |
| 20 | + initChartData.length % 2 !== 0 ? '' : 'item', | |
| 21 | + ]" | |
| 22 | + v-for="(item, index) in initChartData" | |
| 23 | + :key="index" | |
| 24 | + > | |
| 15 | 25 | <p style="display: none">{{ item }}</p> |
| 16 | 26 | <div :id="`chart${index}`" :style="{ height, width }"></div> |
| 17 | 27 | </div> |
| 18 | 28 | </div> |
| 19 | 29 | <div v-else style="display: flex; justify-content: center; align-items: center"> |
| 20 | - <div style="position: relative; left: 13rem; top: 8rem">暂无数据</div> | |
| 30 | + <div style="position: relative; left: 0rem; top: 3rem">暂无数据</div> | |
| 21 | 31 | </div> |
| 22 | 32 | </div> |
| 23 | 33 | </BasicModal> |
| ... | ... | @@ -110,18 +120,19 @@ |
| 110 | 120 | }, |
| 111 | 121 | toolbox: {}, |
| 112 | 122 | grid: { |
| 113 | - left: '3%', | |
| 114 | - right: '4%', | |
| 115 | - bottom: '3%', | |
| 123 | + left: '8%', | |
| 124 | + right: '8%', | |
| 125 | + bottom: '12%', | |
| 116 | 126 | containLabel: true, |
| 117 | 127 | }, |
| 118 | 128 | dataZoom: [ |
| 119 | 129 | { |
| 120 | 130 | type: 'slider', |
| 121 | 131 | show: true, |
| 122 | - start: 0, | |
| 123 | - end: 30, | |
| 124 | - xAxisIndex: [0], | |
| 132 | + startValue: 0, | |
| 133 | + endValue: 5, | |
| 134 | + height: '30', | |
| 135 | + bottom: '4%', | |
| 125 | 136 | }, |
| 126 | 137 | ], |
| 127 | 138 | xAxis: { |
| ... | ... | @@ -130,9 +141,19 @@ |
| 130 | 141 | boundaryGap: false, |
| 131 | 142 | axisPointer: { type: 'shadow' }, |
| 132 | 143 | axisLabel: { |
| 133 | - color: '#333', | |
| 144 | + interval: 0, | |
| 145 | + rotate: 65, | |
| 146 | + textStyle: { | |
| 147 | + color: '#000', | |
| 148 | + fontSize: 10, | |
| 149 | + }, | |
| 150 | + }, | |
| 151 | + axisLine: { | |
| 152 | + show: true, | |
| 134 | 153 | interval: 0, |
| 135 | - rotate: 90, | |
| 154 | + lineStyle: { | |
| 155 | + color: 'RGB(210,221,217)', | |
| 156 | + }, | |
| 136 | 157 | }, |
| 137 | 158 | }, |
| 138 | 159 | yAxis: { |
| ... | ... | @@ -155,4 +176,11 @@ |
| 155 | 176 | </script> |
| 156 | 177 | <style lang="less" scoped> |
| 157 | 178 | @import url('./ReportPreviewModal.less'); |
| 179 | + .chart-style { | |
| 180 | + display: flex; | |
| 181 | + flex-wrap: wrap; | |
| 182 | + width: 825px; | |
| 183 | + margin-top: 10px; | |
| 184 | + justify-content: space-between; | |
| 185 | + } | |
| 158 | 186 | </style> | ... | ... |