Commit 2749fa409e679605dd9dc5d10b9a4b92409eb8d8

Authored by fengtao
1 parent 419183ab

pref:优化报表导出趋势图样式

1 1 .wrapper {
2   - margin: 60px;
3   - display: grid;
4   - justify-content: space-between;
5   - grid-template-columns: repeat(2, 400px);
6   - grid-gap: 40px;
7   - grid-template-rows: 400px 400px;
  2 + margin: 10px 60px 60px 60px;
8 3 }
9 4
10 5 .inner {
... ...
... ... @@ -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>
... ...