Skip to content

杨炀 / dangan_dataV

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

大屏

1 parent 174aa61b
Inline Side-by-side
Showing 2 changed files with 276 additions and 34 deletions
src/viewsPc/vip/centerPage.vue
...@@ -685,7 +685,9 @@ const handelZhu3 = () => { ...@@ -685,7 +685,9 @@ const handelZhu3 = () => {
685 }, 685 },
686 toolbox: { 686 toolbox: {
687 feature: { 687 feature: {
688 saveAsImage: {} 688 saveAsImage: {
689 show: false
690 }
689 } 691 }
690 }, 692 },
691 grid: { 693 grid: {
...@@ -1081,4 +1083,9 @@ function autoHover(myChart, option, index, time) { ...@@ -1081,4 +1083,9 @@ function autoHover(myChart, option, index, time) {
1081 } 1083 }
1082 } 1084 }
1083 1085
1086 hr {
1087 border: 0;
1088 border-top: 1px solid #373e51;
1089 }
1090
1084 </style> 1091 </style>
......
src/viewsPc/vip/rightPage.vue
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
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"/>-->
8 <el-radio-button label="本季度" value="quarter"/> 8 <!-- <el-radio-button label="本季度" value="quarter"/>-->
9 <el-radio-button label="本年" value="year"/> 9 <!-- <el-radio-button label="本年" value="year"/>-->
10 </el-radio-group> 10 <!-- </el-radio-group>-->
11 </div> 11 <!-- </div>-->
12 12
13 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div> 13 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
14 </div> 14 </div>
...@@ -88,48 +88,93 @@ const setA = () => { ...@@ -88,48 +88,93 @@ const setA = () => {
88 tooltip: { 88 tooltip: {
89 trigger: 'axis', 89 trigger: 'axis',
90 axisPointer: { 90 axisPointer: {
91 // Use axis to trigger tooltip
92 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' 91 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
93 } 92 }
94 }, 93 },
95 legend: { 94 legend: {
96 top: "3%" 95 top: "3%",
96 textStyle: {
97 color: '#FFF'
98 },
97 }, 99 },
98 grid: { 100 grid: {
101 top: "30",
99 left: '3%', 102 left: '3%',
100 right: '4%', 103 right: '4%',
101 bottom: '3%', 104 bottom: '3%',
102 containLabel: true 105 containLabel: true
103 }, 106 },
104 xAxis: { 107 xAxis: {
105 type: 'value' 108 type: 'value',
109 axisLine: {
110 show: true,
111 lineStyle: {
112 color: '#fff',
113 width: 2,
114 type: 'solid'
115 }
116 },
106 }, 117 },
107 yAxis: { 118 yAxis: {
108 type: 'category', 119 type: 'category',
109 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'] 120 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
121 axisLine: {
122 show: true,
123 lineStyle: {
124 color: 'rgba(255, 255, 255, 1)',
125 width: 1,
126 type: 'solid'
127 }
128 },
110 }, 129 },
111 series: [ 130 series: [
112 { 131 {
113 name: 'Direct', 132 name: '计划金额',
114 type: 'bar', 133 type: 'bar',
134 barGap: 0,
115 label: { 135 label: {
116 show: true 136 show: false
117 }, 137 },
118 emphasis: { 138 emphasis: {
119 focus: 'series' 139 focus: 'series'
120 }, 140 },
121 data: [320, 302, 301, 334, 390, 330, 320, 330, 320] 141 data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
142 itemStyle: {
143 color: {
144 type: 'linear',
145 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
146 colorStops: [
147 {offset: 0, color: 'rgba(0, 162, 255, .5)'}, // 顶部颜色
148 {offset: 1, color: 'rgba(34, 117, 255, .5)'} // 底部颜色
149 ],
150 },
151 borderColor: 'rgba(0, 246, 255, 1)',
152 // borderWidth: 1
153 },
154 // barWidth: '30%'
122 }, 155 },
123 { 156 {
124 name: 'Direct', 157 name: '执行金额',
125 type: 'bar', 158 type: 'bar',
126 label: { 159 label: {
127 show: true 160 show: false
128 }, 161 },
129 emphasis: { 162 emphasis: {
130 focus: 'series' 163 focus: 'series'
131 }, 164 },
132 data: [320, 302, 301, 334, 390, 330, 320, 330, 320] 165 data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
166 itemStyle: {
167 color: {
168 type: 'linear',
169 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
170 colorStops: [
171 {offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
172 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
173 ],
174 },
175 borderColor: 'rgba(0, 246, 255, 1)',
176 borderWidth: 1
177 },
133 } 178 }
134 ] 179 ]
135 } 180 }
...@@ -160,33 +205,169 @@ const setB = () => { ...@@ -160,33 +205,169 @@ const setB = () => {
160 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' 205 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
161 } 206 }
162 }, 207 },
163 legend: {
164 top: "3%"
165 },
166 grid: { 208 grid: {
209 top: "15%",
167 left: '3%', 210 left: '3%',
168 right: '4%', 211 right: '4%',
169 bottom: '3%', 212 bottom: '3%',
170 containLabel: true 213 containLabel: true
171 }, 214 },
172 xAxis: { 215 xAxis: {
173 type: 'value' 216 type: 'value',
217 axisLine: {
218 show: true,
219 lineStyle: {
220 color: '#fff',
221 width: 1,
222 type: 'solid'
223 }
224 },
174 }, 225 },
175 yAxis: { 226 yAxis: {
176 type: 'category', 227 type: 'category',
177 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'] 228 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
229 axisLine: {
230 show: true,
231 lineStyle: {
232 color: '#fff',
233 width: 2,
234 type: 'solid'
235 }
236 },
178 }, 237 },
179 series: [ 238 series: [
180 { 239 {
181 name: 'Direct', 240 name: 'Direct',
182 type: 'bar', 241 type: 'bar',
183 label: { 242 label: {
184 show: true 243 show: false
244 },
245 itemStyle: {
246 // 设置柱状图顶部圆角（半圆形）
247 borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
185 }, 248 },
186 emphasis: { 249 emphasis: {
187 focus: 'series' 250 focus: 'series'
188 }, 251 },
189 data: [320, 302, 301, 334, 390, 330, 320, 330, 320] 252 data: [
253 {
254 value: 320,
255 itemStyle: {
256 color: {
257 type: 'linear',
258 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
259 colorStops: [
260 {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
261 {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
262 ],
263 },
264 }
265 },
266 {
267 value: 302,
268 itemStyle: {
269 color: {
270 type: 'linear',
271 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
272 colorStops: [
273 {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
274 {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
275 ],
276 },
277 }
278 },
279 {
280 value: 301,
281 itemStyle: {
282 color: {
283 type: 'linear',
284 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
285 colorStops: [
286 {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
287 {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
288 ],
289 },
290 }
291 },
292 {
293 value: 334,
294 itemStyle: {
295 color: {
296 type: 'linear',
297 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
298 colorStops: [
299 {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
300 {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
301 ],
302 },
303 }
304 },
305 {
306 value: 390,
307 itemStyle: {
308 color: {
309 type: 'linear',
310 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
311 colorStops: [
312 {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
313 {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
314 ],
315 },
316 }
317 },
318 {
319 value: 330,
320 itemStyle: {
321 color: {
322 type: 'linear',
323 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
324 colorStops: [
325 {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
326 {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
327 ],
328 },
329 }
330 },
331 {
332 value: 320,
333 itemStyle: {
334 color: {
335 type: 'linear',
336 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
337 colorStops: [
338 {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
339 {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
340 ],
341 },
342 }
343 },
344 {
345 value: 330,
346 itemStyle: {
347 color: {
348 type: 'linear',
349 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
350 colorStops: [
351 {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
352 {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
353 ],
354 },
355 }
356 },
357 {
358 value: 320,
359 itemStyle: {
360 color: {
361 type: 'linear',
362 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
363 colorStops: [
364 {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
365 {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
366 ],
367 },
368 }
369 }
370 ]
190 } 371 }
191 ] 372 ]
192 } 373 }
...@@ -218,13 +399,33 @@ const setC = () => { ...@@ -218,13 +399,33 @@ const setC = () => {
218 { 399 {
219 type: 'category', 400 type: 'category',
220 stack: 'Ad', 401 stack: 'Ad',
221 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] 402 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
403 axisLine: {
404 show: true,
405 lineStyle: {
406 color: '#fff',
407 width: 2,
408 type: 'solid'
409 }
410 },
222 } 411 }
223 ], 412 ],
224 yAxis: [ 413 yAxis: [
225 { 414 {
226 type: 'value', 415 type: 'value',
227 name: '金额(万元)', 416 name: '金额(万元)',
417 show: false, // 完全隐藏 Y 轴
418 axisTick: {show: false},
419 axisLabel: {show: false},
420 splitLine: {show: false},
421 axisLine: {
422 show: false,
423 lineStyle: {
424 color: '#fff',
425 width: 2,
426 type: 'solid'
427 }
428 },
228 } 429 }
229 ], 430 ],
230 series: [ 431 series: [
...@@ -235,7 +436,18 @@ const setC = () => { ...@@ -235,7 +436,18 @@ const setC = () => {
235 emphasis: { 436 emphasis: {
236 focus: 'series' 437 focus: 'series'
237 }, 438 },
238 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390] 439 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
440 itemStyle: {
441 color: {
442 type: 'linear',
443 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
444 colorStops: [
445 {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
446 {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
447 ],
448 },
449 },
450 barWidth: '30%'
239 }, 451 },
240 { 452 {
241 name: '180-360天未开票', 453 name: '180-360天未开票',
...@@ -244,7 +456,18 @@ const setC = () => { ...@@ -244,7 +456,18 @@ const setC = () => {
244 emphasis: { 456 emphasis: {
245 focus: 'series' 457 focus: 'series'
246 }, 458 },
247 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210] 459 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
460 itemStyle: {
461 color: {
462 type: 'linear',
463 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
464 colorStops: [
465 {offset: 0, color: 'rgba(82, 72, 228, 1)'}, // 顶部颜色
466 {offset: 1, color: 'rgba(148, 140, 252, 1)'} // 底部颜色
467 ],
468 },
469 },
470 barWidth: '30%'
248 }, 471 },
249 { 472 {
250 name: '逾期360天以上', 473 name: '逾期360天以上',
...@@ -253,7 +476,18 @@ const setC = () => { ...@@ -253,7 +476,18 @@ const setC = () => {
253 emphasis: { 476 emphasis: {
254 focus: 'series' 477 focus: 'series'
255 }, 478 },
256 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,] 479 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
480 itemStyle: {
481 color: {
482 type: 'linear',
483 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
484 colorStops: [
485 {offset: 0, color: 'rgba(254, 151, 198, 1)'}, // 顶部颜色
486 {offset: 1, color: 'rgba(176, 72, 119, 1)'} // 底部颜色
487 ],
488 },
489 },
490 barWidth: '30%'
257 }, 491 },
258 ] 492 ]
259 } 493 }
...@@ -301,14 +535,15 @@ onUnmounted(() => { ...@@ -301,14 +535,15 @@ onUnmounted(() => {
301 } 535 }
302 536
303 .title { 537 .title {
304 padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0; 538 font-family: PingFang SC, serif;
305 font-family: 'YouSheBiaoTiHei'; 539 font-weight: 600;
306 color: #FFFFFF; 540 color: #FFFFFF;
307 //text-shadow: 0px 4px 3px #003F85; 541 text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
308 background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%); 542 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
309 -webkit-background-clip: text; 543 -webkit-background-clip: text;
310 font-size: calc(17 * 100vw / 1920);
311 -webkit-text-fill-color: transparent; 544 -webkit-text-fill-color: transparent;
545 padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
546 font-size: calc(20 * 100vw / 1920);
312 position: relative; 547 position: relative;
313 548
314 &::after { 549 &::after {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!