Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
b7998bdf by zhangmeng
Options

大屏初稿

1 parent 787223b9
Expand all
Inline Side-by-side
Showing 5 changed files with 148 additions and 197 deletions
src/layoutPc/index.vue
...@@ -23,7 +23,7 @@ import {AppMain, AppHeader, AppBottom} from './components' ...@@ -23,7 +23,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
23 width: 100vw; 23 width: 100vw;
24 height: 100vh; 24 height: 100vh;
25 min-width: 1000px; 25 min-width: 1000px;
26 //overflow: hidden; 26 overflow: hidden;
27 //background: rgba(0,0,0,0.75) 27 //background: rgba(0,0,0,0.75)
28 background: url("@/assets/image/bg@2x.png") no-repeat top center; 28 background: url("@/assets/image/bg@2x.png") no-repeat top center;
29 background-size: 100% 100%; 29 background-size: 100% 100%;
......
src/viewsPc/vip/leftPage.vue
...@@ -167,8 +167,7 @@ const setA = () => { ...@@ -167,8 +167,7 @@ const setA = () => {
167 center: ['25%', '50%'], 167 center: ['25%', '50%'],
168 radius: '5%', 168 radius: '5%',
169 emphasis: { 169 emphasis: {
170 radius: '5%', 170 scale: false
171 show: false,
172 }, 171 },
173 data: [ 172 data: [
174 {value: 110, name: ''}, 173 {value: 110, name: ''},
...@@ -188,9 +187,10 @@ const setA = () => { ...@@ -188,9 +187,10 @@ const setA = () => {
188 avoidLabelOverlap: false, 187 avoidLabelOverlap: false,
189 label: { 188 label: {
190 show: false, 189 show: false,
191 emphasis: { 190
192 show: false 191 },
193 } 192 emphasis: {
193 scale: false
194 }, 194 },
195 data: [ 195 data: [
196 {value: 12, name: ''}, 196 {value: 12, name: ''},
...@@ -204,6 +204,7 @@ const setA = () => { ...@@ -204,6 +204,7 @@ const setA = () => {
204 avoidLabelOverlap: false, 204 avoidLabelOverlap: false,
205 itemStyle: { 205 itemStyle: {
206 borderWidth: 2, 206 borderWidth: 2,
207 opacity: 0.8,
207 // borderColor: '#fff', 208 // borderColor: '#fff',
208 }, 209 },
209 label: { 210 label: {
......
src/viewsPc/vip/rightPage.vue
1 <template> 1 <template>
2 <div class="pd20"> 2 <div class="pd20">
3 <div class="chartCard"> 3 <div class="chartCard">
4 <div class="title">查档接待情况</div> 4 <div class="title">开票计划与执行</div>
5 <div class="po_right"> 5 <div class="po_right">
6 <el-radio-group v-model="radioA" size="small" @change="radioAChange"> 6 <el-radio-group v-model="radioA" size="small" @change="radioAChange">
7 <el-radio-button label="本月" value="month"/> 7 <el-radio-button label="本月" value="month"/>
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
10 </el-radio-group> 10 </el-radio-group>
11 </div> 11 </div>
12 12
13 <div ref="zhuRef" style="width: 100%; height: 40vh;"></div> 13 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
14 </div> 14 </div>
15 15
16 <div class="chartCard mt30"> 16 <div class="chartCard mt30">
17 <div class="title">档案接收总览</div> 17 <div class="title">回款</div>
18 <div class="po_right"> 18 <div class="po_right">
19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">--> 19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
20 <!-- <el-radio-button label="本月" value="month" />--> 20 <!-- <el-radio-button label="本月" value="month" />-->
...@@ -23,7 +23,11 @@ ...@@ -23,7 +23,11 @@
23 <!-- </el-radio-group>--> 23 <!-- </el-radio-group>-->
24 </div> 24 </div>
25 25
26 <div ref="lineRef" style="width: 100%; height: 40vh;"></div> 26 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
27 </div>
28 <div class="chartCard mt30">
29 <div class="title">逾期360天以上未开票</div>
30 <div ref="overdueRef" style="width: 100%; height: 25vh;"></div>
27 </div> 31 </div>
28 </div> 32 </div>
29 </template> 33 </template>
...@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common" ...@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common"
37 41
38 const zhuRef = ref(null) 42 const zhuRef = ref(null)
39 const lineRef = ref(null) 43 const lineRef = ref(null)
44 const overdueRef = ref(null)
40 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 45 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
41 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 46 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
42 const radioA = ref('month') 47 const radioA = ref('month')
43 const radioB = ref('month')
44 let chartA 48 let chartA
45 let chartB 49 let chartB
50 let chartC
46 let intervalA = null 51 let intervalA = null
47 onMounted(() => { 52 onMounted(() => {
48 // init() 53 // init()
49 window.addEventListener('resize', handleResize); 54 window.addEventListener('resize', handleResize);
55 setA()
56 setB()
57 setC()
50 }) 58 })
51 const init = () => { 59 const init = () => {
52 clear() 60 clear()
...@@ -77,98 +85,51 @@ const getA = () => { ...@@ -77,98 +85,51 @@ const getA = () => {
77 const setA = () => { 85 const setA = () => {
78 chartA = echarts.init(zhuRef.value) 86 chartA = echarts.init(zhuRef.value)
79 const option = { 87 const option = {
80 animation: true,
81 // dataZoom: [
82 // {
83 // show: false,
84 // start: 0,
85 // end: 100
86 // },
87 // {
88 // type: 'inside',
89 // start: 0,
90 // end: 100
91 // }
92 // ],
93 xAxis: [{
94 data: kindList.value,
95 axisLabel: {
96 inside: false,
97 color: '#7ECEF4',
98 fontSize: '1.1rem'
99 },
100 axisTick: {
101 show: false
102 },
103 axisLine: {
104 show: true,
105 lineStyle: {
106 color: 'RGBA(38, 81, 128, 1)'
107 }
108 },
109 z: 10
110 }],
111 yAxis: {
112 name: '单位(次)',
113 nameTextStyle: {
114 color: '#7ECEF4',
115 fontSize: '1.2rem'
116 },
117 axisLine: {
118 show: false
119 },
120 axisTick: {
121 show: false
122 },
123 axisLabel: {
124 color: '#7ECEF4',
125 fontSize: '1.3rem'
126 },
127 splitLine: {
128 show: true,
129 lineStyle: {
130 color: 'RGBA(38, 81, 128, 1)',
131 type: 'dashed'
132 }
133 }
134 },
135 tooltip: { 88 tooltip: {
136 alwaysShowContent: true, 89 trigger: 'axis',
137 formatter: '<div style="font-size: 1.5rem">{c}</div>', 90 axisPointer: {
138 backgroundColor: 'transparent', 91 // Use axis to trigger tooltip
139 borderWidth: 0, 92 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
140 extraCssText: 'box-shadow:none',
141 position: 'top',
142 textStyle: {
143 color: '#fff',
144 fontWeight: 'bold',
145 fontSize: '1.5rem'
146 } 93 }
147 }, 94 },
95 legend: {
96 top: "3%"
97 },
98 grid: {
99 left: '3%',
100 right: '4%',
101 bottom: '3%',
102 containLabel: true
103 },
104 xAxis: {
105 type: 'value'
106 },
107 yAxis: {
108 type: 'category',
109 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
110 },
148 series: [ 111 series: [
149 { 112 {
150 type: 'pictorialBar', 113 name: 'Direct',
151 barGap: '0%', 114 type: 'bar',
152 symbol: 'path://M0,10 L10,10 C8,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', 115 label: {
153 showBackground: false, 116 show: true
154 itemStyle: { 117 },
155 borderWidth: 0, 118 emphasis: {
156 borderColor: '#B8FFF4', 119 focus: 'series'
157 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 120 },
158 {offset: 1, color: 'rgba(184, 255, 244, 0.1)'}, 121 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
159 {offset: 0, color: 'rgba(184, 255, 244, 0.8)'} 122 },
160 ]) 123 {
124 name: 'Direct',
125 type: 'bar',
126 label: {
127 show: true
161 }, 128 },
162 emphasis: { 129 emphasis: {
163 svgPath: 'M0,0 L5,0 L5,5 L0,5 Z', 130 focus: 'series'
164 itemStyle: {
165 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
166 {offset: 1, color: '#2378f7'},
167 {offset: 0, color: '#83bff6'}
168 ])
169 }
170 }, 131 },
171 data: dataA.value 132 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
172 } 133 }
173 ] 134 ]
174 } 135 }
...@@ -192,125 +153,113 @@ const getB = () => { ...@@ -192,125 +153,113 @@ const getB = () => {
192 const setB = () => { 153 const setB = () => {
193 chartB = echarts.init(lineRef.value) 154 chartB = echarts.init(lineRef.value)
194 const option = { 155 const option = {
195 animation: true,
196 grid: {
197 top: '15%',
198 left: '15%',
199 right: '10%',
200 bottom: '12%'
201 },
202 // dataZoom: [
203 // {
204 // show: false,
205 // start: 0,
206 // end: 100
207 // },
208 // {
209 // type: 'inside',
210 // start: 0,
211 // end: 100
212 // }
213 // ],
214 tooltip: { 156 tooltip: {
215 trigger: 'item', 157 trigger: 'axis',
216 formatter: '<div style="font-size: 1.5rem">{c}</div>', 158 axisPointer: {
217 renderModer: 'html', 159 // Use axis to trigger tooltip
218 className: 'downDot', 160 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
219 backgroundColor: 'transparent',
220 borderWidth: 0,
221 extraCssText: 'box-shadow:none',
222 position: 'top',
223 textStyle: {
224 color: '#fff',
225 fontWeight: 'bold',
226 fontSize: '1.5rem'
227 } 161 }
228 }, 162 },
163 legend: {
164 top: "3%"
165 },
166 grid: {
167 left: '3%',
168 right: '4%',
169 bottom: '3%',
170 containLabel: true
171 },
229 xAxis: { 172 xAxis: {
230 type: 'category', 173 type: 'value'
231 boundaryGap: false,
232 data: kindList.value,
233 axisTick: {
234 show: false
235 },
236 axisLabel: {
237 color: '#7ECEF4',
238 fontSize: '1.1rem',
239 interval: 0
240 },
241 axisLine: {
242 show: true,
243 lineStyle: {
244 color: 'RGBA(38, 81, 128, 1)'
245 }
246 },
247 }, 174 },
248 yAxis: { 175 yAxis: {
249 name: '单位(卷/件)', 176 type: 'category',
250 nameTextStyle: { 177 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
251 color: '#7ECEF4',
252 fontSize: '1.2rem'
253 },
254 type: 'value',
255 axisLabel: {
256 fontSize: '1.3rem'
257 },
258 axisLine: {
259 lineStyle: {
260 color: '#03DAFD',
261 }
262 },
263 splitLine: {
264 show: true,
265 lineStyle: {
266 color: 'RGBA(38, 81, 128, 1)',
267 type: 'dashed'
268 }
269 }
270 }, 178 },
271 series: [ 179 series: [
272 { 180 {
273 data: dataA.value, 181 name: 'Direct',
274 type: 'line', 182 type: 'bar',
275 itemStyle: { 183 label: {
276 borderWidth: '0', 184 show: true
277 color: '#3A80D5',
278 }, 185 },
279 emphasis: { 186 emphasis: {
280 itemStyle: { 187 focus: 'series'
281 color: '#fff',
282 borderColor: '#fff',
283 borderWidth: '4',
284 shadowColor: '#fff',
285 shadowBlur: '4',
286 }
287 },
288 label: {
289 show: false,
290 position: 'bottom',
291 formatter: '{c}',
292 fontSize: 12,
293 color: '#03DAFD'
294 }, 188 },
295 areaStyle: { 189 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
296 opacity: 0.8,
297 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
298 {
299 offset: 0,
300 color: 'rgba(128, 255, 165,0.5)'
301 },
302 {
303 offset: 1,
304 color: 'rgba(1, 191, 236,0.5)'
305 }
306 ])
307 }
308 } 190 }
309 ] 191 ]
310 } 192 }
311 chartB.setOption(option) 193 chartB.setOption(option)
312 autoHover(chartB, option, 0, 2000) 194 autoHover(chartB, option, 0, 2000)
313 } 195 }
196 const setC = () => {
197 chartC = echarts.init(overdueRef.value)
198 const option = {
199 tooltip: {
200 trigger: 'axis',
201 axisPointer: {
202 type: 'shadow'
203 }
204 },
205 legend: {
206 top: '10%',
207 textStyle: {
208 color: '#FFF'
209 },
210 },
211 grid: {
212 left: '3%',
213 right: '4%',
214 bottom: '3%',
215 containLabel: true
216 },
217 xAxis: [
218 {
219 type: 'category',
220 stack: 'Ad',
221 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
222 }
223 ],
224 yAxis: [
225 {
226 type: 'value',
227 name: '金额(万元)',
228 }
229 ],
230 series: [
231 {
232 name: '0-180天未开票',
233 type: 'bar',
234 stack: 'Ad',
235 emphasis: {
236 focus: 'series'
237 },
238 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
239 },
240 {
241 name: '180-360天未开票',
242 type: 'bar',
243 stack: 'Ad',
244 emphasis: {
245 focus: 'series'
246 },
247 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
248 },
249 {
250 name: '逾期360天以上',
251 type: 'bar',
252 stack: 'Ad',
253 emphasis: {
254 focus: 'series'
255 },
256 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
257 },
258 ]
259 }
260 chartC.setOption(option)
261 autoHover(chartC, option, 0, 2000)
262 }
314 const radioAChange = (e) => { 263 const radioAChange = (e) => {
315 getA() 264 getA()
316 } 265 }
...@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) { ...@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) {
335 function handleResize() { 284 function handleResize() {
336 chartA?.resize() 285 chartA?.resize()
337 chartB?.resize() 286 chartB?.resize()
287 chartC?.resize()
338 } 288 }
339 289
340 onUnmounted(() => { 290 onUnmounted(() => {
...@@ -386,7 +336,7 @@ onUnmounted(() => { ...@@ -386,7 +336,7 @@ onUnmounted(() => {
386 } 336 }
387 337
388 .chartCard { 338 .chartCard {
389 background: url("@/assets/img/box_bg.png") no-repeat top left; 339 background: url("@/assets/image/box01@2x.png") no-repeat top left;
390 background-size: 100% 100%; 340 background-size: 100% 100%;
391 position: relative; 341 position: relative;
392 overflow: hidden; 342 overflow: hidden;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!