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> | ... | ... |