Skip to content

杨炀 / dangan_dataV

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

大屏初稿

1 parent 787223b9
Inline Side-by-side
Showing 5 changed files with 783 additions and 402 deletions
src/layoutPc/index.vue
...@@ -23,7 +23,7 @@ import {AppMain, AppHeader, AppBottom} from './components' ...@@ -23,7 +23,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
23 width: 100vw; 23 width: 100vw;
24 height: 100vh; 24 height: 100vh;
25 min-width: 1000px; 25 min-width: 1000px;
26 //overflow: hidden; 26 overflow: hidden;
27 //background: rgba(0,0,0,0.75) 27 //background: rgba(0,0,0,0.75)
28 background: url("@/assets/image/bg@2x.png") no-repeat top center; 28 background: url("@/assets/image/bg@2x.png") no-repeat top center;
29 background-size: 100% 100%; 29 background-size: 100% 100%;
......
src/store/modules/user.js
1 import { login, logout, getInfo, loginByPhone } from '@/api/login' 1 import {login, logout, getInfo, loginByPhone} from '@/api/login'
2 import { getToken, setToken, removeToken } from '@/utils/auth' 2 import {getToken, setToken, removeToken} from '@/utils/auth'
3 import { getMyOwnMemberInfo } from '@/api/system/userInfo.js' 3 import {getMyOwnMemberInfo} from '@/api/system/userInfo.js'
4 import { defineStore } from 'pinia' 4 import {defineStore} from 'pinia'
5 import aes from '@/utils/aes' 5 import aes from '@/utils/aes'
6 import { loginDance } from '@/apiPc/login.js' 6 import {loginDance} from '@/apiPc/login.js'
7 import { getRemindCount } from '@/api/system/user' 7 import {getRemindCount} from '@/api/system/user'
8 import { ElMessageBox } from 'element-plus' 8 import {ElMessageBox} from 'element-plus'
9 9
10 const useUserStore = defineStore( 10 const useUserStore = defineStore(
11 'user', 11 'user',
...@@ -29,10 +29,10 @@ const useUserStore = defineStore( ...@@ -29,10 +29,10 @@ const useUserStore = defineStore(
29 isExam: '1', // 是否为考点，0：是；1：否, 29 isExam: '1', // 是否为考点，0：是；1：否,
30 genFlag: '', // 是否是自动的协会 30 genFlag: '', // 是否是自动的协会
31 badge: {}, 31 badge: {},
32 reLogin: {show:false,query:{}}, 32 reLogin: {show: false, query: {}},
33 visitor: false, 33 visitor: false,
34 language: 0, 34 language: 0,
35 activeName:"5" 35 activeName: "5"
36 }), 36 }),
37 actions: { 37 actions: {
38 // 登录 38 // 登录
...@@ -101,10 +101,6 @@ const useUserStore = defineStore( ...@@ -101,10 +101,6 @@ const useUserStore = defineStore(
101 this.showPrice = ['1', '2', '3'].indexOf(this.deptType) > -1 101 this.showPrice = ['1', '2', '3'].indexOf(this.deptType) > -1
102 this.dept = user.dept 102 this.dept = user.dept
103 this.avatar = avatar 103 this.avatar = avatar
104 if (personInfo) {
105 this.perId = aes.encrypt(personInfo.perId)
106 this.personInfo = personInfo
107 }
108 resolve(res.data) 104 resolve(res.data)
109 }).catch(error => { 105 }).catch(error => {
110 reject(error) 106 reject(error)
...@@ -147,9 +143,9 @@ const useUserStore = defineStore( ...@@ -147,9 +143,9 @@ const useUserStore = defineStore(
147 }, 143 },
148 setReLogin(query) { 144 setReLogin(query) {
149 console.log(query) 145 console.log(query)
150 this.reLogin = {show:true,query:query} 146 this.reLogin = {show: true, query: query}
151 setTimeout(() => { 147 setTimeout(() => {
152 this.reLogin = {show:false,query:query} 148 this.reLogin = {show: false, query: query}
153 }, 1000) 149 }, 1000)
154 }, 150 },
155 checkAndLogin() { 151 checkAndLogin() {
...@@ -164,8 +160,8 @@ const useUserStore = defineStore( ...@@ -164,8 +160,8 @@ const useUserStore = defineStore(
164 return true 160 return true
165 } 161 }
166 }, 162 },
167 updataActiveName(v){ 163 updataActiveName(v) {
168 this.activeName=v 164 this.activeName = v
169 } 165 }
170 } 166 }
171 }) 167 })
......
src/viewsPc/vip/centerPage.vue
1 <template> 1 <template>
2 <div class="center"> 2 <div class="center">
3 3 <div ref="textRef" class="top">
4 <div class="top">
5 <div class="left"> 4 <div class="left">
6 <div class="titleTop">懂事会得分</div> 5 <div class="titleTop">懂事会得分</div>
7 <div class="titleCenter">预计得分 <span class="tex1">5</span></div> 6 <div class="titleCenter">预计得分 <span class="tex1">5</span></div>
...@@ -25,100 +24,69 @@ ...@@ -25,100 +24,69 @@
25 </div> 24 </div>
26 </div> 25 </div>
27 26
28
29 <div class="bottom"> 27 <div class="bottom">
30 <div ref="boardRef1" style="width: 100%;height: 20vh;"> 28 <div class="father">
31 看板11 29 <div style="display: flex">
30 <div class="bing" style="width: 30%">
31 <div class="bingTitle">
32 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
33 营业收入
32 </div> 34 </div>
33 <div ref="boardRef2" style="width: 100%;height: 20vh;"> 35 <div ref="bing1" style="width: 100%;height:13vh;">
34 看板11
35 </div> 36 </div>
36 <div ref="boardRef3" style="width: 100%;height: 20vh;"> 37 <div class="bingBottom">
37 看板11 38 <div>2025年营业收入</div>
39 <div>(万元)</div>
38 </div> 40 </div>
39 <div ref="boardRef4" style="width: 100%;height: 20vh;">
40 看板11
41 </div> 41 </div>
42 <div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/>
42 </div> 43 </div>
43 44
44 <!-- &lt;!&ndash; &ndash;&gt;--> 45 <hr>
45 <!-- <div class="partB">--> 46 </div>
46 <!-- <div class="q1box qqbox">--> 47 <div class="father">
47 <!-- &lt;!&ndash; 液体球&ndash;&gt;--> 48 <div style="display: flex">
48 <!-- <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>--> 49 <div class="bing" style="width: 30%">
49 <!-- <svg :height="`calc(100*100vw/1920)`" width="100%">--> 50 <div class="bingTitle">
50 <!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">--> 51 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
51 <!-- <stop offset="0%" stop-color="#03AEFD"/>--> 52 应收余额
52 <!-- <stop offset="10%" stop-color="#AEFFF3"/>--> 53 </div>
53 <!-- </linearGradient>--> 54 <div ref="bing2" style="width: 100%;height:13vh;">
54 <!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">--> 55 </div>
55 <!-- 非常满意--> 56 <div class="bingBottom">
56 <!-- </text>--> 57 <div>2025年3月前 累计应收余额</div>
57 <!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"--> 58 <div>(万元)</div>
58 <!-- text-anchor="middle" x="50%">{{ list['非常满意'] }}--> 59 </div>
59 <!-- </text>--> 60 </div>
60 <!-- </svg>--> 61 <div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/>
61 <!-- </div>--> 62 </div>
62 <!-- <div class="q2box qqbox">--> 63
63 <!-- &lt;!&ndash; 液体球&ndash;&gt;--> 64 <hr>
64 <!-- <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>--> 65 </div>
65 <!-- <svg :height="`calc(100*100vw/1920)`" width="100%">--> 66 <div class="father">
66 <!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">--> 67 <div style="display: flex">
67 <!-- <stop offset="0%" stop-color="#03AEFD"/>--> 68 <div class="bing" style="width: 30%">
68 <!-- <stop offset="10%" stop-color="#AEFFF3"/>--> 69 <div class="bingTitle">
69 <!-- </linearGradient>--> 70 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
70 <!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">--> 71 现金余额
71 <!-- 满意--> 72 </div>
72 <!-- </text>--> 73 <div ref="bing3" style="width: 100%;height:13vh;">
73 <!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"--> 74 </div>
74 <!-- text-anchor="middle" x="50%">{{ list['满意'] }}--> 75 <div class="bingBottom">
75 <!-- </text>--> 76 <div>2025年3月前 累计现金余额</div>
76 <!-- </svg>--> 77 <div>(万元)</div>
77 <!-- </div>--> 78 </div>
78 <!-- &lt;!&ndash; <div class="q3box qqbox">&ndash;&gt;--> 79 </div>
79 <!-- &lt;!&ndash; &lt;!&ndash; 液体球&ndash;&gt;&ndash;&gt;--> 80 <div ref="zhuRef3" class="zhu" style="width:70%;height: 17vh"/>
80 <!-- &lt;!&ndash; <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>&ndash;&gt;--> 81 </div>
81 <!-- &lt;!&ndash; <svg width="100%" :height="`calc(100*100vw/1920)`">&ndash;&gt;--> 82 <hr>
82 <!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;--> 83 </div>
83 <!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD"/>&ndash;&gt;--> 84 <div>
84 <!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3"/>&ndash;&gt;--> 85 <div ref="zhuRef4" style="width: 100%;height: 17vh">
85 <!-- &lt;!&ndash; </linearGradient>&ndash;&gt;--> 86 1234
86 <!-- &lt;!&ndash; <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"&ndash;&gt;--> 87 </div>
87 <!-- &lt;!&ndash; :font-size="`calc(14*100vw/1920)`">基本满意&ndash;&gt;--> 88 </div>
88 <!-- &lt;!&ndash; </text>&ndash;&gt;--> 89 </div>
89 <!-- &lt;!&ndash; <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"&ndash;&gt;-->
90 <!-- &lt;!&ndash; :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}&ndash;&gt;-->
91 <!-- &lt;!&ndash; </text>&ndash;&gt;-->
92 <!-- &lt;!&ndash; </svg>&ndash;&gt;-->
93 <!-- &lt;!&ndash; </div>&ndash;&gt;-->
94 <!-- <div class="q4box qqbox">-->
95 <!-- &lt;!&ndash; 液体球&ndash;&gt;-->
96 <!-- <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>-->
97 <!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
98 <!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
99 <!-- <stop offset="0%" stop-color="#03AEFD"/>-->
100 <!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
101 <!-- </linearGradient>-->
102 <!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
103 <!-- 不满意-->
104 <!-- </text>-->
105 <!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
106 <!-- text-anchor="middle" x="50%">{{ list['不满意'] }}-->
107 <!-- </text>-->
108 <!-- </svg>-->
109 <!-- </div>-->
110 <!-- &lt;!&ndash; <div class="q5box qqbox">&ndash;&gt;-->
111 <!-- &lt;!&ndash; <div ref="q5" style="width: 100%;height: 90px;"></div>&ndash;&gt;-->
112 <!-- &lt;!&ndash; <svg width="100%" height="100">&ndash;&gt;-->
113 <!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;-->
114 <!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD" />&ndash;&gt;-->
115 <!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3" />&ndash;&gt;-->
116 <!-- &lt;!&ndash; </linearGradient>&ndash;&gt;-->
117 <!-- &lt;!&ndash; <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>&ndash;&gt;-->
118 <!-- &lt;!&ndash; <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>&ndash;&gt;-->
119 <!-- &lt;!&ndash; </svg>&ndash;&gt;-->
120 <!-- &lt;!&ndash; </div>&ndash;&gt;-->
121 <!-- </div>-->
122 90
123 </div> 91 </div>
124 92
...@@ -126,36 +94,46 @@ ...@@ -126,36 +94,46 @@
126 </template> 94 </template>
127 95
128 <script setup> 96 <script setup>
129 import {onMounted, ref, watch} from 'vue' 97 import {autoToolTip} from "@/plugins/auto-toolTip";
130 import 'echarts-liquidfill'
131 import * as echarts from "echarts"; 98 import * as echarts from "echarts";
132 import * as api from "@/apiPc/common" 99 import * as api from "@/apiPc/common"
100 import {onMounted, ref} from 'vue'
101
102 const zhuRef1 = ref(null)
103 const zhuRef2 = ref(null)
104 const zhuRef3 = ref(null)
105 const zhuRef4 = ref(null)
106 const bing1 = ref(null)
107 const bing2 = ref(null)
108 const bing3 = ref(null)
109 const textRef = ref(null)
110
111 let chart1
112 let chart11
113 let chart2
114 let chart22
115 let chart3
116 let chart33
117 let chart44
133 118
134 const statisticStyle = ref({'color': '#fff'})
135
136 const boardRef1 = ref(null)
137 const boardRef2 = ref(null)
138 const boardRef3 = ref(null)
139 const boardRef4 = ref(null)
140
141 const q1 = ref(null)
142 const q2 = ref(null)
143 const q3 = ref(null)
144 const q4 = ref(null)
145 const q5 = ref(null)
146 const list = ref([]) 119 const list = ref([])
147 let liquid1 120
148 let liquid2
149 let liquid3
150 let liquid4
151 let liquid5
152 let total = 0 121 let total = 0
153 let intervalA = null 122 let intervalA = null
154 123
155 onMounted(() => { 124 onMounted(() => {
156 // init() 125 // init()
157 window.addEventListener('resize', handleResize); 126 window.addEventListener('resize', handleResize);
127 handelBing1()
128 handelZhu1()
129 handelBing2()
130 handelZhu2()
131 handelBing3()
132 handelZhu3()
133 handelZhu4()
158 }) 134 })
135
136
159 const init = () => { 137 const init = () => {
160 if (!intervalA) { 138 if (!intervalA) {
161 getdata() 139 getdata()
...@@ -170,104 +148,558 @@ function getdata() { ...@@ -170,104 +148,558 @@ function getdata() {
170 for (let n in list.value) { 148 for (let n in list.value) {
171 total = total + (list.value[n] || 0) 149 total = total + (list.value[n] || 0)
172 } 150 }
173 liquid1 = setQ1(q1.value, [list.value['非常满意'] / total, list.value['非常满意'] / total])
174 liquid2 = setQ1(q2.value, [list.value['满意'] / total, list.value['满意'] / total])
175 // liquid3 = setQ1(q3.value, [list.value['基本满意'] / total, list.value['基本满意'] / total])
176 liquid4 = setQ1(q4.value, [list.value['不满意'] / total, list.value['不满意'] / total])
177 // liquid5 = setQ1(q5.value, [list.value['非常不满意'] / total, list.value['非常不满意'] / total])
178 }) 151 })
179 } 152 }
180 153
181 function handleResize() { 154 function handleResize() {
182 liquid1?.resize() 155 chart1?.resize()
183 liquid2?.resize() 156 chart11?.resize()
184 // liquid3.resize() 157 chart2?.resize()
185 liquid4?.resize() 158 chart22?.resize()
186 // liquid5.resize() 159 chart3?.resize()
160 chart33?.resize()
161 chart44?.resize()
187 } 162 }
188 163
189 const setQ1 = (ref, data) => { 164 const handelBing1 = () => {
190 let dom = echarts.init(ref) 165 chart1 = echarts.init(bing1.value)
191 const option = { 166 const option = {
167 tooltip: {
168 trigger: ''
169 },
170
192 series: [ 171 series: [
193 { 172 {
194 type: 'liquidFill', 173 name: '1',
195 radius: '100%', 174 type: 'pie',
196 center: ['50%', '50%'], 175 radius: ['99%', '100%'],
197 color: [ 176 center: ['50%', '70%'],
177 label: {
178 show: false
179 },
180 itemStyle: {
181 borderWidth: 2
182 },
183 emphasis: {
184 scale: false
185 },
186 startAngle: 180,
187 endAngle: 360,
188 data: [
189 {value: 48, name: '1'},
190 {value: 1, name: '1'},
191 {value: 48, name: '1'}
192 ]
193 },
198 { 194 {
199 type: "linear", 195 name: '2',
200 x: 0, 196 type: 'pie',
201 y: 1, 197 radius: ['75%', '95%'],
202 x2: 0, 198 center: ['50%', '70%'],
203 y2: 0, 199 label: {
204 colorStops: [ 200 show: false
201 },
202 // adjust the start and end angle
203 startAngle: 180,
204 endAngle: 360,
205 emphasis: {
206 scale: false
207 },
208 data: [
209 {value: 1048, name: 'Search Engine'},
210 {value: 735, name: 'Direct'}
211 ]
212 },
205 { 213 {
206 offset: 1, 214 name: '3',
207 color: ["#2897FE"], // 0% 处的颜色 215 type: 'pie',
216 radius: ['55%', '70%'],
217 center: ['50%', '70%'],
218 label: {
219 show: true,
220 position: 'center',
221 formatter: '{b}'
222 },
223 emphasis: {
224 scale: false
225 },
226 // adjust the start and end angle
227 startAngle: 180,
228 endAngle: 360,
229 data: [
230 {value: 1048, name: '2025'},
231 {value: 735, name: '2025'}
232 ]
208 }, 233 },
209 { 234 {
210 offset: 0, 235 name: '4',
211 color: ["rgba(0,149,255,0)"], // 100% 处的颜色 236 type: 'pie',
237 radius: ['38%', '50%'],
238 center: ['50%', '70%'],
239 label: {
240 show: false
212 }, 241 },
213 ], 242 emphasis: {
214 global: false, // 缺省为 false 243 scale: false
244 },
245 // adjust the start and end angle
246 startAngle: 180,
247 endAngle: 360,
248 data: [{value: 1048, name: ''}]
249 }
250 ]
251 }
252
253 chart1.setOption(option)
254 autoHover(chart1, option, 3, 2000)
255 }
256 const handelBing2 = () => {
257 chart2 = echarts.init(bing2.value)
258 const option = {
259 tooltip: {
260 trigger: ''
261 },
262
263 series: [
264 {
265 name: '1',
266 type: 'pie',
267 radius: ['99%', '100%'],
268 center: ['50%', '70%'],
269 label: {
270 show: false
215 }, 271 },
216 ],
217 data: data, // data个数代表波浪数
218 amplitude: 5,
219 // 图形样式
220 itemStyle: { 272 itemStyle: {
221 opacity: 0.5, // 波浪的透明度 273 borderWidth: 2
222 shadowBlur: 2, // 波浪的阴影范围 274 },
223 }, 275 emphasis: {
224 backgroundStyle: { 276 scale: false
225 borderWidth: 2, 277 },
226 borderColor: 'transparent', 278 startAngle: 180,
227 color: { 279 endAngle: 360,
228 type: 'radial', 280 data: [
229 x: 0.5, 281 {value: 48, name: '1'},
230 y: 0.5, 282 {value: 1, name: '1'},
231 r: 0.5, 283 {value: 48, name: '1'}
232 colorStops: [{ 284 ]
233 offset: 0, color: 'transparent' // 0% 处的颜色 285 },
234 }, { 286 {
235 offset: 1, color: '#144C8A' // 100% 处的颜色 287 name: '2',
236 }], 288 type: 'pie',
237 global: false // 缺省为 false 289 radius: ['75%', '95%'],
290 center: ['50%', '70%'],
291 label: {
292 show: false
293 },
294 // adjust the start and end angle
295 startAngle: 180,
296 endAngle: 360,
297 emphasis: {
298 scale: false
299 },
300 data: [
301 {value: 1048, name: 'Search Engine'},
302 {value: 735, name: 'Direct'}
303 ]
304 },
305 {
306 name: '3',
307 type: 'pie',
308 radius: ['55%', '70%'],
309 center: ['50%', '70%'],
310 label: {
311 show: true,
312 position: 'center',
313 formatter: '{b}'
314 },
315 emphasis: {
316 scale: false
317 },
318 // adjust the start and end angle
319 startAngle: 180,
320 endAngle: 360,
321 data: [
322 {value: 1048, name: '2025'},
323 {value: 735, name: '2025'}
324 ]
325 },
326 ]
238 } 327 }
328
329 chart2.setOption(option)
330 autoHover(chart2, option, 2, 2000)
331 }
332 const handelBing3 = () => {
333 chart3 = echarts.init(bing3.value)
334 const option = {
335 tooltip: {
336 trigger: ''
239 }, 337 },
338
339 series: [
340 {
341 name: '1',
342 type: 'pie',
343 radius: ['99%', '100%'],
344 center: ['50%', '70%'],
345 label: {
346 show: false
347 },
348 itemStyle: {
349 borderWidth: 2
350 },
351 emphasis: {
352 scale: false
353 },
354 startAngle: 180,
355 endAngle: 360,
356 data: [
357 {value: 48, name: '1'},
358 {value: 1, name: '1'},
359 {value: 48, name: '1'}
360 ]
361 },
362 {
363 name: '2',
364 type: 'pie',
365 radius: ['75%', '95%'],
366 center: ['50%', '70%'],
367 label: {
368 show: false
369 },
370 // adjust the start and end angle
371 startAngle: 180,
372 endAngle: 360,
373 emphasis: {
374 scale: false
375 },
376 data: [
377 {value: 1048, name: 'Search Engine'},
378 {value: 735, name: 'Direct'}
379 ]
380 },
381 {
382 name: '3',
383 type: 'pie',
384 radius: ['55%', '70%'],
385 center: ['50%', '70%'],
240 label: { 386 label: {
241 show: true, 387 show: true,
388 position: 'center',
389 formatter: '{b}'
390 },
391 emphasis: {
392 scale: false
393 },
394 // adjust the start and end angle
395 startAngle: 180,
396 endAngle: 360,
397 data: [
398 {value: 1048, name: '2025'},
399 {value: 735, name: '2025'}
400 ]
401 },
402 ]
403 }
404
405 chart3.setOption(option)
406 autoHover(chart3, option, 2, 2000)
407 }
408
409 const handelZhu1 = () => {
410 chart11 = echarts.init(zhuRef1.value)
411 const option = {
412 tooltip: {
413 trigger: 'axis',
414 axisPointer: {
415 type: 'shadow'
416 }
417 },
418 legend: {
419 top: '0',
420 textStyle: {
421 color: '#FFF'
422 },
423 },
424 grid: {
425 left: '3%',
426 right: '4%',
427 bottom: '3%',
428 containLabel: true
429 },
430 xAxis: [
431 {
432 type: 'category',
433 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
434 }
435 ],
436 yAxis: [
437 {
438 type: 'value',
439 name: '单位(万)',
440 }
441 ],
442 series: [
443 {
444 name: '2025年',
445 type: 'bar',
446 emphasis: {
447 focus: 'series'
448 },
449 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
450 },
451 {
452 name: '2024年',
453 type: 'bar',
454 emphasis: {
455 focus: 'series'
456 },
457 data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
458 },
459 ]
460 }
461 chart11.setOption(option)
462 autoHover(chart11, option, 0, 2000)
463 }
464 const handelZhu2 = () => {
465 chart22 = echarts.init(zhuRef2.value)
466 const option = {
467 tooltip: {
468 trigger: 'axis',
469 axisPointer: {
470 type: 'shadow'
471 }
472 },
473 legend: {
474 top: '0',
475 textStyle: {
476 color: '#FFF'
477 },
478 },
479 grid: {
480 left: '3%',
481 right: '4%',
482 bottom: '3%',
483 containLabel: true
484 },
485 xAxis: [
486 {
487 type: 'category',
488 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
489 }
490 ],
491 yAxis: [
492 {
493 type: 'value',
494 name: '单位(万)',
495 }
496 ],
497 series: [
498 {
499 name: '2025年',
500 type: 'bar',
501 emphasis: {
502 focus: 'series'
503 },
504 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
505 },
506 {
507 name: '2024年',
508 type: 'bar',
509 emphasis: {
510 focus: 'series'
511 },
512 data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
513 },
514 ]
515 }
516 chart22.setOption(option)
517 autoHover(chart22, option, 0, 2000)
518 }
519 const handelZhu3 = () => {
520 chart33 = echarts.init(zhuRef3.value)
521 const option = {
522 color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
523 title: {
524 text: '2025年'
525 },
526 tooltip: {
527 trigger: 'axis',
528 axisPointer: {
529 type: 'cross',
530 label: {
531 backgroundColor: '#6a7985'
532 }
533 }
534 },
535 legend: {
536 data: ['2024年', '2025年',],
537 textStyle: {
538 color: "#00DDFF"
539 }
540 },
541 toolbox: {
542 feature: {
543 saveAsImage: {}
544 }
545 },
546 grid: {
547 left: '3%',
548 right: '4%',
549 bottom: '3%',
550 containLabel: true
551 },
552 xAxis: [
553 {
554 type: 'category',
555 boundaryGap: false,
556 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
557 }
558 ],
559 yAxis: [
560 {
561 type: 'value'
562 }
563 ],
564 series: [
565 {
566 name: '2024年',
567 type: 'line',
568 stack: 'Total',
569 smooth: false,
570 lineStyle: {
571 width: 0
572 },
573 showSymbol: false,
574 areaStyle: {
575 opacity: 0.5,
576 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
577 {
578 offset: 0,
579 color: 'rgb(128, 255, 165)'
580 },
581 {
582 offset: 0.3,
583 color: 'rgb(1, 191, 236)'
584 }
585 ])
586 },
587 emphasis: {
588 focus: 'series'
589 },
590 data: [140, 232, 301, 264, 200, 340, 250, 301, 264, 200, 340, 250]
591 },
592 {
593 name: '2025年',
594 type: 'line',
595 stack: 'Total',
596 smooth: false,
597 lineStyle: {
598 width: 0
599 },
600 showSymbol: false,
601 areaStyle: {
602 opacity: 0.5,
603 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
604 {
605 offset: 0,
606 color: 'rgb(0, 221, 255)'
607 },
608 {
609 offset: 0.3,
610 color: 'rgb(77, 119, 255)'
611 }
612 ])
613 },
614 emphasis: {
615 focus: 'series'
616 },
617 data: [120, 282, 211, 234, 220, 340, 310, 120, 282, 211, 234, 220]
618 },
619 ]
620 }
621 chart33.setOption(option)
622 autoHover(chart33, option, 0, 2000)
623 }
624 const handelZhu4 = () => {
625 chart44 = echarts.init(zhuRef4.value)
626 const option = {
627 tooltip: {
628 trigger: 'axis',
629 axisPointer: {
630 type: 'shadow'
631 }
632 },
633 legend: {
242 textStyle: { 634 textStyle: {
243 color: '#fff', 635 color: '#FFF'
244 shadowColor: '#000',
245 shadowBlur: 10,
246 fontSize: '2rem',
247 }, 636 },
248 formatter: (params) => {
249 return `${(params.value * 100).toFixed(2)}%`;
250 }, 637 },
638 grid: {
639 left: '3%',
640 right: '4%',
641 bottom: '3%',
642 containLabel: true
251 }, 643 },
252 outline: { 644 xAxis: [
253 show: false, 645 {
646 type: 'category',
647 stack: 'Ad',
648 data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海']
649 }
650 ],
651 yAxis: [
652 {
653 type: 'value',
654 name: '金额(万元)',
655 }
656 ],
657 series: [
658 {
659 name: '海陆',
660 type: 'bar',
661 stack: 'Ad',
662 emphasis: {
663 focus: 'series'
254 }, 664 },
665 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
255 }, 666 },
256 ] 667 ]
257 } 668 }
258 dom.setOption(option) 669 chart44.setOption(option)
259 return dom 670 autoHover(chart44, option, 0, 2000)
260 } 671 }
261 672
673 function autoHover(myChart, option, index, time) {
674 autoToolTip(myChart, option, {
675 interval: time,// 轮播间隔时间 默认2s
676 loopSeries: false,// 是否循环轮播所有序列
677 seriesIndex: index, // 第1个被轮播的序列下标
678 });
679 }
262 </script> 680 </script>
263 681
264 <style lang="scss" scoped> 682 <style lang="scss" scoped>
683 :deep(.el-radio-button--small .el-radio-button__inner) {
684 font-size: calc(12 * 100vw / 1920);
685 padding: calc(5 * 100vw / 1920) calc(11 * 100vw / 1920);
686 }
687
688
265 .center { 689 .center {
690 width: 100%;
691
692 .father {
693 position: relative;
694 }
695
266 .top { 696 .top {
267 padding-top: calc(20 * 100vw / 1920); 697 padding-top: calc(20 * 100vw / 1920);
268 display: flex; 698 display: flex;
269 justify-content: space-between; 699 justify-content: space-between;
270 align-items: center; 700 align-items: center;
701 position: relative;
702 overflow: hidden;
271 703
272 .left { 704 .left {
273 background: url("@/assets/image/box02@2x.png") no-repeat center; 705 background: url("@/assets/image/box02@2x.png") no-repeat center;
...@@ -359,8 +791,6 @@ const setQ1 = (ref, data) => { ...@@ -359,8 +791,6 @@ const setQ1 = (ref, data) => {
359 } 791 }
360 } 792 }
361 } 793 }
362
363
364 } 794 }
365 } 795 }
366 796
...@@ -368,44 +798,48 @@ const setQ1 = (ref, data) => { ...@@ -368,44 +798,48 @@ const setQ1 = (ref, data) => {
368 background: url("@/assets/image/box04@2x.png") no-repeat center; 798 background: url("@/assets/image/box04@2x.png") no-repeat center;
369 background-size: 100% 100%; 799 background-size: 100% 100%;
370 margin-top: calc(20 * 100vw / 1920); 800 margin-top: calc(20 * 100vw / 1920);
371 height: 76vh;
372 padding: calc(10 * 100vw / 1920); 801 padding: calc(10 * 100vw / 1920);
373 }
374 }
375
376
377 .partA {
378 min-height: 340px;
379 height: 70vh;
380 background: url("@/assets/img/pan.png") no-repeat bottom;
381 background-size: 100% auto;
382 position: relative; 802 position: relative;
383 } 803 overflow: hidden;
384 804
385 .gif_bg { 805 .bing {
386 width: 100%; 806 text-align: center;
387 position: absolute;
388 bottom: calc(-100 * 100vw / 1920);;
389 807
390 img { 808 .bingTitle {
391 width: 100%; 809 font-family: PingFang SC, serif;
392 transform: rotate3d(1, 0, 0, 70deg); 810 font-weight: 500;
811 font-size: calc(18 * 100vw / 1920);
812 color: #D1D6DF;
813 text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
814 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
815 -webkit-background-clip: text;
816 -webkit-text-fill-color: transparent;
817 display: flex;
818 margin-top: calc(10 * 100vw / 1920);
819
820 .titleImg {
821 display: block;
822 width: calc(50 * 100vw / 1920);
823 height: calc(20 * 100vw / 1920);
824 }
393 } 825 }
394 }
395 826
396 .partB { 827 .bingBottom {
397 display: flex; 828 position: absolute;
398 justify-content: space-around; 829 z-index: 99;
399 } 830 bottom: 0;
831 left: 0;
832 width: 30%;
400 833
401 .qqbox { 834 div {
402 width: 33%; 835 font-family: PingFang SC;
403 position: relative; 836 font-weight: 400;
404 top: calc(-20 * 100vw / 1920); 837 font-size: calc(14 * 100vw / 1920);
405 background: url("@/assets/img/q1.png") no-repeat bottom center; 838 color: #FFFFFF;
406 background-size: 70%; 839 }
840 }
841 }
842 }
407 } 843 }
408 844
409 //.q1box,.q5box{top: -60px}
410 //.q2box,.q4box{top: -30px}
411 </style> 845 </style>
......
src/viewsPc/vip/leftPage.vue
...@@ -167,8 +167,7 @@ const setA = () => { ...@@ -167,8 +167,7 @@ const setA = () => {
167 center: ['25%', '50%'], 167 center: ['25%', '50%'],
168 radius: '5%', 168 radius: '5%',
169 emphasis: { 169 emphasis: {
170 radius: '5%', 170 scale: false
171 show: false,
172 }, 171 },
173 data: [ 172 data: [
174 {value: 110, name: ''}, 173 {value: 110, name: ''},
...@@ -188,9 +187,10 @@ const setA = () => { ...@@ -188,9 +187,10 @@ const setA = () => {
188 avoidLabelOverlap: false, 187 avoidLabelOverlap: false,
189 label: { 188 label: {
190 show: false, 189 show: false,
190
191 },
191 emphasis: { 192 emphasis: {
192 show: false 193 scale: false
193 }
194 }, 194 },
195 data: [ 195 data: [
196 {value: 12, name: ''}, 196 {value: 12, name: ''},
...@@ -204,6 +204,7 @@ const setA = () => { ...@@ -204,6 +204,7 @@ const setA = () => {
204 avoidLabelOverlap: false, 204 avoidLabelOverlap: false,
205 itemStyle: { 205 itemStyle: {
206 borderWidth: 2, 206 borderWidth: 2,
207 opacity: 0.8,
207 // borderColor: '#fff', 208 // borderColor: '#fff',
208 }, 209 },
209 label: { 210 label: {
......
src/viewsPc/vip/rightPage.vue
1 <template> 1 <template>
2 <div class="pd20"> 2 <div class="pd20">
3 <div class="chartCard"> 3 <div class="chartCard">
4 <div class="title">查档接待情况</div> 4 <div class="title">开票计划与执行</div>
5 <div class="po_right"> 5 <div class="po_right">
6 <el-radio-group v-model="radioA" size="small" @change="radioAChange"> 6 <el-radio-group v-model="radioA" size="small" @change="radioAChange">
7 <el-radio-button label="本月" value="month"/> 7 <el-radio-button label="本月" value="month"/>
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
10 </el-radio-group> 10 </el-radio-group>
11 </div> 11 </div>
12 12
13 <div ref="zhuRef" style="width: 100%; height: 40vh;"></div> 13 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
14 </div> 14 </div>
15 15
16 <div class="chartCard mt30"> 16 <div class="chartCard mt30">
17 <div class="title">档案接收总览</div> 17 <div class="title">回款</div>
18 <div class="po_right"> 18 <div class="po_right">
19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">--> 19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
20 <!-- <el-radio-button label="本月" value="month" />--> 20 <!-- <el-radio-button label="本月" value="month" />-->
...@@ -23,7 +23,11 @@ ...@@ -23,7 +23,11 @@
23 <!-- </el-radio-group>--> 23 <!-- </el-radio-group>-->
24 </div> 24 </div>
25 25
26 <div ref="lineRef" style="width: 100%; height: 40vh;"></div> 26 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
27 </div>
28 <div class="chartCard mt30">
29 <div class="title">逾期360天以上未开票</div>
30 <div ref="overdueRef" style="width: 100%; height: 25vh;"></div>
27 </div> 31 </div>
28 </div> 32 </div>
29 </template> 33 </template>
...@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common" ...@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common"
37 41
38 const zhuRef = ref(null) 42 const zhuRef = ref(null)
39 const lineRef = ref(null) 43 const lineRef = ref(null)
44 const overdueRef = ref(null)
40 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 45 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
41 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 46 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
42 const radioA = ref('month') 47 const radioA = ref('month')
43 const radioB = ref('month')
44 let chartA 48 let chartA
45 let chartB 49 let chartB
50 let chartC
46 let intervalA = null 51 let intervalA = null
47 onMounted(() => { 52 onMounted(() => {
48 // init() 53 // init()
49 window.addEventListener('resize', handleResize); 54 window.addEventListener('resize', handleResize);
55 setA()
56 setB()
57 setC()
50 }) 58 })
51 const init = () => { 59 const init = () => {
52 clear() 60 clear()
...@@ -77,98 +85,51 @@ const getA = () => { ...@@ -77,98 +85,51 @@ const getA = () => {
77 const setA = () => { 85 const setA = () => {
78 chartA = echarts.init(zhuRef.value) 86 chartA = echarts.init(zhuRef.value)
79 const option = { 87 const option = {
80 animation: true, 88 tooltip: {
81 // dataZoom: [ 89 trigger: 'axis',
82 // { 90 axisPointer: {
83 // show: false, 91 // Use axis to trigger tooltip
84 // start: 0, 92 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
85 // end: 100
86 // },
87 // {
88 // type: 'inside',
89 // start: 0,
90 // end: 100
91 // }
92 // ],
93 xAxis: [{
94 data: kindList.value,
95 axisLabel: {
96 inside: false,
97 color: '#7ECEF4',
98 fontSize: '1.1rem'
99 },
100 axisTick: {
101 show: false
102 },
103 axisLine: {
104 show: true,
105 lineStyle: {
106 color: 'RGBA(38, 81, 128, 1)'
107 } 93 }
108 }, 94 },
109 z: 10 95 legend: {
110 }], 96 top: "3%"
111 yAxis: {
112 name: '单位(次)',
113 nameTextStyle: {
114 color: '#7ECEF4',
115 fontSize: '1.2rem'
116 }, 97 },
117 axisLine: { 98 grid: {
118 show: false 99 left: '3%',
100 right: '4%',
101 bottom: '3%',
102 containLabel: true
119 }, 103 },
120 axisTick: { 104 xAxis: {
121 show: false 105 type: 'value'
122 }, 106 },
123 axisLabel: { 107 yAxis: {
124 color: '#7ECEF4', 108 type: 'category',
125 fontSize: '1.3rem' 109 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
126 }, 110 },
127 splitLine: { 111 series: [
128 show: true, 112 {
129 lineStyle: { 113 name: 'Direct',
130 color: 'RGBA(38, 81, 128, 1)', 114 type: 'bar',
131 type: 'dashed' 115 label: {
132 } 116 show: true
133 }
134 }, 117 },
135 tooltip: { 118 emphasis: {
136 alwaysShowContent: true, 119 focus: 'series'
137 formatter: '<div style="font-size: 1.5rem">{c}</div>', 120 },
138 backgroundColor: 'transparent', 121 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
139 borderWidth: 0,
140 extraCssText: 'box-shadow:none',
141 position: 'top',
142 textStyle: {
143 color: '#fff',
144 fontWeight: 'bold',
145 fontSize: '1.5rem'
146 }
147 }, 122 },
148 series: [
149 { 123 {
150 type: 'pictorialBar', 124 name: 'Direct',
151 barGap: '0%', 125 type: 'bar',
152 symbol: 'path://M0,10 L10,10 C8,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', 126 label: {
153 showBackground: false, 127 show: true
154 itemStyle: {
155 borderWidth: 0,
156 borderColor: '#B8FFF4',
157 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
158 {offset: 1, color: 'rgba(184, 255, 244, 0.1)'},
159 {offset: 0, color: 'rgba(184, 255, 244, 0.8)'}
160 ])
161 }, 128 },
162 emphasis: { 129 emphasis: {
163 svgPath: 'M0,0 L5,0 L5,5 L0,5 Z', 130 focus: 'series'
164 itemStyle: {
165 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
166 {offset: 1, color: '#2378f7'},
167 {offset: 0, color: '#83bff6'}
168 ])
169 }
170 }, 131 },
171 data: dataA.value 132 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
172 } 133 }
173 ] 134 ]
174 } 135 }
...@@ -192,124 +153,112 @@ const getB = () => { ...@@ -192,124 +153,112 @@ const getB = () => {
192 const setB = () => { 153 const setB = () => {
193 chartB = echarts.init(lineRef.value) 154 chartB = echarts.init(lineRef.value)
194 const option = { 155 const option = {
195 animation: true,
196 grid: {
197 top: '15%',
198 left: '15%',
199 right: '10%',
200 bottom: '12%'
201 },
202 // dataZoom: [
203 // {
204 // show: false,
205 // start: 0,
206 // end: 100
207 // },
208 // {
209 // type: 'inside',
210 // start: 0,
211 // end: 100
212 // }
213 // ],
214 tooltip: { 156 tooltip: {
215 trigger: 'item', 157 trigger: 'axis',
216 formatter: '<div style="font-size: 1.5rem">{c}</div>', 158 axisPointer: {
217 renderModer: 'html', 159 // Use axis to trigger tooltip
218 className: 'downDot', 160 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
219 backgroundColor: 'transparent',
220 borderWidth: 0,
221 extraCssText: 'box-shadow:none',
222 position: 'top',
223 textStyle: {
224 color: '#fff',
225 fontWeight: 'bold',
226 fontSize: '1.5rem'
227 } 161 }
228 }, 162 },
163 legend: {
164 top: "3%"
165 },
166 grid: {
167 left: '3%',
168 right: '4%',
169 bottom: '3%',
170 containLabel: true
171 },
229 xAxis: { 172 xAxis: {
173 type: 'value'
174 },
175 yAxis: {
230 type: 'category', 176 type: 'category',
231 boundaryGap: false, 177 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
232 data: kindList.value, 178 },
233 axisTick: { 179 series: [
234 show: false 180 {
181 name: 'Direct',
182 type: 'bar',
183 label: {
184 show: true
235 }, 185 },
236 axisLabel: { 186 emphasis: {
237 color: '#7ECEF4', 187 focus: 'series'
238 fontSize: '1.1rem',
239 interval: 0
240 }, 188 },
241 axisLine: { 189 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
242 show: true, 190 }
243 lineStyle: { 191 ]
244 color: 'RGBA(38, 81, 128, 1)' 192 }
193 chartB.setOption(option)
194 autoHover(chartB, option, 0, 2000)
195 }
196 const setC = () => {
197 chartC = echarts.init(overdueRef.value)
198 const option = {
199 tooltip: {
200 trigger: 'axis',
201 axisPointer: {
202 type: 'shadow'
245 } 203 }
246 }, 204 },
205 legend: {
206 top: '10%',
207 textStyle: {
208 color: '#FFF'
247 }, 209 },
248 yAxis: {
249 name: '单位(卷/件)',
250 nameTextStyle: {
251 color: '#7ECEF4',
252 fontSize: '1.2rem'
253 },
254 type: 'value',
255 axisLabel: {
256 fontSize: '1.3rem'
257 }, 210 },
258 axisLine: { 211 grid: {
259 lineStyle: { 212 left: '3%',
260 color: '#03DAFD', 213 right: '4%',
261 } 214 bottom: '3%',
215 containLabel: true
262 }, 216 },
263 splitLine: { 217 xAxis: [
264 show: true, 218 {
265 lineStyle: { 219 type: 'category',
266 color: 'RGBA(38, 81, 128, 1)', 220 stack: 'Ad',
267 type: 'dashed' 221 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
268 } 222 }
223 ],
224 yAxis: [
225 {
226 type: 'value',
227 name: '金额(万元)',
269 } 228 }
270 }, 229 ],
271 series: [ 230 series: [
272 { 231 {
273 data: dataA.value, 232 name: '0-180天未开票',
274 type: 'line', 233 type: 'bar',
275 itemStyle: { 234 stack: 'Ad',
276 borderWidth: '0',
277 color: '#3A80D5',
278 },
279 emphasis: { 235 emphasis: {
280 itemStyle: { 236 focus: 'series'
281 color: '#fff',
282 borderColor: '#fff',
283 borderWidth: '4',
284 shadowColor: '#fff',
285 shadowBlur: '4',
286 }
287 }, 237 },
288 label: { 238 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
289 show: false,
290 position: 'bottom',
291 formatter: '{c}',
292 fontSize: 12,
293 color: '#03DAFD'
294 }, 239 },
295 areaStyle: {
296 opacity: 0.8,
297 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
298 { 240 {
299 offset: 0, 241 name: '180-360天未开票',
300 color: 'rgba(128, 255, 165,0.5)' 242 type: 'bar',
243 stack: 'Ad',
244 emphasis: {
245 focus: 'series'
246 },
247 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
301 }, 248 },
302 { 249 {
303 offset: 1, 250 name: '逾期360天以上',
304 color: 'rgba(1, 191, 236,0.5)' 251 type: 'bar',
305 } 252 stack: 'Ad',
306 ]) 253 emphasis: {
307 } 254 focus: 'series'
308 } 255 },
256 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
257 },
309 ] 258 ]
310 } 259 }
311 chartB.setOption(option) 260 chartC.setOption(option)
312 autoHover(chartB, option, 0, 2000) 261 autoHover(chartC, option, 0, 2000)
313 } 262 }
314 const radioAChange = (e) => { 263 const radioAChange = (e) => {
315 getA() 264 getA()
...@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) { ...@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) {
335 function handleResize() { 284 function handleResize() {
336 chartA?.resize() 285 chartA?.resize()
337 chartB?.resize() 286 chartB?.resize()
287 chartC?.resize()
338 } 288 }
339 289
340 onUnmounted(() => { 290 onUnmounted(() => {
...@@ -386,7 +336,7 @@ onUnmounted(() => { ...@@ -386,7 +336,7 @@ onUnmounted(() => {
386 } 336 }
387 337
388 .chartCard { 338 .chartCard {
389 background: url("@/assets/img/box_bg.png") no-repeat top left; 339 background: url("@/assets/image/box01@2x.png") no-repeat top left;
390 background-size: 100% 100%; 340 background-size: 100% 100%;
391 position: relative; 341 position: relative;
392 overflow: hidden; 342 overflow: hidden;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!