Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
6a8890c2 by zrj
Options

daping quan

1 parent 5a091cb6
Inline Side-by-side
Showing 6 changed files with 2092 additions and 841 deletions
src/viewsPc/home.vue
1 <template> 1 <template>
2 <div class="main"> 2 <div class="main">
3 <!-- <div style="position: absolute;top: 23px;right: 20px">-->
4 <!-- <el-date-picker-->
5 <!-- v-model="nowDate"-->
6 <!-- type="date"-->
7 <!-- placeholder="Pick a day"-->
8 <!-- :size="size"-->
9 <!-- ></el-date-picker>-->
10 <!-- </div>-->
3 <el-row class="w100"> 11 <el-row class="w100">
4 <el-col v-if="obj.IFBASE" :span="8"> 12 <el-col v-if="obj.IFBASE" :span="8">
5 <left-page :obj="obj" :type="type" :url="result"/> 13 <left-page :obj="obj" :type="type=='否'" :url="result"/>
6 </el-col> 14 </el-col>
7 <el-col v-if="obj.IFBASE" :span="8"> 15 <el-col v-if="obj.IFBASE" :span="8">
8 <center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/> 16 <center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/>
9 </el-col> 17 </el-col>
10 <el-col v-if="obj.IFBASE" :span="8"> 18 <el-col v-if="obj.IFBASE" :span="8">
11 <right-page :obj="obj" :type="type" :url="result"/> 19 <right-page :obj="obj" :type="type=='否'" :url="result"/>
12 </el-col> 20 </el-col>
13 </el-row> 21 </el-row>
14 </div> 22 </div>
...@@ -28,9 +36,10 @@ const url = ref() ...@@ -28,9 +36,10 @@ const url = ref()
28 const obj = ref({}) 36 const obj = ref({})
29 const result = ref() 37 const result = ref()
30 const router = useRouter() 38 const router = useRouter()
39 const nowDate = new Date()
31 let isLeader = ref(false) 40 let isLeader = ref(false)
32 url.value = 'http://192.168.1.152:8899/login/sid=3e6ac454-6d9a-4f37-a593-d06c65703792#/' 41 // url.value = 'http://192.168.1.152:8899/login/sid=a5d48b77-0da4-4008-aa1c-f7f0ed575413#/'
33 // url.value = window.location.href 42 url.value = window.location.href
34 result.value = url.value?.split('=')[1]?.split('#')[0]; 43 result.value = url.value?.split('=')[1]?.split('#')[0];
35 44
36 function validateEmail(email) { 45 function validateEmail(email) {
...@@ -44,6 +53,7 @@ onMounted(() => { ...@@ -44,6 +53,7 @@ onMounted(() => {
44 if (result.value) { 53 if (result.value) {
45 handelGetYS000() 54 handelGetYS000()
46 isLeader.value = validateEmail(result.value) 55 isLeader.value = validateEmail(result.value)
56 console.log(isLeader.value)
47 } else { 57 } else {
48 // result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704' 58 // result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704'
49 // handelGetYS000() 59 // handelGetYS000()
...@@ -62,4 +72,25 @@ async function handelGetYS000() { ...@@ -62,4 +72,25 @@ async function handelGetYS000() {
62 </script> 72 </script>
63 73
64 <style lang="scss" scoped> 74 <style lang="scss" scoped>
75 ::v-deep .el-date-editor .el-input__inner {
76 background-color: transparent !important;
77 border-color: #80ffff;
78 box-shadow: none;
79 height: 30px;
80 color: #fff;
81 }
82 ::v-deep .el-input__wrapper {
83 background: transparent;
84 border: none;
85 box-shadow: none;
86 }
87 /* 隐藏默认图标 */
88 ::v-deep .el-date-editor .el-input__prefix {
89 display: none;
90 }
91
92 /* 强制右侧显示图标 */
93 ::v-deep .el-date-editor .el-input__suffix {
94 right: 10px !important;
95 }
65 </style> 96 </style>
......
src/viewsPc/vip/centerPage.vue
1 <template> 1 <template>
2 <div class="center"> 2 <div class="center">
3 <div ref="textRef" class="top"> 3 <div ref="textRef" class="top">
4 <div class="left"> 4 <div class="left" v-if="myType">
5 <div class="titleTop">董事会得分</div> 5 <div class="titleTop">董事会得分</div>
6 <div class="titleCenter heiti">预计得分 <span class="tex1">{{ form?.YJSCORE }}</span></div> 6 <div class="titleCenter heiti">预计得分 <span class="tex1">{{ form?.YJSCORE }}</span></div>
7 <div class="titleCenter heiti">标准得分 <span class="tex2">{{ form?.STANDARDSCORE }}</span> 7 <div class="titleCenter heiti">标准得分 <span class="tex2">{{ form?.STANDARDSCORE }}</span>
8 </div> 8 </div>
9 </div> 9 </div>
10 <div class="right"> 10 <div class="right" :style="{width:myType?'calc(480 * 100vw / 1920)':'calc(640 * 100vw / 1920)'}">
11 <div class="rTop"> 11 <div class="rTop">
12 <div style="font-family: SimHei, serif;">领导重点关注</div> 12 <div style="font-family: SimHei, serif;">领导重点关注</div>
13 <div @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div> 13 <div @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
...@@ -26,15 +26,15 @@ ...@@ -26,15 +26,15 @@
26 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span> 26 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
27 营业收入 27 营业收入
28 </div> 28 </div>
29 <div ref="bing1" style="width: 100%;height:13.3vh;"> 29 <div ref="bing1" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}">
30 </div> 30 </div>
31 <!-- <div class="bingBottom heiti">--> 31 <!-- <div class="bingBottom heiti">-->
32 <!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>--> 32 <!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>-->
33 <!-- </div>--> 33 <!-- </div>-->
34 </div> 34 </div>
35 <div ref="zhuRef1" class="zhu" style="width:70%;height: 17.3vh"/> 35 <div ref="zhuRef1" class="zhu" style="width:70%" :style="{height:myType?'calc(19vh + 1vw - 43px)':'calc(20.5vh + 1vw + 6px)'}"/>
36 </div> 36 </div>
37 37
38 <hr> 38 <hr>
39 </div> 39 </div>
40 <div class="father"> 40 <div class="father">
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 <span><img alt="" class="titleImg heiti" src="@/assets/image/title_bg.png"></span> 44 <span><img alt="" class="titleImg heiti" src="@/assets/image/title_bg.png"></span>
45 应收余额 45 应收余额
46 </div> 46 </div>
47 <div ref="bing2" style="width: 100%;height:13.3vh;"> 47 <div ref="bing2" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}">
48 </div> 48 </div>
49 <!-- <div class="bingBottom">--> 49 <!-- <div class="bingBottom">-->
50 <!-- <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>--> 50 <!-- <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>-->
...@@ -52,19 +52,19 @@ ...@@ -52,19 +52,19 @@
52 <!-- </div>--> 52 <!-- </div>-->
53 <!-- </div>--> 53 <!-- </div>-->
54 </div> 54 </div>
55 <div ref="zhuRef2" class="zhu" style="width:70%;height: 17.3vh"/> 55 <div ref="zhuRef2" class="zhu" style="width:70%" :style="{height:myType?'calc(19vh + 1vw - 43px)':'calc(20.5vh + 1vw + 6px)'}"/>
56 </div> 56 </div>
57 57
58 <hr> 58 <hr>
59 </div> 59 </div>
60 <div class="father"> 60 <div class="father" v-if="myType">
61 <div style="display: flex"> 61 <div style="display: flex">
62 <div class="bing" style="width: 30%"> 62 <div class="bing" style="width: 30%">
63 <div class="bingTitle heiti"> 63 <div class="bingTitle heiti">
64 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span> 64 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
65 现金余额 65 现金余额
66 </div> 66 </div>
67 <div class="bingImg" style="width: 100%;height:13.3vh;">{{bing_number3}}</div> 67 <div class="bingImg" style="width: 100%;height:13.3vh;position: relative"><span style="position: absolute;top:50%;left:0;width: 100%">{{bing_number3}}</span></div>
68 <!-- <div ref="bing3" style="width: 100%;height:13.3vh;">--> 68 <!-- <div ref="bing3" style="width: 100%;height:13.3vh;">-->
69 <!-- </div>--> 69 <!-- </div>-->
70 <!-- <div class="bingBottom">--> 70 <!-- <div class="bingBottom">-->
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
72 <!-- </div>--> 72 <!-- </div>-->
73 <!-- </div>--> 73 <!-- </div>-->
74 </div> 74 </div>
75 <div ref="zhuRef3" class="zhu" style="width:70%;height: 17.3vh"/> 75 <div ref="zhuRef3" class="zhu" style="width:70%;height: calc(19vh + 1vw - 43px)"/>
76 </div> 76 </div>
77 <hr> 77 <hr>
78 </div> 78 </div>
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
82 <span class="heiti">DSO天数</span> 82 <span class="heiti">DSO天数</span>
83 <span class="dsotext heiti">&nbsp;{{ dso }}</span> 83 <span class="dsotext heiti">&nbsp;{{ dso }}</span>
84 </div> 84 </div>
85 <div ref="zhuRef4" style="width: 100%;height: 17.3vh"> 85 <div ref="zhuRef4" style="width: 100%" :style="{height:myType?'calc(16vh + 1vw - 1px)':'calc(20.5vh + 1vw + 6px)'}">
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
...@@ -129,6 +129,7 @@ const props = defineProps({ ...@@ -129,6 +129,7 @@ const props = defineProps({
129 const url = computed(() => props.url) 129 const url = computed(() => props.url)
130 const obj = computed(() => props.obj) 130 const obj = computed(() => props.obj)
131 const isLeader = computed(() => props.isLeader) 131 const isLeader = computed(() => props.isLeader)
132 const myType = computed(() => props.type)
132 const zhuRef1 = ref(null) 133 const zhuRef1 = ref(null)
133 const zhuRef2 = ref(null) 134 const zhuRef2 = ref(null)
134 const zhuRef3 = ref(null) 135 const zhuRef3 = ref(null)
...@@ -166,12 +167,10 @@ let total = 0 ...@@ -166,12 +167,10 @@ let total = 0
166 let intervalA = null 167 let intervalA = null
167 168
168 onMounted(async () => { 169 onMounted(async () => {
169 if (props.type) { 170 if (url.value) {
170 if (url.value) { 171 init()
171 init()
172 }
173 window.addEventListener('resize', handleResize);
174 } 172 }
173 window.addEventListener('resize', handleResize);
175 // handelBing1() 174 // handelBing1()
176 // handelZhu1() 175 // handelZhu1()
177 // handelGetYS001() 176 // handelGetYS001()
...@@ -217,26 +216,30 @@ async function handelGetYS002() { ...@@ -217,26 +216,30 @@ async function handelGetYS002() {
217 216
218 async function handelGetYS003() { 217 async function handelGetYS003() {
219 const res = await getYS003(url.value, obj.value) 218 const res = await getYS003(url.value, obj.value)
220 resYear3.value = res.data.yeargroup 219 if (res.data) {
221 let obj1 = res.data.yeargroup[0] 220 resYear3.value = res.data.yeargroup
222 let obj2 = res.data.yeargroup[1] 221 let obj1 = res.data.yeargroup[0]
223 // for (let v of obj1.list) { 222 let obj2 = res.data.yeargroup[1]
224 // if (v.XJCOST == 0) v.XJCOST = null 223 // for (let v of obj1.list) {
225 // } 224 // if (v.XJCOST == 0) v.XJCOST = null
226 obj1.list = obj1.list.filter(v => v.XJCOST != 0) 225 // }
226 obj1.list = obj1.list.filter(v => v.XJCOST != 0)
227 227
228 bing_number3.value = toDieThousands((res.data.yeargroup[0].TOTAL / 10000).toFixed() || 0) 228 bing_number3.value = toDieThousands((res.data.yeargroup[0].TOTAL / 10000).toFixed() || 0)
229 229
230 // handelBing3(obj1, obj2) 230 // handelBing3(obj1, obj2)
231 handelZhu3(obj1, obj2) 231 handelZhu3(obj1, obj2)
232 232
233 233
234 activeName3.value = res.data.yeargroup[1].YEAR 234 activeName3.value = res.data.yeargroup[1].YEAR
235 }
235 } 236 }
236 237
238 let nowYearString = new Date().getFullYear()
237 async function handelGetYS004() { 239 async function handelGetYS004() {
238 const res = await getYS004(url.value, obj.value) 240 const res = await getYS004(url.value, obj.value)
239 let arrList = res.data.blockgroup || [] 241 let arrList = res.data.blockgroup || []
242 dso.value = res.data.DSOTOTAL || 0
240 // let arrList = [ 243 // let arrList = [
241 // { 244 // {
242 // BLOCK: '海上', 245 // BLOCK: '海上',
...@@ -279,79 +282,156 @@ async function handelGetYS004() { ...@@ -279,79 +282,156 @@ async function handelGetYS004() {
279 // ] 282 // ]
280 // } 283 // }
281 // ] 284 // ]
282 let haishang 285 if (myType.value) {
283 let dalu 286 let haishang
284 dso.value = res.data.DSOTOTAL || 0 287 let dalu
285 for (const v of arrList) { 288
286 if (v.BLOCK === '海上') { 289 for (const v of arrList) {
287 haishang = v 290 if (v.BLOCK === '海上') {
288 } else { 291 haishang = v
289 dalu = v 292 } else {
293 dalu = v
294 }
290 } 295 }
291 } 296 let haishangArr = haishang.list.map(v => ({
292 let haishangArr = haishang.list.map(v => ({ 297 ...v,
293 ...v, 298 type: 1
294 type: 1 299 })).sort((v1, v2) => v2.DSO - v1.DSO)
295 })).sort((v1, v2) => v2.DSO - v1.DSO) 300 let daluArr = dalu.list.map(v => ({
296 let daluArr = dalu.list.map(v => ({ 301 ...v,
297 ...v, 302 type: 2
298 type: 2 303 })).sort((v1, v2) => v2.DSO - v1.DSO)
299 })).sort((v1, v2) => v2.DSO - v1.DSO) 304
300 305 let arr = [...haishangArr, ...daluArr]
301 let arr = [...haishangArr, ...daluArr] 306 let listX = arr.map(v => v.BASEJC)
302 let listX = arr.map(v => v.BASEJC) 307
303 308 let styleItem1 = {
304 let styleItem1 = { 309 color: {
305 color: { 310 type: 'linear',
306 type: 'linear', 311 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
307 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 312 colorStops: [
308 colorStops: [ 313 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
309 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色 314 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
310 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色 315 ]
311 ] 316 },
312 }, 317 borderColor: 'rgba(0, 255, 190, 1)',
313 borderColor: 'rgba(0, 255, 190, 1)', 318 borderWidth: 1
314 borderWidth: 1 319 }
315 } 320 let styleItem2 = {
316 let styleItem2 = { 321 color: {
317 color: { 322 type: 'linear',
318 type: 'linear', 323 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
319 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 324 colorStops: [
320 colorStops: [ 325 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
321 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色 326 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
322 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色 327 ]
323 ] 328 },
324 }, 329 borderColor: 'rgba(0, 168, 255, 1)',
325 borderColor: 'rgba(0, 168, 255, 1)', 330 borderWidth: 1
326 borderWidth: 1 331 }
327 } 332
328 333 let dataList = arr.map(v => ({
329 let dataList = arr.map(v => ({ 334 value: v.DSO,
330 value: v.DSO, 335 day: v.DAYS,
331 day: v.DAYS, 336 itemStyle: v.type == 2 ? styleItem1 : styleItem2,
332 itemStyle: v.type == 2 ? styleItem1 : styleItem2, 337 name: v.BASEJC,
333 name: v.type == 2 ? "陆地" : '海上', 338 type: v.type
334 type: v.type 339 }))
335 })) 340 let arr1 = []
336 let arr1 = [] 341 let arr2 = []
337 let arr2 = [] 342 for (const v of arr) {
338 for (const v of arr) { 343 if (v.type == 2) {
339 if (v.type == 2) { 344 arr2.push(290)
340 arr2.push(290) 345 arr1.push(null)
341 arr1.push(null) 346 } else {
342 } else { 347 arr1.push(150)
343 arr1.push(150) 348 arr2.push(null)
344 arr2.push(null) 349 }
350 }
351 if (arr2.length > 0) arr2.push(290)
352 if (arr1.length > 0) arr1.unshift(150)
353 handelZhu4(listX, dataList, arr1, arr2)
354 } else {
355 let nowYear=[],lastYear=[]
356 for (const v of arrList[0].list) {
357 if (v.YEAR == nowYearString) {
358 nowYear.push(v)
359 } else {
360 lastYear.push(v)
361 }
345 } 362 }
363 let nowYearArr = nowYear.map(v => ({
364 ...v,
365 type: 1
366 })).sort((v1, v2) => v1.MONTH - v2.MONTH)
367 let lastYearArr = lastYear.map(v => ({
368 ...v,
369 type: 2
370 })).sort((v1, v2) => v1.MONTH - v2.MONTH)
371
372 let listX1 = ['','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','']
373
374 let styleItem1 = {
375 color: {
376 type: 'linear',
377 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
378 colorStops: [
379 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
380 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
381 ]
382 },
383 borderColor: 'rgba(0, 255, 190, 1)',
384 borderWidth: 1
385 }
386 let styleItem2 = {
387 color: {
388 type: 'linear',
389 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
390 colorStops: [
391 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
392 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
393 ]
394 },
395 borderColor: 'rgba(0, 168, 255, 1)',
396 borderWidth: 1
397 }
398
399 let dataList1 = nowYearArr.map(v => ({
400 value: v.DSO,
401 day: v.DAYS,
402 itemStyle: styleItem2,
403 name: nowYearString,
404 type: v.type
405 }))
406 let dataList2 = lastYearArr.map(v => ({
407 value: v.DSO,
408 day: v.DAYS,
409 itemStyle: styleItem1,
410 name: nowYearString-1,
411 type: v.type
412 }))
413 let arr1 = []
414 for (let i=0;i<14;i++) {
415 if (arrList[0].BLOCK == '陆地') {
416 arr1.push(290)
417 } else {
418 arr1.push(150)
419 }
420 }
421 dataList1.unshift('')
422 dataList1.push('')
423 dataList2.unshift('')
424 dataList2.push('')
425 handelZhu4_2(listX1, dataList1,dataList2, arr1)
346 } 426 }
347 if (arr2.length > 0) arr2.push(290) 427
348 if (arr1.length > 0) arr1.unshift(150) 428
349 handelZhu4(listX, dataList, arr1, arr2)
350 } 429 }
351 430
352 async function handelGetYS005() { 431 async function handelGetYS005() {
353 const res = await getYS005(url.value, obj.value) 432 const res = await getYS005(url.value, obj.value)
354 form.value = res.data 433 form.value = res.data
434 form.value.YJSCORE = parseFloat(form.value.YJSCORE).toFixed(2)
355 console.log(isLeader) 435 console.log(isLeader)
356 if (isLeader.value) { 436 if (isLeader.value) {
357 proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE) 437 proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE)
...@@ -393,295 +473,588 @@ const handelBing1 = (arr1, arr2) => { ...@@ -393,295 +473,588 @@ const handelBing1 = (arr1, arr2) => {
393 // arr1 2025 473 // arr1 2025
394 // arr2 2024 474 // arr2 2024
395 chart1 = echarts.init(bing1.value) 475 chart1 = echarts.init(bing1.value)
396 const option = { 476 let option
397 tooltip: { 477 if (myType.value) {
398 trigger: 'item', 478 option = {
399 position: ['20%', '30%'], 479 tooltip: {
400 // valueFormatter: (value) => value + '万', 480 trigger: 'item',
401 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色 481 position: ['20%', '30%'],
402 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色 482 // valueFormatter: (value) => value + '万',
403 borderWidth: 1, // 边框宽度 483 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
404 textStyle: { 484 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
405 color: '#fff', // 文字颜色 485 borderWidth: 1, // 边框宽度
406 fontSize: 12, // 文字大小 486 textStyle: {
407 }, 487 color: '#fff', // 文字颜色
408 formatter: function (params) { 488 fontSize: 12, // 文字大小
409 // params.seriesIndex 可以判断是哪个系列（外环或内环）
410 // params.seriesName 可以获取系列名称
411 if (params.seriesIndex === 1) {
412 // 外环的提示内容
413 return `营业收入<br/>${arr1.YEAR}: ${(arr1.TOTAL / 10000).toFixed()}万`;
414 } else if (params.seriesIndex === 2) {
415 // 内环的提示内容
416 return `营业收入<br/>${arr2.YEAR}: ${(arr2.TOTAL / 10000).toFixed()}万`;
417 }
418 }
419 },
420 series: [
421 {
422 name: '',
423 type: 'pie',
424 radius: ['99%', '100%'],
425 center: ['50%', '60%'],
426 emphasis: {
427 scale: false,
428 }, 489 },
429 label: { 490 formatter: function (params) {
430 show: false, 491 // params.seriesIndex 可以判断是哪个系列（外环或内环）
431 emphasis: { 492 // params.seriesName 可以获取系列名称
432 show: false 493 if (params.seriesIndex === 1) {
494 // 外环的提示内容
495 return `营业收入<br/>${arr1.YEAR}: ${(arr1.TOTAL / 10000).toFixed()}万`;
496 } else if (params.seriesIndex === 2) {
497 // 内环的提示内容
498 return `营业收入<br/>${arr2.YEAR}: ${(arr2.TOTAL / 10000).toFixed()}万`;
433 } 499 }
434 },
435 startAngle: 180,
436 endAngle: 360,
437 data: [1],
438 itemStyle: {
439 color: 'rgba(1, 162, 237, 1)',
440 },
441 barWidth: 2,
442 tooltip: {
443 trigger: ''
444 } 500 }
445 }, 501 },
446 { 502 series: [
447 name: '营业收入', 503 {
448 type: 'pie', 504 name: '',
449 radius: ['75%', '95%'], 505 type: 'pie',
450 center: ['50%', '60%'], 506 radius: ['99%', '100%'],
451 label: { 507 center: ['50%', '60%'],
452 show: true, // 显示标签 508 emphasis: {
453 position: 'center', // 位置居中 509 scale: false,
454 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容 510 },
455 color: "#ffff", 511 label: {
456 rich: { 512 show: false,
457 total: { 513 emphasis: {
458 fontSize: 5, 514 show: false
459 color: '#fff'
460 } 515 }
516 },
517 startAngle: 180,
518 endAngle: 360,
519 data: [1],
520 itemStyle: {
521 color: 'rgba(1, 162, 237, 1)',
522 },
523 barWidth: 2,
524 tooltip: {
525 trigger: ''
461 } 526 }
462 }, 527 },
463 528 {
464 // adjust the start and end angle 529 name: '营业收入',
465 startAngle: 180, 530 type: 'pie',
466 endAngle: 360, 531 radius: ['75%', '95%'],
467 emphasis: { 532 center: ['50%', '60%'],
468 scale: true,
469 label: { 533 label: {
470 show: true, 534 show: true, // 显示标签
471 } 535 position: 'center', // 位置居中
536 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
537 color: "#ffff",
538 rich: {
539 total: {
540 fontSize: 5,
541 color: '#fff'
542 }
543 }
544 },
545
546 // adjust the start and end angle
547 startAngle: 180,
548 endAngle: 360,
549 emphasis: {
550 scale: true,
551 label: {
552 show: true,
553 }
554 },
555 data: [
556 {
557 value: (arr1.TOTAL / 10000).toFixed(),
558 name: arr1.YEAR,
559 itemStyle: {color: "rgb(255,217,0)"}
560 },
561 {
562 value: (arr2.TOTAL / 10000).toFixed(),
563 name: arr2.YEAR
564 },
565 ],
566 itemStyle: {
567 color: 'rgba(1, 162, 237, .3)',
568 },
472 }, 569 },
473 data: [ 570 {
474 { 571 name: '营业收入',
475 value: (arr1.TOTAL / 10000).toFixed(), 572 type: 'pie',
476 name: arr1.YEAR, 573 radius: ['55%', '70%'],
477 itemStyle: {color: "rgb(255,217,0)"} 574 center: ['50%', '60%'],
575 label: {
576 show: false, // 显示标签
577 position: 'center', // 位置居中
578 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
579 color: "#ffff",
580 rich: {
581 total: {
582 fontSize: 5,
583 color: '#fff'
584 }
585 }
478 }, 586 },
479 { 587 emphasis: {
480 value: (arr2.TOTAL / 10000).toFixed(), 588 scale: true,
481 name: arr2.YEAR 589 label: {
590 show: true,
591 }
592 },
593 // adjust the start and end angle
594 startAngle: 180,
595 endAngle: 360,
596 data: [
597 {
598 value: (arr2.TOTAL / 10000).toFixed() || 0,
599 name: arr2.YEAR,
600 itemStyle: {color: "rgba(240, 255, 0, .5)"}
601 },
602 // {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
603 {
604 value: (arr1.TOTAL / 10000).toFixed() || 0,
605 name: arr1.YEAR
606 }
607 ],
608 itemStyle: {
609 color: 'rgba(1, 162, 237, .3)',
482 }, 610 },
483 ],
484 itemStyle: {
485 color: 'rgba(1, 162, 237, .3)',
486 }, 611 },
612 // {
613 // name: '4',
614 // type: 'pie',
615 // radius: ['38%', '50%'],
616 // center: ['50%', '60%'],
617 // label: {
618 // show: false
619 // },
620 // emphasis: {
621 // scale: false
622 // },
623 // // adjust the start and end angle
624 // startAngle: 180,
625 // endAngle: 360,
626 // data: [{value: 1048, name: ''}],
627 // itemStyle: {
628 // color: {
629 // image: yy,
630 // repeat: 'repeat'
631 // }
632 // }
633 // // itemStyle: {
634 // // color: {
635 // // type: 'linear',
636 // // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
637 // // colorStops: [
638 // // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
639 // // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
640 // // ]
641 // // },
642 // // },
643 // }
644 ]
645 }
646 } else {
647 option = {
648 tooltip: {
649 trigger: 'item',
650 position: ['20%', '30%'],
651 // valueFormatter: (value) => value + '万',
652 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
653 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
654 borderWidth: 1, // 边框宽度
655 textStyle: {
656 color: '#fff', // 文字颜色
657 fontSize: 12, // 文字大小
658 },
659 formatter: function (params) {
660 // params.seriesIndex 可以判断是哪个系列（外环或内环）
661 // params.seriesName 可以获取系列名称
662 if (params.seriesIndex === 1) {
663 // 外环的提示内容
664 return `营业收入<br/>${arr1.YEAR}: ${(arr1.TOTAL / 10000).toFixed()}万`;
665 } else if (params.seriesIndex === 2) {
666 // 内环的提示内容
667 return `营业收入<br/>${arr2.YEAR}: ${(arr2.TOTAL / 10000).toFixed()}万`;
668 }
669 }
487 }, 670 },
488 { 671 series: [
489 name: '营业收入', 672 {
490 type: 'pie', 673 name: '',
491 radius: ['55%', '70%'], 674 type: 'pie',
492 center: ['50%', '60%'], 675 radius: ['89%', '90%'],
493 label: { 676 center: ['50%', '60%'],
494 show: false, // 显示标签 677 emphasis: {
495 position: 'center', // 位置居中 678 scale: false,
496 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容 679 },
497 color: "#ffff", 680 label: {
498 rich: { 681 show: false,
499 total: { 682 emphasis: {
500 fontSize: 5, 683 show: false
501 color: '#fff'
502 } 684 }
685 },
686 startAngle: 180,
687 endAngle: 360,
688 data: [1],
689 itemStyle: {
690 color: 'rgba(1, 162, 237, 1)',
691 },
692 barWidth: 2,
693 tooltip: {
694 trigger: ''
503 } 695 }
504 }, 696 },
505 emphasis: { 697 {
506 scale: true, 698 name: '营业收入',
699 type: 'pie',
700 radius: ['65%', '85%'],
701 center: ['50%', '60%'],
507 label: { 702 label: {
508 show: true, 703 show: true, // 显示标签
509 } 704 position: 'center', // 位置居中
705 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
706 color: "#ffff",
707 rich: {
708 total: {
709 fontSize: 5,
710 color: '#fff'
711 }
712 }
713 },
714
715 // adjust the start and end angle
716 startAngle: 180,
717 endAngle: 360,
718 emphasis: {
719 scale: true,
720 label: {
721 show: true,
722 }
723 },
724 data: [
725 {
726 value: (arr1.TOTAL / 10000).toFixed(),
727 name: arr1.YEAR,
728 itemStyle: {color: "rgb(255,217,0)"}
729 },
730 {
731 value: (arr2.TOTAL / 10000).toFixed(),
732 name: arr2.YEAR
733 },
734 ],
735 itemStyle: {
736 color: 'rgba(1, 162, 237, .3)',
737 },
510 }, 738 },
511 // adjust the start and end angle 739 {
512 startAngle: 180, 740 name: '营业收入',
513 endAngle: 360, 741 type: 'pie',
514 data: [ 742 radius: ['45%', '60%'],
515 { 743 center: ['50%', '60%'],
516 value: (arr2.TOTAL / 10000).toFixed() || 0, 744 label: {
517 name: arr2.YEAR, 745 show: false, // 显示标签
518 itemStyle: {color: "rgba(240, 255, 0, .5)"} 746 position: 'center', // 位置居中
747 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
748 color: "#ffff",
749 rich: {
750 total: {
751 fontSize: 5,
752 color: '#fff'
753 }
754 }
755 },
756 emphasis: {
757 scale: true,
758 label: {
759 show: true,
760 }
761 },
762 // adjust the start and end angle
763 startAngle: 180,
764 endAngle: 360,
765 data: [
766 {
767 value: (arr2.TOTAL / 10000).toFixed() || 0,
768 name: arr2.YEAR,
769 itemStyle: {color: "rgba(240, 255, 0, .5)"}
770 },
771 // {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
772 {
773 value: (arr1.TOTAL / 10000).toFixed() || 0,
774 name: arr1.YEAR
775 }
776 ],
777 itemStyle: {
778 color: 'rgba(1, 162, 237, .3)',
519 }, 779 },
520 // {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
521 {
522 value: (arr1.TOTAL / 10000).toFixed() || 0,
523 name: arr1.YEAR
524 }
525 ],
526 itemStyle: {
527 color: 'rgba(1, 162, 237, .3)',
528 }, 780 },
529 }, 781 // {
530 // { 782 // name: '4',
531 // name: '4', 783 // type: 'pie',
532 // type: 'pie', 784 // radius: ['38%', '50%'],
533 // radius: ['38%', '50%'], 785 // center: ['50%', '60%'],
534 // center: ['50%', '60%'], 786 // label: {
535 // label: { 787 // show: false
536 // show: false 788 // },
537 // }, 789 // emphasis: {
538 // emphasis: { 790 // scale: false
539 // scale: false 791 // },
540 // }, 792 // // adjust the start and end angle
541 // // adjust the start and end angle 793 // startAngle: 180,
542 // startAngle: 180, 794 // endAngle: 360,
543 // endAngle: 360, 795 // data: [{value: 1048, name: ''}],
544 // data: [{value: 1048, name: ''}], 796 // itemStyle: {
545 // itemStyle: { 797 // color: {
546 // color: { 798 // image: yy,
547 // image: yy, 799 // repeat: 'repeat'
548 // repeat: 'repeat' 800 // }
549 // } 801 // }
550 // } 802 // // itemStyle: {
551 // // itemStyle: { 803 // // color: {
552 // // color: { 804 // // type: 'linear',
553 // // type: 'linear', 805 // // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
554 // // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 806 // // colorStops: [
555 // // colorStops: [ 807 // // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
556 // // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色 808 // // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
557 // // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色 809 // // ]
558 // // ] 810 // // },
559 // // }, 811 // // },
560 // // }, 812 // }
561 // } 813 ]
562 ] 814 }
563 } 815 }
816
564 817
565 chart1.setOption(option) 818 chart1.setOption(option)
566 autoHover(chart1, option, 0, 2000) 819 autoHover(chart1, option, 0, 2000)
567 } 820 }
568 const handelBing2 = (row1, row2) => { 821 const handelBing2 = (row1, row2) => {
569 chart2 = echarts.init(bing2.value) 822 chart2 = echarts.init(bing2.value)
570 const option = { 823 let option
571 tooltip: { 824 if (myType.value) {
572 trigger: 'item', 825 option = {
573 position: ['20%', '30%'], 826 tooltip: {
574 valueFormatter: (value) => value + '万', 827 trigger: 'item',
575 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色 828 position: ['20%', '30%'],
576 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色 829 valueFormatter: (value) => value + '万',
577 borderWidth: 1, // 边框宽度 830 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
578 textStyle: { 831 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
579 color: '#fff', // 文字颜色 832 borderWidth: 1, // 边框宽度
580 fontSize: 12, // 文字大小 833 textStyle: {
581 }, 834 color: '#fff', // 文字颜色
582 formatter: function (params) { 835 fontSize: 12, // 文字大小
583 // params.seriesIndex 可以判断是哪个系列（外环或内环） 836 },
584 // params.seriesName 可以获取系列名称 837 formatter: function (params) {
585 if (params.seriesIndex === 1) { 838 // params.seriesIndex 可以判断是哪个系列（外环或内环）
586 // 外环的提示内容 839 // params.seriesName 可以获取系列名称
587 return `应收余额<br/>${params.name}: ${params.value}万`; 840 if (params.seriesIndex === 1) {
841 // 外环的提示内容
842 return `应收余额<br/>${params.name}: ${params.value}万`;
843 }
588 } 844 }
589 } 845 },
590 }, 846
591 847 series: [
592 series: [ 848 {
593 { 849 name: '',
594 name: '', 850 type: 'pie',
595 type: 'pie', 851 radius: ['99%', '100%'],
596 radius: ['99%', '100%'], 852 center: ['50%', '60%'],
597 center: ['50%', '60%'], 853 emphasis: {
598 emphasis: { 854 scale: false,
599 scale: false, 855 },
856 label: {
857 show: false,
858 emphasis: {
859 show: false
860 }
861 },
862 startAngle: 180,
863 endAngle: 360,
864 data: [1],
865 itemStyle: {
866 color: 'rgba(1, 162, 237, 1)',
867 },
868 barWidth: 2
600 }, 869 },
601 label: { 870 {
602 show: false, 871 name: '应收余额',
872 type: 'pie',
873 radius: ['75%', '95%'],
874 center: ['50%', '60%'],
875 label: {
876 show: true, // 显示标签
877 position: 'center', // 位置居中
878 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
879 color: "#ffff",
880 rich: {
881 total: {
882 fontSize: 5,
883 color: '#fff'
884 }
885 }
886 },
887 // adjust the start and end angle
888 startAngle: 180,
889 endAngle: 360,
603 emphasis: { 890 emphasis: {
604 show: false 891 scale: true
605 } 892 },
893 data: [
894 {
895 value: (row1.TOTAL / 10000).toFixed() || 0,
896 name: row1.YEAR,
897 itemStyle: {color: "rgba(0, 255, 190,1)"}
898 },
899 {
900 value: (row2.TOTAL / 10000).toFixed() || 0,
901 name: row2.YEAR
902 }
903 ],
904 itemStyle: {
905 color: 'rgba(1, 162, 237, .5)',
906 },
606 }, 907 },
607 startAngle: 180, 908 // {
608 endAngle: 360, 909 // name: '3',
609 data: [1], 910 // type: 'pie',
610 itemStyle: { 911 // radius: ['55%', '70%'],
611 color: 'rgba(1, 162, 237, 1)', 912 // center: ['50%', '60%'],
913 // label: {
914 // show: true,
915 // position: 'center',
916 // formatter: '{b}'
917 // },
918 // emphasis: {
919 // scale: false
920 // },
921 // // adjust the start and end angle
922 // startAngle: 180,
923 // endAngle: 360,
924 // data: [
925 // {value: 1048,},
926 // ],
927 // itemStyle: {
928 // color: {
929 // type: 'linear',
930 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
931 // colorStops: [
932 // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
933 // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
934 // ]
935 // },
936 // },
937 // },
938 ]
939 }
940 } else {
941 option = {
942 tooltip: {
943 trigger: 'item',
944 position: ['20%', '30%'],
945 valueFormatter: (value) => value + '万',
946 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
947 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
948 borderWidth: 1, // 边框宽度
949 textStyle: {
950 color: '#fff', // 文字颜色
951 fontSize: 12, // 文字大小
612 }, 952 },
613 barWidth: 2 953 formatter: function (params) {
614 }, 954 // params.seriesIndex 可以判断是哪个系列（外环或内环）
615 { 955 // params.seriesName 可以获取系列名称
616 name: '应收余额', 956 if (params.seriesIndex === 1) {
617 type: 'pie', 957 // 外环的提示内容
618 radius: ['75%', '95%'], 958 return `应收余额<br/>${params.name}: ${params.value}万`;
619 center: ['50%', '60%'],
620 label: {
621 show: true, // 显示标签
622 position: 'center', // 位置居中
623 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
624 color: "#ffff",
625 rich: {
626 total: {
627 fontSize: 5,
628 color: '#fff'
629 }
630 } 959 }
960 }
961 },
962
963 series: [
964 {
965 name: '',
966 type: 'pie',
967 radius: ['89%', '90%'],
968 center: ['50%', '60%'],
969 emphasis: {
970 scale: false,
971 },
972 label: {
973 show: false,
974 emphasis: {
975 show: false
976 }
977 },
978 startAngle: 180,
979 endAngle: 360,
980 data: [1],
981 itemStyle: {
982 color: 'rgba(1, 162, 237, 1)',
983 },
984 barWidth: 2
631 }, 985 },
632 // adjust the start and end angle 986 {
633 startAngle: 180, 987 name: '应收余额',
634 endAngle: 360, 988 type: 'pie',
635 emphasis: { 989 radius: ['65%', '85%'],
636 scale: true 990 center: ['50%', '60%'],
637 }, 991 label: {
638 data: [ 992 show: true, // 显示标签
639 { 993 position: 'center', // 位置居中
640 value: (row1.TOTAL / 10000).toFixed() || 0, 994 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
641 name: row1.YEAR, 995 color: "#ffff",
642 itemStyle: {color: "rgba(0, 255, 190,1)"} 996 rich: {
997 total: {
998 fontSize: 5,
999 color: '#fff'
1000 }
1001 }
1002 },
1003 // adjust the start and end angle
1004 startAngle: 180,
1005 endAngle: 360,
1006 emphasis: {
1007 scale: true
1008 },
1009 data: [
1010 {
1011 value: (row1.TOTAL / 10000).toFixed() || 0,
1012 name: row1.YEAR,
1013 itemStyle: {color: "rgba(0, 255, 190,1)"}
1014 },
1015 {
1016 value: (row2.TOTAL / 10000).toFixed() || 0,
1017 name: row2.YEAR
1018 }
1019 ],
1020 itemStyle: {
1021 color: 'rgba(1, 162, 237, .5)',
643 }, 1022 },
644 {
645 value: (row2.TOTAL / 10000).toFixed() || 0,
646 name: row2.YEAR
647 }
648 ],
649 itemStyle: {
650 color: 'rgba(1, 162, 237, .5)',
651 }, 1023 },
652 }, 1024 // {
653 // { 1025 // name: '3',
654 // name: '3', 1026 // type: 'pie',
655 // type: 'pie', 1027 // radius: ['55%', '70%'],
656 // radius: ['55%', '70%'], 1028 // center: ['50%', '60%'],
657 // center: ['50%', '60%'], 1029 // label: {
658 // label: { 1030 // show: true,
659 // show: true, 1031 // position: 'center',
660 // position: 'center', 1032 // formatter: '{b}'
661 // formatter: '{b}' 1033 // },
662 // }, 1034 // emphasis: {
663 // emphasis: { 1035 // scale: false
664 // scale: false 1036 // },
665 // }, 1037 // // adjust the start and end angle
666 // // adjust the start and end angle 1038 // startAngle: 180,
667 // startAngle: 180, 1039 // endAngle: 360,
668 // endAngle: 360, 1040 // data: [
669 // data: [ 1041 // {value: 1048,},
670 // {value: 1048,}, 1042 // ],
671 // ], 1043 // itemStyle: {
672 // itemStyle: { 1044 // color: {
673 // color: { 1045 // type: 'linear',
674 // type: 'linear', 1046 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
675 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1047 // colorStops: [
676 // colorStops: [ 1048 // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
677 // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色 1049 // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
678 // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色 1050 // ]
679 // ] 1051 // },
680 // }, 1052 // },
681 // }, 1053 // },
682 // }, 1054 ]
683 ] 1055 }
684 } 1056 }
1057
685 1058
686 chart2.setOption(option) 1059 chart2.setOption(option)
687 autoHover(chart2, option, 0, 2000) 1060 autoHover(chart2, option, 0, 2000)
...@@ -851,6 +1224,12 @@ const handelZhu1 = (row1, row2) => { ...@@ -851,6 +1224,12 @@ const handelZhu1 = (row1, row2) => {
851 type: 'solid' 1224 type: 'solid'
852 } 1225 }
853 }, 1226 },
1227 axisLabel: {
1228 formatter: function(value, index) {
1229 // 只显示奇数索引的标签(从0开始计数)
1230 return index % 2 === 0 ? value : '';
1231 }
1232 }
854 } 1233 }
855 ], 1234 ],
856 yAxis: [ 1235 yAxis: [
...@@ -955,9 +1334,9 @@ const handelZhu2 = (row1, row2) => { ...@@ -955,9 +1334,9 @@ const handelZhu2 = (row1, row2) => {
955 }, 1334 },
956 grid: { 1335 grid: {
957 top: "25%", 1336 top: "25%",
958 left: '3%', 1337 left: '0%',
959 right: '4%', 1338 right: '0%',
960 bottom: '3%', 1339 bottom: '1%',
961 containLabel: true 1340 containLabel: true
962 }, 1341 },
963 xAxis: [ 1342 xAxis: [
...@@ -972,6 +1351,13 @@ const handelZhu2 = (row1, row2) => { ...@@ -972,6 +1351,13 @@ const handelZhu2 = (row1, row2) => {
972 type: 'solid' 1351 type: 'solid'
973 } 1352 }
974 }, 1353 },
1354 axisLabel: {
1355 interval:0,
1356 formatter: function(value, index) {
1357 // 只显示奇数索引的标签(从0开始计数)
1358 return index % 2 === 0 ? value : '';
1359 }
1360 },
975 } 1361 }
976 ], 1362 ],
977 yAxis: [ 1363 yAxis: [
...@@ -1095,9 +1481,9 @@ const handelZhu3 = (row1, row2) => { ...@@ -1095,9 +1481,9 @@ const handelZhu3 = (row1, row2) => {
1095 }, 1481 },
1096 grid: { 1482 grid: {
1097 top: "18%", 1483 top: "18%",
1098 left: '3%', 1484 left: '0%',
1099 right: '4%', 1485 right: '0%',
1100 bottom: '3%', 1486 bottom: '1%',
1101 containLabel: true 1487 containLabel: true
1102 }, 1488 },
1103 xAxis: [ 1489 xAxis: [
...@@ -1113,6 +1499,13 @@ const handelZhu3 = (row1, row2) => { ...@@ -1113,6 +1499,13 @@ const handelZhu3 = (row1, row2) => {
1113 type: 'solid', 1499 type: 'solid',
1114 } 1500 }
1115 }, 1501 },
1502 axisLabel: {
1503 padding: [0, 0, 0, 20],
1504 formatter: function(value, index) {
1505 // 只显示奇数索引的标签(从0开始计数)
1506 return index % 2 === 0 ? value : '';
1507 }
1508 }
1116 } 1509 }
1117 ], 1510 ],
1118 yAxis: [ 1511 yAxis: [
...@@ -1228,7 +1621,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1228,7 +1621,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1228 <span style="margin-right: 20px;">DSO</span> 1621 <span style="margin-right: 20px;">DSO</span>
1229 ${row[0]?.data?.value} 1622 ${row[0]?.data?.value}
1230 </div> 1623 </div>
1231 1624
1232 ` 1625 `
1233 } 1626 }
1234 // <div style="color: #fff;font-size: 12px;"> 1627 // <div style="color: #fff;font-size: 12px;">
...@@ -1264,6 +1657,9 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1264,6 +1657,9 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1264 type: 'solid' 1657 type: 'solid'
1265 } 1658 }
1266 }, 1659 },
1660 axisLabel:{
1661 padding: [0, 0, 0, 6]
1662 }
1267 } 1663 }
1268 ], 1664 ],
1269 yAxis: [ 1665 yAxis: [
...@@ -1316,7 +1712,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1316,7 +1712,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1316 borderColor: 'rgba(0, 168, 255, .5)', 1712 borderColor: 'rgba(0, 168, 255, .5)',
1317 borderWidth: 1 1713 borderWidth: 1
1318 }, 1714 },
1319 barWidth: '30%', 1715 barWidth: 0,
1320 }, 1716 },
1321 { 1717 {
1322 name: '陆地', 1718 name: '陆地',
...@@ -1438,6 +1834,199 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1438,6 +1834,199 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1438 // autoHover(chart44, option, 0, 2000) 1834 // autoHover(chart44, option, 0, 2000)
1439 } 1835 }
1440 1836
1837 const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
1838 chart44 = echarts.init(zhuRef4.value)
1839 const option = {
1840 tooltip: {
1841 trigger: 'axis',
1842 axisPointer: {
1843 type: 'shadow'
1844 },
1845 valueFormatter: (value) => value + '天',
1846 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
1847 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
1848 borderWidth: 1, // 边框宽度
1849 textStyle: {
1850 color: '#fff', // 文字颜色
1851 fontSize: 12, // 文字大小
1852 },
1853 // 过滤数据
1854 formatter: (row) => {
1855 let htmlStr = ''
1856 row.forEach(item => {
1857 if (item.seriesType === "bar" &&item.data.itemStyle) {
1858 htmlStr += `<div style="color: #fff;font-size: 12px;">${item.data.name}</div>
1859 <div style="color: #fff;font-size: 12px;">
1860 <span style="background:${item.data.itemStyle.borderColor};display: inline-block;width: 10px;height: 10px;border-radius: 50%;"></span>
1861 <span style="margin-right: 20px;">DSO</span>
1862 ${item?.data?.value}
1863 </div>`
1864 }
1865 })
1866 return htmlStr
1867 }
1868 // <div style="color: #fff;font-size: 12px;">
1869 // <span style="background:${row[0].data.itemStyle.borderColor};display: inline-block;width: 10px;height: 10px;border-radius: 50%;"></span>
1870 // <span style="margin-right: 20px;">天数</span>
1871 // ${row[0]?.data?.day}
1872 // </div>
1873 },
1874 legend: {
1875 textStyle: {
1876 color: '#FFF'
1877 },
1878 },
1879 grid: {
1880 left: '3%',
1881 right: '4%',
1882 bottom: '3%',
1883 top: "20%",
1884 containLabel: true
1885 },
1886 xAxis: [
1887 {
1888 type: 'category',
1889 stack: 'Ad',
1890 // data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海'],
1891 data: listX1,
1892 axisLine: {
1893 show: true,
1894 lineStyle: {
1895 color: '#fff',
1896 width: 2,
1897 type: 'solid'
1898 }
1899 },
1900 axisLabel: {
1901 interval:0,
1902 formatter: function(value, index) {
1903 // 只显示奇数索引的标签(从0开始计数)
1904 return index % 2 === 1 ? value : '';
1905 }
1906 }
1907 }
1908 ],
1909 yAxis: [
1910 {
1911 type: 'value',
1912 name: '',
1913 axisLine: {
1914 show: true,
1915 lineStyle: {
1916 color: '#fff',
1917 width: 1,
1918 type: 'solid'
1919 }
1920 },
1921 axisLabel: {
1922 show:false
1923 // formatter: '{value}w' // 在数值后添加单位
1924 },
1925 splitLine: {
1926 show: true, // 默认false，需显式开启
1927 lineStyle: {
1928 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
1929 }
1930 }
1931 }
1932 ],
1933 series: [
1934 {
1935 name: nowYearString,
1936 type: 'bar',
1937 barGap: 0,
1938 data:dataList1,
1939 emphasis: {
1940 focus: 'series',
1941 },
1942 // data: [30, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
1943 // data: listHai,
1944 itemStyle: {
1945 color: {
1946 type: 'linear',
1947 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1948 colorStops: [
1949 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
1950 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
1951 ]
1952 },
1953 borderColor: 'rgba(0, 168, 255, .5)',
1954 borderWidth: 1
1955 },
1956 barWidth: '30%',
1957 },
1958 {
1959 name: nowYearString-1,
1960 type: 'bar',
1961 barGap: 0,
1962 emphasis: {
1963 focus: 'series',
1964 },
1965 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
1966 data: dataList2,
1967 itemStyle: {
1968 color: {
1969 type: 'linear',
1970 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1971 colorStops: [
1972 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
1973 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
1974 ]
1975 },
1976 // borderColor: 'rgba(0, 255, 190, .5)',
1977 // borderWidth: 1
1978 },
1979 barWidth: '30%',
1980 },
1981 {
1982 type: 'line',
1983 smooth: false,
1984 lineStyle: {
1985 width: 1
1986 },
1987 showSymbol: true,
1988 areaStyle: {
1989 opacity: 0.2,
1990 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
1991 // {
1992 // offset: 0,
1993 // color: 'rgb(128, 255, 165)'
1994 // },
1995 {
1996 offset: 0.3,
1997 color: 'rgb(1, 191, 236)'
1998 }
1999 ])
2000 },
2001 emphasis: {
2002 focus: 'series',
2003 label: false,
2004 disabled: true,
2005 },
2006 data: arr1,
2007 label: {
2008 show: true,
2009 position: 'right', // 起始点标签放在左侧
2010 formatter: function (params) {
2011 // 仅当为第一个数据点时显示数值
2012 if (params.dataIndex === arr1.length - 1) {
2013 return params.value; // 显示数值
2014 }
2015 return ''; // 其他点不显示
2016 },
2017 fontSize: 13,
2018 color: '#fff',
2019 // fontWeight: 'bold',
2020 opacity: 1, // 关键：取消透明度
2021 shadowBlur: 0 // 取消阴影
2022 },
2023 },
2024 ]
2025 }
2026 chart44.setOption(option)
2027 // autoHover(chart44, option, 0, 2000)
2028 }
2029
1441 function autoHover(myChart, option, index, time) { 2030 function autoHover(myChart, option, index, time) {
1442 autoToolTip(myChart, option, { 2031 autoToolTip(myChart, option, {
1443 interval: time,// 轮播间隔时间 默认2s 2032 interval: time,// 轮播间隔时间 默认2s
......
src/viewsPc/vip/components/information.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 width="33%" 7 width="33%"
8 > 8 >
9 <div class="son"> 9 <div class="son">
10 <div style="color: #fff;font-size: 15px">填写日期: {{myDate}}</div> 10 <div style="font-family: SimHei, serif;font-weight: 400;font-size: 20px;color: #FFFFFF;">更新日期: {{myDate}}</div>
11 <p v-for="val in list" :key="val" class="row"> 11 <p v-for="val in list" :key="val" class="row">
12 <span></span> {{ val }} 12 <span></span> {{ val }}
13 </p> 13 </p>
......
src/viewsPc/vip/leftPage.vue
...@@ -105,7 +105,7 @@ const lineRef = ref(null) ...@@ -105,7 +105,7 @@ const lineRef = ref(null)
105 const payeeRef = ref(null) 105 const payeeRef = ref(null)
106 106
107 const type3 = ref('0') 107 const type3 = ref('0')
108 const type4 = ref(['1']) 108 const type4 = ref(['1','2'])
109 const type2 = ref([]) 109 const type2 = ref([])
110 const type1 = ref(['1', '2']) 110 const type1 = ref(['1', '2'])
111 111
...@@ -181,7 +181,7 @@ async function handelGetYS006() { ...@@ -181,7 +181,7 @@ async function handelGetYS006() {
181 set2.value.push({ 181 set2.value.push({
182 value: v1.TOTAL, 182 value: v1.TOTAL,
183 name: v1.BASEJC, 183 name: v1.BASEJC,
184 type: v1.BLOCK 184 type: v1.BLOCK,
185 }) 185 })
186 } else { 186 } else {
187 set3.value.push({ 187 set3.value.push({
...@@ -221,6 +221,16 @@ async function handelGetYS006() { ...@@ -221,6 +221,16 @@ async function handelGetYS006() {
221 set3.value.sort((a,b)=>{ 221 set3.value.sort((a,b)=>{
222 return b.value - a.value 222 return b.value - a.value
223 }) 223 })
224
225 let colorList = ['#A4E6FF', '#6ED8FF', '#2FA9FF', '#187CEC', '#0142DA']
226 set2.value.forEach((n,index) => {
227 n.itemStyle = {borderColor: colorList[index], borderWidth: 2}
228 })
229
230 let colorList2 = ['#FEFFD3', '#FFF59C', '#F7E20F', '#F7CE10', '#D29F05']
231 set3.value.forEach((n,index) => {
232 n.itemStyle = {borderColor: colorList2[index], borderWidth: 2}
233 })
224 234
225 setA(set1.value, set2.value, set3.value) 235 setA(set1.value, set2.value, set3.value)
226 setB( 236 setB(
...@@ -241,7 +251,7 @@ async function handelGetYS006() { ...@@ -241,7 +251,7 @@ async function handelGetYS006() {
241 type4.value.includes('1') ? legend1 : [], 251 type4.value.includes('1') ? legend1 : [],
242 type4.value.includes('2') ? legend2 : [], 252 type4.value.includes('2') ? legend2 : [],
243 ) 253 )
244 254
245 console.log(2222222, h3.value) 255 console.log(2222222, h3.value)
246 console.log(33333333, h6.value) 256 console.log(33333333, h6.value)
247 } 257 }
...@@ -401,9 +411,9 @@ const setA = (arr, arr2, arr3) => { ...@@ -401,9 +411,9 @@ const setA = (arr, arr2, arr3) => {
401 orient: 'vertical', 411 orient: 'vertical',
402 data: arr2, 412 data: arr2,
403 right: '5%', 413 right: '5%',
404 top: '12%', 414 top: 20,
405 bottom: 20, 415 bottom: '25%',
406 itemGap:5, 416 itemGap:10,
407 textStyle: { 417 textStyle: {
408 color: '#FFF', 418 color: '#FFF',
409 rich: { 419 rich: {
...@@ -414,7 +424,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -414,7 +424,7 @@ const setA = (arr, arr2, arr3) => {
414 width:40, 424 width:40,
415 }, 425 },
416 b:{ 426 b:{
417 float:'right', 427 align:'right',
418 fontSize: 12, 428 fontSize: 12,
419 lineHeight: 12, 429 lineHeight: 12,
420 width:40, 430 width:40,
...@@ -426,7 +436,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -426,7 +436,7 @@ const setA = (arr, arr2, arr3) => {
426 width:40, 436 width:40,
427 }, 437 },
428 d:{ 438 d:{
429 float:'right', 439 align:'right',
430 fontSize: 12, 440 fontSize: 12,
431 lineHeight: 22, 441 lineHeight: 22,
432 width:40, 442 width:40,
...@@ -463,9 +473,9 @@ const setA = (arr, arr2, arr3) => { ...@@ -463,9 +473,9 @@ const setA = (arr, arr2, arr3) => {
463 orient: 'vertical', 473 orient: 'vertical',
464 data: arr3, 474 data: arr3,
465 right: '30%', 475 right: '30%',
466 top: '12%', 476 top: 20,
467 bottom: 20, 477 bottom: '25%',
468 itemGap:5, 478 itemGap:10,
469 textStyle: { 479 textStyle: {
470 color: '#FFF', 480 color: '#FFF',
471 rich: { 481 rich: {
...@@ -476,7 +486,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -476,7 +486,7 @@ const setA = (arr, arr2, arr3) => {
476 width:40, 486 width:40,
477 }, 487 },
478 b:{ 488 b:{
479 float:'right', 489 align:'right',
480 fontSize: 12, 490 fontSize: 12,
481 lineHeight: 12, 491 lineHeight: 12,
482 width:40, 492 width:40,
...@@ -488,7 +498,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -488,7 +498,7 @@ const setA = (arr, arr2, arr3) => {
488 width:40, 498 width:40,
489 }, 499 },
490 d:{ 500 d:{
491 float:'right', 501 align:'right',
492 fontSize: 12, 502 fontSize: 12,
493 lineHeight: 22, 503 lineHeight: 22,
494 width:40, 504 width:40,
...@@ -525,19 +535,19 @@ const setA = (arr, arr2, arr3) => { ...@@ -525,19 +535,19 @@ const setA = (arr, arr2, arr3) => {
525 graphic: { 535 graphic: {
526 elements: [{ 536 elements: [{
527 type: 'text', 537 type: 'text',
528 bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方 538 top: 157, // 可以调整位置，例如使用 'bottom' 来定位到图例下方
529 right: '33%', 539 right: '31%',
530 style: { 540 style: {
531 text: '陆地：' + sumPercent2+'%', // 这里可以计算合计值并显示 541 text: '陆地： ' + sumPercent2+'%', // 这里可以计算合计值并显示
532 fill: '#fff', // 文本颜色 542 fill: '#fff', // 文本颜色
533 fontSize: 12, // 文本大小 543 fontSize: 12, // 文本大小
534 }, 544 },
535 },{ 545 },{
536 type: 'text', 546 type: 'text',
537 bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方 547 top: 157, // 可以调整位置，例如使用 'bottom' 来定位到图例下方
538 right: '8%', 548 right: '6%',
539 style: { 549 style: {
540 text: '海上：' + sumPercent1+'%', // 这里可以计算合计值并显示 550 text: '海上： ' + sumPercent1+'%', // 这里可以计算合计值并显示
541 fill: '#fff', // 文本颜色 551 fill: '#fff', // 文本颜色
542 fontSize: 12, // 文本大小 552 fontSize: 12, // 文本大小
543 } 553 }
...@@ -591,8 +601,6 @@ const setA = (arr, arr2, arr3) => { ...@@ -591,8 +601,6 @@ const setA = (arr, arr2, arr3) => {
591 radius: ['30%', '70%'], 601 radius: ['30%', '70%'],
592 avoidLabelOverlap: false, 602 avoidLabelOverlap: false,
593 itemStyle: { 603 itemStyle: {
594 borderWidth: 2,
595 borderColor: 'rgba(255,0,0,0.05)',
596 color: function (params) { 604 color: function (params) {
597 // 自定义颜色 605 // 自定义颜色
598 let colorList = [ 606 let colorList = [
...@@ -611,7 +619,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -611,7 +619,7 @@ const setA = (arr, arr2, arr3) => {
611 show: false, 619 show: false,
612 fontSize: 20, 620 fontSize: 20,
613 fontWeight: 'bold' 621 fontWeight: 'bold'
614 } 622 },
615 }, 623 },
616 labelLine: { 624 labelLine: {
617 show: false 625 show: false
...@@ -674,7 +682,12 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -674,7 +682,12 @@ const setB = (arr1, arr2, arr3, arr4) => {
674 type: 'solid' 682 type: 'solid'
675 } 683 }
676 }, 684 },
677 685 axisLabel: {
686 formatter: function(value, index) {
687 // 只显示奇数索引的标签(从0开始计数)
688 return index % 2 === 0 ? value : '';
689 }
690 }
678 }, 691 },
679 ], 692 ],
680 yAxis: [ 693 yAxis: [
...@@ -827,6 +840,18 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -827,6 +840,18 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
827 ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''} 840 ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
828 </div> 841 </div>
829 `; 842 `;
843 },
844 extraCssText: `
845 max-height: 150px;
846 overflow: auto !important;
847 padding-right: 10px; /* 为滚动条留出空间 */
848 `,
849 enterable: true, // 允许鼠标进入tooltip
850 axisPointer: {
851 type: 'cross',
852 label: {
853 backgroundColor: '#6a7985'
854 }
830 } 855 }
831 }, 856 },
832 legend: [ 857 legend: [
...@@ -870,6 +895,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -870,6 +895,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
870 type: 'solid' 895 type: 'solid'
871 } 896 }
872 }, 897 },
898 axisLabel: {
899 formatter: function(value, index) {
900 // 只显示奇数索引的标签(从0开始计数)
901 return index % 2 === 0 ? value : '';
902 }
903 }
873 } 904 }
874 ], 905 ],
875 yAxis: [ 906 yAxis: [
...@@ -913,12 +944,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -913,12 +944,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
913 type: 'linear', 944 type: 'linear',
914 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 945 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
915 colorStops: [ 946 colorStops: [
916 {offset: 0, color: 'rgba(141, 251, 116,1 )'}, // 顶部颜色 947 {offset: 0, color: '#18c877'}, // 顶部颜色
917 // {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色 948 // {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色
918 ] 949 ]
919 }, 950 },
920 }, 951 },
921 barWidth: '40%' 952 barWidth: '30%'
922 }, 953 },
923 { 954 {
924 name: `${Year1}收费单待签`, 955 name: `${Year1}收费单待签`,
...@@ -935,12 +966,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -935,12 +966,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
935 type: 'linear', 966 type: 'linear',
936 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 967 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
937 colorStops: [ 968 colorStops: [
938 {offset: 0, color: 'rgba(1, 255, 133, 1)'}, // 顶部颜色 969 {offset: 0, color: '#69c818'}, // 顶部颜色
939 // {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色 970 // {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色
940 ] 971 ]
941 }, 972 },
942 }, 973 },
943 barWidth: '40%' 974 barWidth: '30%'
944 }, 975 },
945 { 976 {
946 name: `${Year1}合同待签`, 977 name: `${Year1}合同待签`,
...@@ -962,7 +993,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -962,7 +993,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
962 ] 993 ]
963 }, 994 },
964 }, 995 },
965 barWidth: '40%' 996 barWidth: '30%'
966 }, 997 },
967 998
968 { 999 {
...@@ -980,12 +1011,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -980,12 +1011,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
980 type: 'linear', 1011 type: 'linear',
981 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1012 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
982 colorStops: [ 1013 colorStops: [
983 {offset: 0, color: 'rgba(109, 217, 255,1)'}, 1014 {offset: 0, color: '#2FA9FF'},
984 // {offset: 1, color: 'rgba(76, 175, 80, 1)'} 1015 // {offset: 1, color: 'rgba(76, 175, 80, 1)'}
985 ] 1016 ]
986 }, 1017 },
987 }, 1018 },
988 barWidth: '40%' 1019 barWidth: '30%'
989 }, 1020 },
990 { 1021 {
991 name: `${Year2}收费单待签`, 1022 name: `${Year2}收费单待签`,
...@@ -1002,7 +1033,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -1002,7 +1033,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
1002 type: 'linear', 1033 type: 'linear',
1003 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1034 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1004 colorStops: [ 1035 colorStops: [
1005 {offset: 0, color: 'rgba(47, 169, 254, 1)'}, 1036 {offset: 0, color: '#187CEC'},
1006 // {offset: 1, color: 'rgba(96, 181, 255, 1)'} 1037 // {offset: 1, color: 'rgba(96, 181, 255, 1)'}
1007 1038
1008 // {offset: 0, color: 'rgba(142, 36, 170, 1)'}, 1039 // {offset: 0, color: 'rgba(142, 36, 170, 1)'},
...@@ -1013,7 +1044,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -1013,7 +1044,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
1013 ] 1044 ]
1014 }, 1045 },
1015 }, 1046 },
1016 barWidth: '40%' 1047 barWidth: '30%'
1017 }, 1048 },
1018 { 1049 {
1019 name: `${Year2}合同待签`, 1050 name: `${Year2}合同待签`,
...@@ -1037,7 +1068,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -1037,7 +1068,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
1037 ] 1068 ]
1038 }, 1069 },
1039 }, 1070 },
1040 barWidth: '40%' 1071 barWidth: '30%'
1041 }, 1072 },
1042 ] 1073 ]
1043 } 1074 }
...@@ -1179,11 +1210,12 @@ onUnmounted(() => { ...@@ -1179,11 +1210,12 @@ onUnmounted(() => {
1179 :deep(.el-select__placeholder) { 1210 :deep(.el-select__placeholder) {
1180 font-family: PingFang SC, serif; 1211 font-family: PingFang SC, serif;
1181 font-weight: 500; 1212 font-weight: 500;
1182 color: #13C1F4; 1213 color: #fff;
1183 text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41); 1214 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
1184 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%); 1215 //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
1216 background-color: rgb(33, 123, 188, .1); /* 背景色 */
1185 -webkit-background-clip: text; 1217 -webkit-background-clip: text;
1186 -webkit-text-fill-color: transparent 1218 //-webkit-text-fill-color: transparent
1187 } 1219 }
1188 1220
1189 :deep(.el-tag--info) { 1221 :deep(.el-tag--info) {
......
src/viewsPc/vip/rightPage.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <div class="chartCard"> 3 <div class="chartCard">
4 <div class="title">开票情况</div> 4 <div class="title">开票情况</div>
5 <div class="po_right" style="justify-content: end"> 5 <div class="po_right" style="justify-content: end">
6 <div class="itemBox"> 6 <div class="itemBox" v-if="myType">
7 <el-select 7 <el-select
8 v-model="select7" 8 v-model="select7"
9 class="select" 9 class="select"
...@@ -23,19 +23,18 @@ ...@@ -23,19 +23,18 @@
23 <div class="chartCard mt30"> 23 <div class="chartCard mt30">
24 <div class="title">回款情况</div> 24 <div class="title">回款情况</div>
25 <div class="po_right" style="justify-content: end;"> 25 <div class="po_right" style="justify-content: end;">
26 <div class="itemBox" style="margin-right: 5px;width: 45%;"> 26 <div class="itemBox" style="margin-right: 5px;width: 45%;" v-if="myType">
27 <el-select 27 <el-select
28 v-model="type8" 28 v-model="type8"
29 class="select" 29 class="select"
30 placeholder="全部基地" 30 placeholder="全部基地"
31 collapse-tags 31 collapse-tags
32 multiple
33 size="small" 32 size="small"
34 @change="handelType8"> 33 @change="handelType8">
35 <el-option v-for="(item,index) in monthList" :label="item" :value="index"/> 34 <el-option v-for="(item,index) in monthList" :label="item" :value="index"/>
36 </el-select> 35 </el-select>
37 </div> 36 </div>
38 <div class="itemBox"> 37 <div class="itemBox" v-if="myType">
39 <el-select 38 <el-select
40 v-model="list8Y" 39 v-model="list8Y"
41 class="select" 40 class="select"
...@@ -76,18 +75,23 @@ const props = defineProps({ ...@@ -76,18 +75,23 @@ const props = defineProps({
76 type: Object, 75 type: Object,
77 default: () => { 76 default: () => {
78 } 77 }
78 },
79 type: {
80 type: Boolean,
81 default: false
79 } 82 }
80 }) 83 })
81 84
82 const url = computed(() => props.url) 85 const url = computed(() => props.url)
83 const obj = computed(() => props.obj) 86 const obj = computed(() => props.obj)
87 const myType = computed(() => props.type)
84 const zhuRef = ref(null) 88 const zhuRef = ref(null)
85 const lineRef = ref(null) 89 const lineRef = ref(null)
86 const overdueRef = ref(null) 90 const overdueRef = ref(null)
87 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 91 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
88 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 92 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
89 const radioA = ref('month') 93 const radioA = ref('month')
90 const monthList = ref(["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]) 94 const monthList = ref(["累计","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"])
91 95
92 const itemStyleList = ref([ 96 const itemStyleList = ref([
93 { 97 {
...@@ -184,9 +188,10 @@ const itemStyleList = ref([ ...@@ -184,9 +188,10 @@ const itemStyleList = ref([
184 188
185 const list9 = ref([]) 189 const list9 = ref([])
186 const list8Y = ref([]) 190 const list8Y = ref([])
187 const type8 = ref([]) 191 const type8 = ref(0)
188 const month8 = ref([]) 192 const month8 = ref([])
189 const year8 = ref([]) 193 const year8 = ref([])
194 const nowYear = new Date().getFullYear()
190 const list8 = ref([ 195 const list8 = ref([
191 { 196 {
192 BASE: '上海分公司1', 197 BASE: '上海分公司1',
...@@ -293,40 +298,61 @@ async function handelGetYS007() { ...@@ -293,40 +298,61 @@ async function handelGetYS007() {
293 const res = await getYS007(url.value, obj.value) 298 const res = await getYS007(url.value, obj.value)
294 list7.value = res.data.list 299 list7.value = res.data.list
295 BC.value = res.data.BC * 100 || 0 300 BC.value = res.data.BC * 100 || 0
296 list7.value.sort((a, b) => a.EXECOST - b.EXECOST); 301 let firstVal = ''
297 list7Y.value = [] 302 list7Y.value = []
298 select7.value = [] 303 select7.value = []
299 let arr1 = [] 304 let arr1 = []
300 let arr2 = [] 305 let arr2 = []
301 let arr3 = [] 306 let arr3 = []
302 307
303 for (const val of list7.value) { 308 if (myType.value) {
304 select7.value.push(val.BASEJC) 309 list7.value.sort((a, b) => a.EXECOST - b.EXECOST);
305 list7Y.value.push({ 310 for (const val of list7.value) {
306 value: val.BASEJC, 311 select7.value.push(val.BASEJC)
307 name: (val.EXERATIO * 100).toFixed(), 312 list7Y.value.push({
308 }) 313 value: val.BASEJC,
309 arr1.push({ 314 name: (val.EXERATIO * 100).toFixed(),
310 value: Math.round(val.PLANCOST / 10000), 315 })
311 // itemStyle: val.EXERATIO * 100 >= BC.value ? color1 : color3, 316 arr1.push({
312 itemStyle: color4, 317 value: Math.round(val.PLANCOST / 10000),
313 name: (val.EXERATIO * 100).toFixed() + '%', 318 // itemStyle: val.EXERATIO * 100 >= BC.value ? color1 : color3,
314 }) 319 itemStyle: color4,
315 arr2.push({ 320 name: (val.EXERATIO * 100).toFixed() + '%',
316 value: Math.round(val.EXECOST / 10000), 321 })
317 name: (val.EXERATIO * 100).toFixed() + '%', 322 arr2.push({
318 // itemStyle: val.EXERATIO * 100 >= BC.value ? color2 : color4 323 value: Math.round(val.EXECOST / 10000),
319 itemStyle: color2 324 name: (val.EXERATIO * 100).toFixed() + '%',
320 }) 325 // itemStyle: val.EXERATIO * 100 >= BC.value ? color2 : color4
321 arr3.push(val.EXERATIO) 326 itemStyle: color2
322 } 327 })
323 328 arr3.push(val.EXERATIO)
324 const firstAbove = list7Y.value.find(v => v.name >= BC.value); 329 }
325 let firstVal = '' 330 const firstAbove = list7Y.value.find(v => v.name >= BC.value);
326 if (firstAbove && firstAbove.value) { 331 if (firstAbove && firstAbove.value) {
327 firstVal = firstAbove.value 332 firstVal = firstAbove.value
333 } else {
334 firstVal = ''
335 }
328 } else { 336 } else {
329 firstVal = '' 337 for (const val of list7.value) {
338 list7Y.value.push({
339 name: (val.EXERATIO * 100).toFixed(),
340 value: val.MONTH,
341 })
342 arr1.push({
343 value: Math.round(val.PLANCOST / 10000),
344 // itemStyle: val.EXERATIO * 100 >= BC.value ? color1 : color3,
345 itemStyle: color4,
346 name: (val.EXERATIO * 100).toFixed() + '%',
347 })
348 arr2.push({
349 value: Math.round(val.EXECOST / 10000),
350 name: (val.EXERATIO * 100).toFixed() + '%',
351 // itemStyle: val.EXERATIO * 100 >= BC.value ? color2 : color4
352 itemStyle: color2
353 })
354 arr3.push(val.EXERATIO)
355 }
330 } 356 }
331 setA(list7Y.value, arr1, arr2, arr3, firstVal, BC.value) 357 setA(list7Y.value, arr1, arr2, arr3, firstVal, BC.value)
332 } 358 }
...@@ -368,33 +394,41 @@ function handelSelect7() { ...@@ -368,33 +394,41 @@ function handelSelect7() {
368 394
369 async function handelGetYS008() { 395 async function handelGetYS008() {
370 const res = await getYS008(url.value, obj.value) 396 const res = await getYS008(url.value, obj.value)
371 let nowMonth = new Date().getMonth()
372 for (let i = 0;i <= nowMonth;i++) {
373 type8.value.push(i)
374 }
375 list8.value = res.data.list || [] 397 list8.value = res.data.list || []
398 let arr,arr2
376 list8Y.value = [] 399 list8Y.value = []
377 month8.value = [] 400 month8.value = []
378 year8.value = [] 401 year8.value = []
379 list8.value.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH); 402 if (myType.value) {
380 for (let i = 0; i < list8.value.length; i++) { 403 list8.value.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH);
381 let monthValue = [] 404 for (let i = 0; i < list8.value.length; i++) {
382 list8.value[i].itemStyle = itemStyleList.value[i % itemStyleList.value.length] 405 let monthValue = []
383 list8Y.value.push(list8.value[i].BASEJC) 406 list8.value[i].itemStyle = itemStyleList.value[i % itemStyleList.value.length]
384 month8.value.push({ 407 list8Y.value.push(list8.value[i].BASEJC)
385 value: list8.value[i].HKQKTOTAL / 10000, 408 month8.value.push({
386 itemStyle: list8.value[i].itemStyle, 409 value: list8.value[i].HKQKTOTAL / 10000,
387 }) 410 itemStyle: list8.value[i].itemStyle,
388 for (let j=1;j<13;j++) { 411 })
389 monthValue.push(list8.value[i]["HKQKMONTH"+j]/10000) 412 for (let j=1;j<13;j++) {
413 monthValue.push(list8.value[i]["HKQKMONTH"+j]/10000)
414 }
415 year8.value.push({
416 value: monthValue,
417 itemStyle: list8.value[i].itemStyle,
418 })
390 } 419 }
391 year8.value.push({ 420 arr = month8.value
392 value: monthValue, 421 setB(list8Y.value, arr)
393 itemStyle: list8.value[i].itemStyle, 422 } else {
394 }) 423 let nowValue = []
424 let lastValue = []
425 for (let i=1;i<13;i++) {
426 nowValue.push(list8.value[0]["HKQKMONTH"+i]/10000)
427 lastValue.push((list8.value[0].lastHKQK[i-1].COST||0)/10000)
428 }
429 setB(list8Y.value, nowValue,lastValue)
395 } 430 }
396 let arr = month8.value 431
397 setB(list8Y.value, arr)
398 } 432 }
399 433
400 function handelSelect8() { 434 function handelSelect8() {
...@@ -425,19 +459,20 @@ function handelSelect8() { ...@@ -425,19 +459,20 @@ function handelSelect8() {
425 function handelType8() { 459 function handelType8() {
426 // let arrc = type8.value == '2' ? month8.value : year8.value 460 // let arrc = type8.value == '2' ? month8.value : year8.value
427 let myData = []; 461 let myData = [];
428 for (let i=0;i<year8.value.length;i++) { 462 if (type8.value != '0') {
429 let sum = 0 463 for (let i=0;i<year8.value.length;i++) {
430 for (let j=0;j<type8.value.length;j++) { 464 // let sum = 0
431 sum += year8.value[i].value[type8.value[j]] 465 // for (let j=0;j<type8.value.length;j++) {
466 // sum += year8.value[i].value[type8.value[j]]
467 // }
468 myData.push({
469 value:year8.value[i].value[type8.value-1],
470 itemStyle:year8.value[i].itemStyle
471 })
432 } 472 }
433 myData.push({
434 value:sum,
435 itemStyle:year8.value[i].itemStyle
436 })
437 } 473 }
438 474
439 let arrc = type8.value.length>0 ? myData : month8.value 475 let arrc = type8.value == '0' ? month8.value : myData
440
441 setB(list8Y.value, arrc) 476 setB(list8Y.value, arrc)
442 } 477 }
443 478
...@@ -448,15 +483,29 @@ async function handelGetYS009() { ...@@ -448,15 +483,29 @@ async function handelGetYS009() {
448 let arr1 = [] 483 let arr1 = []
449 let arr2 = [] 484 let arr2 = []
450 let arr3 = [] 485 let arr3 = []
451 for (const val of list9.value) { 486
452 arrY.push(val.BASEJC) 487 if (myType.value) {
453 arr1.push(Math.round(val.WKPCOSTONE / 10000)) 488 for (const val of list9.value) {
454 arr2.push(Math.round(val.WKPCOSTTWO / 10000)) 489 arrY.push(val.BASEJC)
455 arr3.push({ 490 arr1.push(Math.round(val.WKPCOSTONE / 10000))
456 value: Math.round(val.WKPCOSTTHREE / 10000), 491 arr2.push(Math.round(val.WKPCOSTTWO / 10000))
457 info: val.YQWELLINFO 492 arr3.push({
458 }) 493 value: Math.round(val.WKPCOSTTHREE / 10000),
494 info: val.YQWELLINFO
495 })
496 }
497 } else {
498 for (const val of list9.value) {
499 arrY.push(val.MONTH)
500 arr1.push(Math.round(val.WKPCOSTONE / 10000))
501 arr2.push(Math.round(val.WKPCOSTTWO / 10000))
502 arr3.push({
503 value: Math.round(val.WKPCOSTTHREE / 10000),
504 info: val.YQWELLINFO
505 })
506 }
459 } 507 }
508
460 setC(arrY, arr1, arr2, arr3) 509 setC(arrY, arr1, arr2, arr3)
461 } 510 }
462 511
...@@ -468,393 +517,940 @@ const getdata = () => { ...@@ -468,393 +517,940 @@ const getdata = () => {
468 517
469 const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { 518 const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
470 chartA = echarts.init(zhuRef.value) 519 chartA = echarts.init(zhuRef.value)
471 const option = { 520 let option
472 tooltip: { 521 if (myType.value) {
473 trigger: 'axis', 522 option = {
474 axisPointer: { 523 tooltip: {
475 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' 524 trigger: 'axis',
476 }, 525 axisPointer: {
477 valueFormatter: (value) => value + '万', 526 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
478 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色 527 },
479 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色 528 valueFormatter: (value) => value + '万',
480 borderWidth: 1, // 边框宽度 529 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
481 textStyle: { 530 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
482 color: '#fff', // 文字颜色 531 borderWidth: 1, // 边框宽度
483 fontSize: 12, // 文字大小 532 textStyle: {
484 }, 533 color: '#fff', // 文字颜色
485 }, 534 fontSize: 12, // 文字大小
486 legend: { 535 },
487 top: "3%",
488 textStyle: {
489 color: '#FFF'
490 }, 536 },
491 }, 537 legend: {
492 grid: { 538 top: "3%",
493 top: "30", 539 textStyle: {
494 left: '3%', 540 color: '#FFF'
495 right: '4%', 541 },
496 bottom: '3%',
497 containLabel: true
498 },
499 xAxis: {
500 type: 'value',
501 axisLabel: {
502 formatter: '{value}' // 在数值后添加单位
503 }, 542 },
504 axisLine: { 543 grid: {
505 show: true, 544 top: "15%",
506 lineStyle: { 545 left: '5%',
507 color: '#fff', 546 right: '4%',
508 width: 2, 547 bottom: '3%',
509 type: 'solid' 548 containLabel: true
510 }
511 }, 549 },
512 splitLine: { 550 xAxis: {
513 show: true, // 默认false，需显式开启 551 type: 'value',
514 lineStyle: {
515 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
516 }
517 }
518 },
519 // dataZoom: [
520 // {
521 // type: 'slider',
522 // show: true,
523 // yAxisIndex: [0],
524 // start: 0,
525 // end: 6, //初始值10条数据
526 // // filterMode: 'filter'
527 // },
528 // {
529 // type: 'inside',
530 // yAxisIndex: [0],
531 // start: 0,
532 // end: 6, //初始值10条数据
533 // }
534 // ],
535 yAxis: [
536 {
537 type: 'category',
538 data: arrY,
539 offset: 10,
540 axisLabel: { 552 axisLabel: {
541 // formatter: '{value}w' // 在数值后添加单位 553 formatter: '{value}' // 在数值后添加单位
542 interval: 0,
543 fontSize: 10,
544 }, 554 },
545 axisLine: { 555 axisLine: {
546 show: true, 556 show: true,
547 lineStyle: { 557 lineStyle: {
548 color: 'rgba(255, 255, 255, 1)', 558 color: '#fff',
549 width: 1, 559 width: 2,
550 type: 'solid' 560 type: 'solid'
551 } 561 }
552 }, 562 },
553 563 splitLine: {
554 }, 564 show: true, // 默认false，需显式开启
555 ], 565 lineStyle: {
556 series: [ 566 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
557 {
558 name: '计划金额',
559 type: 'bar',
560 datasetIndex: 1,
561 barGap: 0,
562 barMaxWidth: 60, // 设置柱子的最大宽度为40px
563
564 label: {
565 show: false,
566 position: 'right',
567 formatter: function (v1) {
568 return v1.data.name
569 // 计算总数
570 // const total = params.value + /* 其他系列的值 */;
571 // 计算百分比
572 // const percent = ((params.value / total) * 100).toFixed(1);
573 // return `${percent}%`;
574 } 567 }
568 }
569 },
570 // dataZoom: [
571 // {
572 // type: 'slider',
573 // show: true,
574 // yAxisIndex: [0],
575 // start: 0,
576 // end: 6, //初始值10条数据
577 // // filterMode: 'filter'
578 // },
579 // {
580 // type: 'inside',
581 // yAxisIndex: [0],
582 // start: 0,
583 // end: 6, //初始值10条数据
584 // }
585 // ],
586 yAxis: [
587 {
588 type: 'category',
589 data: arrY,
590 axisLabel: {
591 // formatter: '{value}w' // 在数值后添加单位
592 interval: 0,
593 fontSize: 10,
594 },
595 axisLine: {
596 show: true,
597 lineStyle: {
598 color: 'rgba(255, 255, 255, 1)',
599 width: 1,
600 type: 'solid'
601 }
602 },
603
575 }, 604 },
576 emphasis: { 605 ],
577 focus: 'series' 606 series: [
578 }, 607 {
579 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320], 608 name: '计划金额',
580 data: arr1, 609 type: 'bar',
581 itemStyle: { 610 datasetIndex: 1,
582 color: { 611 barGap: 0,
583 type: 'linear', 612 barMaxWidth: 60, // 设置柱子的最大宽度为40px
584 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 613
585 colorStops: [ 614 label: {
586 {offset: 0, color: 'rgba(0, 255, 190, 1)'}, // 顶部颜色 615 show: false,
587 {offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色 616 position: 'right',
588 ], 617 formatter: function (v1) {
618 return v1.data.name
619 // 计算总数
620 // const total = params.value + /* 其他系列的值 */;
621 // 计算百分比
622 // const percent = ((params.value / total) * 100).toFixed(1);
623 // return `${percent}%`;
624 }
625 },
626 emphasis: {
627 focus: 'series'
628 },
629 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
630 data: arr1,
631 itemStyle: {
632 color: {
633 type: 'linear',
634 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
635 colorStops: [
636 {offset: 0, color: 'rgba(0, 255, 190, 1)'}, // 顶部颜色
637 {offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
638 ],
639 },
640 // 设置柱状图顶部圆角（半圆形）
641 borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
589 }, 642 },
590 }, 643 },
591 }, 644 {
592 { 645 name: '执行金额',
593 name: '执行金额', 646 type: 'bar',
594 type: 'bar', 647 barMaxWidth: 60, // 设置柱子的最大宽度为40px
595 barMaxWidth: 60, // 设置柱子的最大宽度为40px 648
596 649 label: {
597 label: { 650 show: true,
598 show: true, 651 position: 'right',
599 position: 'right', 652 textStyle: {
600 textStyle: { 653 color: 'rgba(255, 255, 255, 1)',
601 color: 'rgba(255, 255, 255, 1)', 654 },
655 formatter: function (v1) {
656 return v1.data.name
657 // 计算总数
658 // const total = params.value + /* 其他系列的值 */;
659 // 计算百分比
660 // const percent = ((params.value / total) * 100).toFixed(1);
661 // return `${percent}%`;
662 }
663 },
664 emphasis: {
665 focus: 'series'
602 }, 666 },
603 formatter: function (v1) { 667 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
604 return v1.data.name 668 data: arr2,
605 // 计算总数 669 itemStyle: {
606 // const total = params.value + /* 其他系列的值 */; 670 color: {
607 // 计算百分比 671 type: 'linear',
608 // const percent = ((params.value / total) * 100).toFixed(1); 672 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
609 // return `${percent}%`; 673 colorStops: [
674 {offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
675 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
676 ],
677 },
678 // 设置柱状图顶部圆角（半圆形）
679 borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
680 // borderColor: 'rgba(0, 246, 255, 1)',
681 // borderWidth: 1
682 },
683 markLine: {
684 symbol: 'none',
685 data: [
686 {
687 name: '',
688 yAxis: markLineName, // 在Y轴150的位置画垂直线
689 lineStyle: {
690 color: 'rgba(255, 252, 40, 1)',
691 type: 'dashed',
692 lineWidth: 2
693 },
694 label: {
695 formatter: BC + '%',
696 position: 'end', // 可选值: 'start', 'middle', 'end'
697 distance: [-20, 40],
698 color: "#fff"
699 }
700 }
701 ]
610 } 702 }
611 }, 703 },
612 emphasis: { 704
613 focus: 'series' 705 ],
706 }
707 } else {
708 option = {
709 tooltip: {
710 trigger: 'axis',
711 axisPointer: {
712 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
614 }, 713 },
615 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320], 714 valueFormatter: (value) => value + '万',
616 data: arr2, 715 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
617 itemStyle: { 716 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
618 color: { 717 borderWidth: 1, // 边框宽度
619 type: 'linear', 718 textStyle: {
620 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 719 color: '#fff', // 文字颜色
621 colorStops: [ 720 fontSize: 12, // 文字大小
622 {offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
623 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
624 ],
625 },
626 // borderColor: 'rgba(0, 246, 255, 1)',
627 // borderWidth: 1
628 }, 721 },
629 markLine: { 722 },
630 symbol: 'none', 723 legend: {
631 data: [ 724 top: "3%",
632 { 725 textStyle: {
633 name: '', 726 color: '#FFF'
634 yAxis: markLineName, // 在Y轴150的位置画垂直线 727 },
635 lineStyle: { 728 },
636 color: 'rgba(255, 252, 40, 1)', 729 grid: {
637 type: 'dashed', 730 top: "15%",
638 lineWidth: 2 731 left: '5%',
639 }, 732 right: '4%',
640 label: { 733 bottom: '3%',
641 formatter: BC + '%', 734 containLabel: true
642 position: 'end', // 可选值: 'start', 'middle', 'end' 735 },
643 distance: [-20, 40], 736 yAxis: {
644 color: "#fff" 737 type: 'value',
645 } 738 axisLabel: {
646 } 739 show: false,
647 ] 740 },
741 axisLine: {
742 show: false,
743 },
744 splitLine: {
745 show: true, // 默认false，需显式开启
746 lineStyle: {
747 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
748 }
648 } 749 }
649 }, 750 },
650 751 // dataZoom: [
651 ], 752 // {
753 // type: 'slider',
754 // show: true,
755 // yAxisIndex: [0],
756 // start: 0,
757 // end: 6, //初始值10条数据
758 // // filterMode: 'filter'
759 // },
760 // {
761 // type: 'inside',
762 // yAxisIndex: [0],
763 // start: 0,
764 // end: 6, //初始值10条数据
765 // }
766 // ],
767 xAxis: [
768 {
769 type: 'category',
770 data: arrY,
771 axisLabel: {
772 formatter: function(value, index) {
773 // 只显示奇数索引的标签(从0开始计数)
774 return index % 2 === 0 ? value : '';
775 },
776 interval: 0,
777 fontSize: 10,
778 },
779 axisLine: {
780 show: true,
781 lineStyle: {
782 color: 'rgba(255, 255, 255, 1)',
783 width: 1,
784 type: 'solid'
785 }
786 },
787
788 },
789 ],
790 series: [
791 {
792 name: '计划金额',
793 type: 'bar',
794 datasetIndex: 1,
795 barGap: 0,
796 barMaxWidth: 10, // 设置柱子的最大宽度为40px
797
798 label: {
799 show: false,
800 position: 'right',
801 formatter: function (v1) {
802 return v1.data.name
803 // 计算总数
804 // const total = params.value + /* 其他系列的值 */;
805 // 计算百分比
806 // const percent = ((params.value / total) * 100).toFixed(1);
807 // return `${percent}%`;
808 }
809 },
810 emphasis: {
811 focus: 'series'
812 },
813 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
814 data: arr1,
815 itemStyle: {
816 color: {
817 type: 'linear',
818 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
819 colorStops: [
820 {offset: 0, color: 'rgba(0, 255, 190, 1)'}, // 顶部颜色
821 {offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
822 ],
823 },
824 },
825 },
826 {
827 name: '执行金额',
828 type: 'bar',
829 barMaxWidth: 10, // 设置柱子的最大宽度为40px
830
831 label: {
832 show: true,
833 position: 'right',
834 textStyle: {
835 color: 'rgba(255, 255, 255, 1)',
836 },
837 formatter: function (v1) {
838 return v1.data.name
839 // 计算总数
840 // const total = params.value + /* 其他系列的值 */;
841 // 计算百分比
842 // const percent = ((params.value / total) * 100).toFixed(1);
843 // return `${percent}%`;
844 }
845 },
846 emphasis: {
847 focus: 'series'
848 },
849 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
850 data: arr2,
851 itemStyle: {
852 color: {
853 type: 'linear',
854 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
855 colorStops: [
856 {offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
857 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
858 ],
859 },
860 // borderColor: 'rgba(0, 246, 255, 1)',
861 // borderWidth: 1
862 },
863 markLine: {
864 symbol: 'none',
865 data: [
866 {
867 name: '',
868 yAxis: markLineName, // 在Y轴150的位置画垂直线
869 lineStyle: {
870 color: 'rgba(255, 252, 40, 1)',
871 type: 'dashed',
872 lineWidth: 2
873 },
874 label: {
875 formatter: BC + '%',
876 position: 'end', // 可选值: 'start', 'middle', 'end'
877 distance: [-20, 40],
878 color: "#fff"
879 }
880 }
881 ]
882 }
883 },
884
885 ],
886 }
652 } 887 }
888
653 889
654 chartA.setOption(option) 890 chartA.setOption(option)
655 // autoHover(chartA, option, 0, 2000) 891 // autoHover(chartA, option, 0, 2000)
656 } 892 }
657 const setB = (arrY, arr1, arr2) => { 893 const setB = (arrY, arr1, arr2) => {
658 chartB = echarts.init(lineRef.value) 894 chartB = echarts.init(lineRef.value)
659 const option = { 895 let option
660 tooltip: { 896 if (myType.value) {
661 trigger: 'axis', 897 option = {
662 axisPointer: { 898 tooltip: {
663 // Use axis to trigger tooltip 899 trigger: 'axis',
664 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' 900 axisPointer: {
901 // Use axis to trigger tooltip
902 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
903 },
904 valueFormatter: (value) => (value * 1).toFixed() + '万',
905 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
906 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
907 borderWidth: 1, // 边框宽度
908 textStyle: {
909 color: '#fff', // 文字颜色
910 fontSize: 12, // 文字大小
911 }
665 }, 912 },
666 valueFormatter: (value) => (value * 1).toFixed() + '万', 913 grid: {
667 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色 914 top: "15%",
668 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色 915 left: '3%',
669 borderWidth: 1, // 边框宽度 916 right: '4%',
670 textStyle: { 917 bottom: '3%',
671 color: '#fff', // 文字颜色 918 containLabel: true
672 fontSize: 12, // 文字大小
673 }
674 },
675 grid: {
676 top: "15%",
677 left: '3%',
678 right: '4%',
679 bottom: '3%',
680 containLabel: true
681 },
682 xAxis: {
683 type: 'value',
684 axisLabel: {
685 formatter: '{value}' // 在数值后添加单位
686 }, 919 },
687 axisLine: { 920 xAxis: {
688 show: true, 921 type: 'value',
689 lineStyle: { 922 axisLabel: {
690 color: '#fff', 923 formatter: '{value}' // 在数值后添加单位
691 width: 1, 924 },
692 type: 'solid' 925 axisLine: {
926 show: true,
927 lineStyle: {
928 color: '#fff',
929 width: 1,
930 type: 'solid'
931 }
932 },
933 splitLine: {
934 show: true, // 默认false，需显式开启
935 lineStyle: {
936 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
937 }
693 } 938 }
694 }, 939 },
695 splitLine: { 940 yAxis: {
696 show: true, // 默认false，需显式开启 941 type: 'category',
697 lineStyle: { 942 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
698 color: 'rgba(255, 255, 255, .2)', // 绿色轴线 943 data: arrY,
944 axisLabel: {
945 // formatter: '{value}w' // 在数值后添加单位
946 interval: 0,
947 fontSize: 10,
948 },
949 axisLine: {
950 show: true,
951 lineStyle: {
952 color: '#fff',
953 width: 2,
954 type: 'solid'
955 }
956 },
957 },
958 series: [
959 {
960 name: '回款',
961 type: 'bar',
962 label: {
963 show: false
964 },
965 barMaxWidth: 60, // 设置柱子的最大宽度为40px
966
967 itemStyle: {
968 // 设置柱状图顶部圆角（半圆形）
969 borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
970 },
971 emphasis: {
972 focus: 'series'
973 },
974 // data: [
975 // {
976 // value: 320,
977 // itemStyle: {
978 // color: {
979 // type: 'linear',
980 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
981 // colorStops: [
982 // {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
983 // {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
984 // ],
985 // },
986 // }
987 // },
988 // {
989 // value: 302,
990 // itemStyle: {
991 // color: {
992 // type: 'linear',
993 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
994 // colorStops: [
995 // {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
996 // {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
997 // ],
998 // },
999 // }
1000 // },
1001 // {
1002 // value: 301,
1003 // itemStyle: {
1004 // color: {
1005 // type: 'linear',
1006 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1007 // colorStops: [
1008 // {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
1009 // {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
1010 // ],
1011 // },
1012 // }
1013 // },
1014 // {
1015 // value: 334,
1016 // itemStyle: {
1017 // color: {
1018 // type: 'linear',
1019 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1020 // colorStops: [
1021 // {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
1022 // {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
1023 // ],
1024 // },
1025 // }
1026 // },
1027 // {
1028 // value: 390,
1029 // itemStyle: {
1030 // color: {
1031 // type: 'linear',
1032 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1033 // colorStops: [
1034 // {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
1035 // {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
1036 // ],
1037 // },
1038 // }
1039 // },
1040 // {
1041 // value: 330,
1042 // itemStyle: {
1043 // color: {
1044 // type: 'linear',
1045 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1046 // colorStops: [
1047 // {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
1048 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
1049 // ],
1050 // },
1051 // }
1052 // },
1053 // {
1054 // value: 320,
1055 // itemStyle: {
1056 // color: {
1057 // type: 'linear',
1058 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1059 // colorStops: [
1060 // {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
1061 // {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
1062 // ],
1063 // },
1064 // }
1065 // },
1066 // {
1067 // value: 330,
1068 // itemStyle: {
1069 // color: {
1070 // type: 'linear',
1071 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1072 // colorStops: [
1073 // {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
1074 // {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
1075 // ],
1076 // },
1077 // }
1078 // },
1079 // {
1080 // value: 320,
1081 // itemStyle: {
1082 // color: {
1083 // type: 'linear',
1084 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1085 // colorStops: [
1086 // {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
1087 // {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
1088 // ],
1089 // },
1090 // }
1091 // }
1092 // ]
1093 data: arr1
1094 }
1095 ]
1096 }
1097 } else {
1098 option = {
1099 tooltip: {
1100 trigger: 'axis',
1101 axisPointer: {
1102 // Use axis to trigger tooltip
1103 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
1104 },
1105 valueFormatter: (value) => (value * 1).toFixed() + '万',
1106 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
1107 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
1108 borderWidth: 1, // 边框宽度
1109 textStyle: {
1110 color: '#fff', // 文字颜色
1111 fontSize: 12, // 文字大小
699 } 1112 }
700 }
701 },
702 yAxis: {
703 type: 'category',
704 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
705 data: arrY,
706 axisLabel: {
707 // formatter: '{value}w' // 在数值后添加单位
708 interval: 0,
709 fontSize: 10,
710 }, 1113 },
711 axisLine: { 1114 legend: {
712 show: true, 1115 top: "3%",
713 lineStyle: { 1116 textStyle: {
714 color: '#fff', 1117 color: '#FFF'
715 width: 2, 1118 },
716 type: 'solid' 1119 },
1120 grid: {
1121 top: "15%",
1122 left: '3%',
1123 right: '4%',
1124 bottom: '3%',
1125 containLabel: true
1126 },
1127 yAxis: {
1128 type: 'value',
1129 axisLabel: {
1130 show: false,
1131 },
1132 axisLine: {
1133 show: false,
1134 },
1135 splitLine: {
1136 show: true, // 默认false，需显式开启
1137 lineStyle: {
1138 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
1139 }
717 } 1140 }
718 }, 1141 },
719 }, 1142 xAxis: {
720 series: [ 1143 type: 'category',
721 { 1144 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
722 name: '回款', 1145 data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
723 type: 'bar', 1146 axisLabel: {
724 label: { 1147 formatter: function(value, index) {
725 show: false 1148 // 只显示奇数索引的标签(从0开始计数)
1149 return index % 2 === 0 ? value : '';
1150 },
1151 interval: 0,
1152 fontSize: 10,
726 }, 1153 },
727 barMaxWidth: 60, // 设置柱子的最大宽度为40px 1154 axisLine: {
728 1155 show: true,
729 itemStyle: { 1156 lineStyle: {
730 // 设置柱状图顶部圆角（半圆形） 1157 color: '#fff',
731 borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下 1158 width: 2,
1159 type: 'solid'
1160 }
732 }, 1161 },
733 emphasis: { 1162 },
734 focus: 'series' 1163 series: [
1164 {
1165 name: nowYear,
1166 type: 'bar',
1167 label: {
1168 show: false
1169 },
1170 barMaxWidth: 20, // 设置柱子的最大宽度为40px
1171 data: arr1,
1172 itemStyle: {
1173 color: {
1174 type: 'linear',
1175 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1176 colorStops: [
1177 {offset: 0, color: 'rgba(0, 200, 234,1 )'}, // 顶部颜色
1178 {offset: 1, color: 'rgba(7, 105, 132,1 )'} // 底部颜色
1179 ]
1180 },
1181 // 设置柱状图顶部圆角（半圆形）
1182 // borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
1183 },
1184 emphasis: {
1185 focus: 'series'
1186 },
1187 // data: [
1188 // {
1189 // value: 320,
1190 // itemStyle: {
1191 // color: {
1192 // type: 'linear',
1193 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1194 // colorStops: [
1195 // {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
1196 // {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
1197 // ],
1198 // },
1199 // }
1200 // },
1201 // {
1202 // value: 302,
1203 // itemStyle: {
1204 // color: {
1205 // type: 'linear',
1206 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1207 // colorStops: [
1208 // {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
1209 // {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
1210 // ],
1211 // },
1212 // }
1213 // },
1214 // {
1215 // value: 301,
1216 // itemStyle: {
1217 // color: {
1218 // type: 'linear',
1219 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1220 // colorStops: [
1221 // {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
1222 // {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
1223 // ],
1224 // },
1225 // }
1226 // },
1227 // {
1228 // value: 334,
1229 // itemStyle: {
1230 // color: {
1231 // type: 'linear',
1232 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1233 // colorStops: [
1234 // {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
1235 // {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
1236 // ],
1237 // },
1238 // }
1239 // },
1240 // {
1241 // value: 390,
1242 // itemStyle: {
1243 // color: {
1244 // type: 'linear',
1245 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1246 // colorStops: [
1247 // {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
1248 // {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
1249 // ],
1250 // },
1251 // }
1252 // },
1253 // {
1254 // value: 330,
1255 // itemStyle: {
1256 // color: {
1257 // type: 'linear',
1258 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1259 // colorStops: [
1260 // {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
1261 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
1262 // ],
1263 // },
1264 // }
1265 // },
1266 // {
1267 // value: 320,
1268 // itemStyle: {
1269 // color: {
1270 // type: 'linear',
1271 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1272 // colorStops: [
1273 // {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
1274 // {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
1275 // ],
1276 // },
1277 // }
1278 // },
1279 // {
1280 // value: 330,
1281 // itemStyle: {
1282 // color: {
1283 // type: 'linear',
1284 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1285 // colorStops: [
1286 // {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
1287 // {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
1288 // ],
1289 // },
1290 // }
1291 // },
1292 // {
1293 // value: 320,
1294 // itemStyle: {
1295 // color: {
1296 // type: 'linear',
1297 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1298 // colorStops: [
1299 // {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
1300 // {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
1301 // ],
1302 // },
1303 // }
1304 // }
1305 // ]
1306
735 }, 1307 },
736 // data: [ 1308 {
737 // { 1309 name: nowYear-1,
738 // value: 320, 1310 type: 'bar',
739 // itemStyle: { 1311 label: {
740 // color: { 1312 show: false
741 // type: 'linear', 1313 },
742 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1314 barMaxWidth: 20, // 设置柱子的最大宽度为40px
743 // colorStops: [ 1315
744 // {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色 1316 itemStyle: {
745 // {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色 1317 color: {
746 // ], 1318 type: 'linear',
747 // }, 1319 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
748 // } 1320 colorStops: [
749 // }, 1321 {offset: 0, color: 'rgba(183, 133, 2,1 )'}, // 顶部颜色
750 // { 1322 {offset: 1, color: 'rgba(228, 184, 1,1 )'} // 底部颜色
751 // value: 302, 1323 ]
752 // itemStyle: { 1324 },
753 // color: { 1325 // 设置柱状图顶部圆角（半圆形）
754 // type: 'linear', 1326 // borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
755 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1327 },
756 // colorStops: [ 1328 emphasis: {
757 // {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色 1329 focus: 'series'
758 // {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色 1330 },
759 // ], 1331 // data: [
760 // }, 1332 // {
761 // } 1333 // value: 320,
762 // }, 1334 // itemStyle: {
763 // { 1335 // color: {
764 // value: 301, 1336 // type: 'linear',
765 // itemStyle: { 1337 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
766 // color: { 1338 // colorStops: [
767 // type: 'linear', 1339 // {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
768 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1340 // {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
769 // colorStops: [ 1341 // ],
770 // {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色 1342 // },
771 // {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色 1343 // }
772 // ], 1344 // },
773 // }, 1345 // {
774 // } 1346 // value: 302,
775 // }, 1347 // itemStyle: {
776 // { 1348 // color: {
777 // value: 334, 1349 // type: 'linear',
778 // itemStyle: { 1350 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
779 // color: { 1351 // colorStops: [
780 // type: 'linear', 1352 // {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
781 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1353 // {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
782 // colorStops: [ 1354 // ],
783 // {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色 1355 // },
784 // {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色 1356 // }
785 // ], 1357 // },
786 // }, 1358 // {
787 // } 1359 // value: 301,
788 // }, 1360 // itemStyle: {
789 // { 1361 // color: {
790 // value: 390, 1362 // type: 'linear',
791 // itemStyle: { 1363 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
792 // color: { 1364 // colorStops: [
793 // type: 'linear', 1365 // {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
794 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1366 // {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
795 // colorStops: [ 1367 // ],
796 // {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色 1368 // },
797 // {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色 1369 // }
798 // ], 1370 // },
799 // }, 1371 // {
800 // } 1372 // value: 334,
801 // }, 1373 // itemStyle: {
802 // { 1374 // color: {
803 // value: 330, 1375 // type: 'linear',
804 // itemStyle: { 1376 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
805 // color: { 1377 // colorStops: [
806 // type: 'linear', 1378 // {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
807 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1379 // {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
808 // colorStops: [ 1380 // ],
809 // {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色 1381 // },
810 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色 1382 // }
811 // ], 1383 // },
812 // }, 1384 // {
813 // } 1385 // value: 390,
814 // }, 1386 // itemStyle: {
815 // { 1387 // color: {
816 // value: 320, 1388 // type: 'linear',
817 // itemStyle: { 1389 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
818 // color: { 1390 // colorStops: [
819 // type: 'linear', 1391 // {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
820 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1392 // {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
821 // colorStops: [ 1393 // ],
822 // {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色 1394 // },
823 // {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色 1395 // }
824 // ], 1396 // },
825 // }, 1397 // {
826 // } 1398 // value: 330,
827 // }, 1399 // itemStyle: {
828 // { 1400 // color: {
829 // value: 330, 1401 // type: 'linear',
830 // itemStyle: { 1402 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
831 // color: { 1403 // colorStops: [
832 // type: 'linear', 1404 // {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
833 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1405 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
834 // colorStops: [ 1406 // ],
835 // {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色 1407 // },
836 // {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色 1408 // }
837 // ], 1409 // },
838 // }, 1410 // {
839 // } 1411 // value: 320,
840 // }, 1412 // itemStyle: {
841 // { 1413 // color: {
842 // value: 320, 1414 // type: 'linear',
843 // itemStyle: { 1415 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
844 // color: { 1416 // colorStops: [
845 // type: 'linear', 1417 // {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
846 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1418 // {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
847 // colorStops: [ 1419 // ],
848 // {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色 1420 // },
849 // {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色 1421 // }
850 // ], 1422 // },
851 // }, 1423 // {
852 // } 1424 // value: 330,
853 // } 1425 // itemStyle: {
854 // ] 1426 // color: {
855 data: arr1 1427 // type: 'linear',
856 } 1428 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
857 ] 1429 // colorStops: [
1430 // {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
1431 // {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
1432 // ],
1433 // },
1434 // }
1435 // },
1436 // {
1437 // value: 320,
1438 // itemStyle: {
1439 // color: {
1440 // type: 'linear',
1441 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1442 // colorStops: [
1443 // {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
1444 // {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
1445 // ],
1446 // },
1447 // }
1448 // }
1449 // ]
1450 data: arr2
1451 }
1452 ]
1453 }
858 } 1454 }
859 chartB.setOption(option) 1455 chartB.setOption(option)
860 // autoHover(chartB, option, 0, 2000) 1456 // autoHover(chartB, option, 0, 2000)
...@@ -909,6 +1505,13 @@ const setC = (arry, arr1, arr2, arr3) => { ...@@ -909,6 +1505,13 @@ const setC = (arry, arr1, arr2, arr3) => {
909 // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 1505 // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
910 data: arry, 1506 data: arry,
911 axisLabel: { 1507 axisLabel: {
1508 formatter: function(value, index) {
1509 // 只显示奇数索引的标签(从0开始计数)
1510 if (myType.value) {
1511 return value;
1512 }
1513 return index % 2 === 0 ? value : ''
1514 },
912 interval: 0, 1515 interval: 0,
913 // rotate: 45, 1516 // rotate: 45,
914 fontSize: 10, 1517 fontSize: 10,
...@@ -1150,11 +1753,12 @@ onUnmounted(() => { ...@@ -1150,11 +1753,12 @@ onUnmounted(() => {
1150 :deep(.el-select__placeholder) { 1753 :deep(.el-select__placeholder) {
1151 font-family: PingFang SC, serif; 1754 font-family: PingFang SC, serif;
1152 font-weight: 500; 1755 font-weight: 500;
1153 color: #13C1F4; 1756 color: #fff;
1154 text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41); 1757 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
1155 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%); 1758 //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
1759 background-color: rgb(33, 123, 188, .1); /* 背景色 */
1156 -webkit-background-clip: text; 1760 -webkit-background-clip: text;
1157 -webkit-text-fill-color: transparent 1761 //-webkit-text-fill-color: transparent
1158 } 1762 }
1159 1763
1160 :deep(.el-tag--info) { 1764 :deep(.el-tag--info) {
......
src/viewsPc/vip/scrollingData.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <span/> {{ item }} 5 <span/> {{ item }}
6 </div> 6 </div>
7 <!-- 复制一份数据实现无缝滚动 --> 7 <!-- 复制一份数据实现无缝滚动 -->
8 <div v-for="(item, index) in list" :key="`copy-${index}`" class="scrolling-item"> 8 <div v-if="list.length > 1" v-for="(item, index) in list" :key="`copy-${index}`" class="scrolling-item">
9 <span/> {{ item }} 9 <span/> {{ item }}
10 </div> 10 </div>
11 </div> 11 </div>
...@@ -51,22 +51,20 @@ const initScroll = () => { ...@@ -51,22 +51,20 @@ const initScroll = () => {
51 } 51 }
52 // 重置位置到第一条数据 52 // 重置位置到第一条数据
53 offset.value = -props.speed-0.1; 53 offset.value = -props.speed-0.1;
54 scrollInterval2.value = setInterval(()=> { 54
55 // 设置定时器 55 scrollInterval.value = setInterval(() => {
56 scrollInterval.value = setInterval(() => { 56 if (!isPaused.value) {
57 if (!isPaused.value) { 57 offset.value -= props.speed;
58 offset.value -= props.speed; 58 // 当滚动到内容的一半时，重置位置实现无缝滚动
59 // 当滚动到内容的一半时，重置位置实现无缝滚动 59 if (Math.abs(offset.value) >= contentHeight.value / 2) {
60 if (Math.abs(offset.value) >= contentHeight.value / 2) { 60 offset.value += contentHeight.value / 2;
61 offset.value += contentHeight.value / 2;
62 }
63 }
64 if (offset.value>=(-props.speed)) {
65 console.log("1111111111111111111111111")
66 clearInterval(scrollInterval.value);
67 } 61 }
68 }, 20); 62 }
69 },10000) 63 if (offset.value>=(-props.speed)) {
64 clearInterval(scrollInterval.value);
65 setTimeout(initScroll,10000)
66 }
67 }, 20);
70 68
71 }; 69 };
72 70
...@@ -106,9 +104,6 @@ onUnmounted(() => { ...@@ -106,9 +104,6 @@ onUnmounted(() => {
106 if (scrollInterval.value) { 104 if (scrollInterval.value) {
107 clearInterval(scrollInterval.value); 105 clearInterval(scrollInterval.value);
108 } 106 }
109 if (scrollInterval2.value) {
110 clearInterval(scrollInterval2.value);
111 }
112 }); 107 });
113 </script> 108 </script>
114 109
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!