大屏调整
Showing
6 changed files
with
29 additions
and
10 deletions
| ... | @@ -59,6 +59,9 @@ export default { | ... | @@ -59,6 +59,9 @@ export default { |
| 59 | initChart () { | 59 | initChart () { |
| 60 | // 初始化echart | 60 | // 初始化echart |
| 61 | this.chart = this.$echarts.init(this.$el, 'tdTheme') | 61 | this.chart = this.$echarts.init(this.$el, 'tdTheme') |
| 62 | function nowSize(val,initWidth=1920){ | ||
| 63 | return val * (nowClientWidth/initWidth); | ||
| 64 | } | ||
| 62 | this.chart.setOption(this.options, true) | 65 | this.chart.setOption(this.options, true) |
| 63 | 66 | ||
| 64 | 67 | ... | ... |
| ... | @@ -35,6 +35,16 @@ export default { | ... | @@ -35,6 +35,16 @@ export default { |
| 35 | } | 35 | } |
| 36 | return rgbaColor; | 36 | return rgbaColor; |
| 37 | }, | 37 | }, |
| 38 | fontSize(res) { | ||
| 39 | let docEl = document.documentElement, | ||
| 40 | clientWidth = | ||
| 41 | window.innerWidth || | ||
| 42 | document.documentElement.clientWidth || | ||
| 43 | document.body.clientWidth; | ||
| 44 | if (!clientWidth) return; | ||
| 45 | let fontSize = clientWidth / 1920; | ||
| 46 | return res * fontSize; | ||
| 47 | } | ||
| 38 | }, | 48 | }, |
| 39 | watch: { | 49 | watch: { |
| 40 | cdata: { | 50 | cdata: { |
| ... | @@ -51,6 +61,7 @@ export default { | ... | @@ -51,6 +61,7 @@ export default { |
| 51 | data: newData.legendItem, | 61 | data: newData.legendItem, |
| 52 | textStyle: { | 62 | textStyle: { |
| 53 | color: "#00DEFF", | 63 | color: "#00DEFF", |
| 64 | fontSize:this.fontSize(12), | ||
| 54 | }, | 65 | }, |
| 55 | }, | 66 | }, |
| 56 | // calculable: true, | 67 | // calculable: true, |
| ... | @@ -97,8 +108,8 @@ export default { | ... | @@ -97,8 +108,8 @@ export default { |
| 97 | textStyle: { | 108 | textStyle: { |
| 98 | color: "rgba(255, 255, 255,0.7)", // x轴颜色 | 109 | color: "rgba(255, 255, 255,0.7)", // x轴颜色 |
| 99 | fontWeight: "normal", | 110 | fontWeight: "normal", |
| 100 | fontSize: "12", | 111 | fontSize: this.fontSize(12), |
| 101 | lineHeight: 22, | 112 | lineHeight: this.fontSize(22), |
| 102 | }, | 113 | }, |
| 103 | }, | 114 | }, |
| 104 | data: this.xAxisData, | 115 | data: this.xAxisData, |
| ... | @@ -136,7 +147,7 @@ export default { | ... | @@ -136,7 +147,7 @@ export default { |
| 136 | smooth: false, //是否平滑 | 147 | smooth: false, //是否平滑 |
| 137 | showSymbol: true, | 148 | showSymbol: true, |
| 138 | symbol: "circle", | 149 | symbol: "circle", |
| 139 | symbolSize: 6, | 150 | symbolSize: this.fontSize(6), |
| 140 | zlevel: 3, | 151 | zlevel: 3, |
| 141 | lineStyle: { | 152 | lineStyle: { |
| 142 | normal: { | 153 | normal: { |
| ... | @@ -154,7 +165,7 @@ export default { | ... | @@ -154,7 +165,7 @@ export default { |
| 154 | smooth: false, | 165 | smooth: false, |
| 155 | showSymbol: true, | 166 | showSymbol: true, |
| 156 | symbol: "circle", | 167 | symbol: "circle", |
| 157 | symbolSize: 8, | 168 | symbolSize: this.fontSize(8), |
| 158 | zlevel: 3, | 169 | zlevel: 3, |
| 159 | lineStyle: { | 170 | lineStyle: { |
| 160 | normal: { | 171 | normal: { |
| ... | @@ -172,7 +183,7 @@ export default { | ... | @@ -172,7 +183,7 @@ export default { |
| 172 | smooth: false, | 183 | smooth: false, |
| 173 | showSymbol: true, | 184 | showSymbol: true, |
| 174 | symbol: "circle", | 185 | symbol: "circle", |
| 175 | symbolSize: 8, | 186 | symbolSize: this.fontSize(8), |
| 176 | zlevel: 3, | 187 | zlevel: 3, |
| 177 | lineStyle: { | 188 | lineStyle: { |
| 178 | normal: { | 189 | normal: { | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <Echart :options="options" id="centreLeft1Chart" :key="key" height="225px" width="80%"></Echart> | 2 | <Echart :options="options" id="centreLeft1Chart" :key="key" height="1.0417rem" width="80%"></Echart> |
| 3 | </template> | 3 | </template> |
| 4 | <script> | 4 | <script> |
| 5 | import Echart from '@/common/echart' | 5 | import Echart from '@/common/echart' |
| ... | @@ -49,7 +49,7 @@ export default { | ... | @@ -49,7 +49,7 @@ export default { |
| 49 | { | 49 | { |
| 50 | name: "业务量", | 50 | name: "业务量", |
| 51 | type: "pie", | 51 | type: "pie", |
| 52 | radius: [0,100], | 52 | radius: [20,100], |
| 53 | roseType: "area", | 53 | roseType: "area", |
| 54 | data: newData.seriesData | 54 | data: newData.seriesData |
| 55 | } | 55 | } |
| ... | @@ -67,7 +67,7 @@ export default { | ... | @@ -67,7 +67,7 @@ export default { |
| 67 | 67 | ||
| 68 | <style lang="scss" scoped> | 68 | <style lang="scss" scoped> |
| 69 | #centreLeft1Chart { | 69 | #centreLeft1Chart { |
| 70 | margin-bottom: 10px; | 70 | margin-bottom: .0521rem; |
| 71 | margin-left: 60px; | 71 | margin-left:60px; |
| 72 | } | 72 | } |
| 73 | </style> | 73 | </style> | ... | ... |
| ... | @@ -20,10 +20,14 @@ export default { | ... | @@ -20,10 +20,14 @@ export default { |
| 20 | }, | 20 | }, |
| 21 | mounted () { | 21 | mounted () { |
| 22 | this.getdjywltotal(); | 22 | this.getdjywltotal(); |
| 23 | window.addEventListener("resize", () => { | ||
| 24 | this.getdjywltotal(); | ||
| 25 | }); | ||
| 23 | }, | 26 | }, |
| 24 | methods: { | 27 | methods: { |
| 25 | // 获取登记业务量玫瑰图数据 | 28 | // 获取登记业务量玫瑰图数据 |
| 26 | async getdjywltotal () { | 29 | async getdjywltotal () { |
| 30 | this.cdata.seriesData=[] | ||
| 27 | try { | 31 | try { |
| 28 | let p = { | 32 | let p = { |
| 29 | DJLX: "", | 33 | DJLX: "", | ... | ... |
| ... | @@ -103,7 +103,7 @@ export default { | ... | @@ -103,7 +103,7 @@ export default { |
| 103 | height: 33%; | 103 | height: 33%; |
| 104 | background: url("~@/image/djywl.png") no-repeat; | 104 | background: url("~@/image/djywl.png") no-repeat; |
| 105 | background-size: 100% 100%; | 105 | background-size: 100% 100%; |
| 106 | padding: .2825rem 0 0 0; | 106 | padding: .3825rem 0 0 0; |
| 107 | } | 107 | } |
| 108 | 108 | ||
| 109 | .card3 { | 109 | .card3 { | ... | ... |
-
Please register or sign in to post a comment