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 957 additions and 576 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',
12 { 12 {
13 state: () => ({ 13 state: () => ({
14 token: getToken(), 14 token: getToken(),
15 user: null, 15 user: null,
16 group: {}, 16 group: {},
17 name: '', 17 name: '',
18 nickName: '', 18 nickName: '',
19 avatar: '', 19 avatar: '',
20 roles: [], 20 roles: [],
21 permissions: [], 21 permissions: [],
22 memberInfo: {}, 22 memberInfo: {},
23 authenticationStatus: '', // 是否已认证 23 authenticationStatus: '', // 是否已认证
24 deptType: '', 24 deptType: '',
25 showPrice: false, 25 showPrice: false,
26 perId: '', 26 perId: '',
27 personInfo: '', 27 personInfo: '',
28 unit: '', 28 unit: '',
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 // 登录
39 login(userInfo) { 39 login(userInfo) {
40 const username = userInfo.username.trim() 40 const username = userInfo.username.trim()
41 const password = userInfo.password 41 const password = userInfo.password
42 const code = userInfo.code 42 const code = userInfo.code
43 const uuid = userInfo.uuid 43 const uuid = userInfo.uuid
44 return new Promise((resolve, reject) => { 44 return new Promise((resolve, reject) => {
45 login(username, password, code, uuid).then(res => { 45 login(username, password, code, uuid).then(res => {
46 setToken(res.data.token) 46 setToken(res.data.token)
47 this.token = res.data.token 47 this.token = res.data.token
48 resolve() 48 resolve()
49 }).catch(error => { 49 }).catch(error => {
50 reject(error) 50 reject(error)
51 }) 51 })
52 }) 52 })
53 }, 53 },
54 loginByPhone(userInfo) { 54 loginByPhone(userInfo) {
55 const phonenumber = userInfo.telNo.trim() 55 const phonenumber = userInfo.telNo.trim()
56 const code = userInfo.code 56 const code = userInfo.code
57 return new Promise((resolve, reject) => { 57 return new Promise((resolve, reject) => {
58 loginByPhone(phonenumber, code).then(res => { 58 loginByPhone(phonenumber, code).then(res => {
59 setToken(res.data.token) 59 setToken(res.data.token)
60 this.token = res.data.token 60 this.token = res.data.token
61 resolve() 61 resolve()
62 }).catch(error => { 62 }).catch(error => {
63 reject(error) 63 reject(error)
64 }) 64 })
65 }) 65 })
66 }, 66 },
67 loginPc(userInfo) { 67 loginPc(userInfo) {
68 const username = userInfo.username 68 const username = userInfo.username
69 const password = userInfo.password 69 const password = userInfo.password
70 const uuid = userInfo.uuid 70 const uuid = userInfo.uuid
71 const code = userInfo.code 71 const code = userInfo.code
72 return new Promise((resolve, reject) => { 72 return new Promise((resolve, reject) => {
73 loginDance(username, password, code, uuid).then(res => { 73 loginDance(username, password, code, uuid).then(res => {
74 setToken(res.data.token) 74 setToken(res.data.token)
75 this.token = res.data.token 75 this.token = res.data.token
76 resolve() 76 resolve()
77 }).catch(error => { 77 }).catch(error => {
78 reject(error) 78 reject(error)
79 }) 79 })
80 }) 80 })
81 }, 81 },
82 // 获取用户信息 82 // 获取用户信息
83 getInfo() { 83 getInfo() {
84 return new Promise((resolve, reject) => { 84 return new Promise((resolve, reject) => {
85 getInfo().then(res => { 85 getInfo().then(res => {
86 const user = res.data.user 86 const user = res.data.user
87 const personInfo = res.data.personInfo 87 const personInfo = res.data.personInfo
88 const avatar = user.avatar 88 const avatar = user.avatar
89 if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组 89 if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
90 this.roles = res.data.roles 90 this.roles = res.data.roles
91 this.permissions = res.data.permissions 91 this.permissions = res.data.permissions
92 } else { 92 } else {
93 this.roles = ['ROLE_DEFAULT'] 93 this.roles = ['ROLE_DEFAULT']
94 } 94 }
95 this.user = user 95 this.user = user
96 this.group = res.data.group 96 this.group = res.data.group
97 this.name = user.userName 97 this.name = user.userName
98 this.nickName = user.nickName 98 this.nickName = user.nickName
99 this.deptType = user.dept.deptType 99 this.deptType = user.dept.deptType
100 this.genFlag = user.dept.genFlag 100 this.genFlag = user.dept.genFlag
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) { 104 resolve(res.data)
105 this.perId = aes.encrypt(personInfo.perId) 105 }).catch(error => {
106 this.personInfo = personInfo 106 reject(error)
107 } 107 })
108 resolve(res.data) 108 })
109 }).catch(error => { 109 },
110 reject(error) 110 // 退出系统
111 }) 111 logOut() {
112 }) 112 return new Promise((resolve, reject) => {
113 }, 113 logout(this.token).then(() => {
114 // 退出系统 114 this.token = ''
115 logOut() { 115 this.roles = []
116 return new Promise((resolve, reject) => { 116 this.permissions = []
117 logout(this.token).then(() => { 117 this.perId = ''
118 this.token = '' 118 removeToken()
119 this.roles = [] 119 resolve()
120 this.permissions = [] 120 }).catch(error => {
121 this.perId = '' 121 reject(error)
122 removeToken() 122 })
123 resolve() 123 })
124 }).catch(error => { 124 },
125 reject(error) 125 // 获取道馆信息
126 }) 126 getMemInfo() {
127 }) 127 return getMyOwnMemberInfo().then(res => {
128 }, 128 this.authenticationStatus = res.data.authenticationStatus
129 // 获取道馆信息 129 this.memberInfo = res.data.memberInfo
130 getMemInfo() { 130 this.isExam = res.data?.dept?.isExam
131 return getMyOwnMemberInfo().then(res => { 131 })
132 this.authenticationStatus = res.data.authenticationStatus 132 },
133 this.memberInfo = res.data.memberInfo 133 getRemindInfo() {
134 this.isExam = res.data?.dept?.isExam 134 getRemindCount().then((res) => {
135 }) 135 this.badge = res.data
136 }, 136 })
137 getRemindInfo() { 137 },
138 getRemindCount().then((res) => { 138 setVisitor() {
139 this.badge = res.data 139 this.visitor = true
140 }) 140 setTimeout(() => {
141 }, 141 this.visitor = false
142 setVisitor() { 142 }, 1000)
143 this.visitor = true 143 },
144 setTimeout(() => { 144 setReLogin(query) {
145 this.visitor = false 145 console.log(query)
146 }, 1000) 146 this.reLogin = {show: true, query: query}
147 }, 147 setTimeout(() => {
148 setReLogin(query) { 148 this.reLogin = {show: false, query: query}
149 console.log(query) 149 }, 1000)
150 this.reLogin = {show:true,query:query} 150 },
151 setTimeout(() => { 151 checkAndLogin() {
152 this.reLogin = {show:false,query:query} 152 if (!this.perId) {
153 }, 1000) 153 ElMessageBox.alert('请先登录账号', '系统提示')
154 }, 154 .then(() => {
155 checkAndLogin() { 155 this.setReLogin()
156 if (!this.perId) { 156 })
157 ElMessageBox.alert('请先登录账号', '系统提示')
158 .then(() => {
159 this.setReLogin()
160 })
161 157
162 return false 158 return false
163 } else { 159 } else {
164 return true 160 return true
161 }
162 },
163 updataActiveName(v) {
164 this.activeName = v
165 }
165 } 166 }
166 }, 167 })
167 updataActiveName(v){
168 this.activeName=v
169 }
170 }
171 })
172 168
173 export default useUserStore 169 export default useUserStore
......
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,137 +24,116 @@ ...@@ -25,137 +24,116 @@
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 营业收入
34 </div>
35 <div ref="bing1" style="width: 100%;height:13vh;">
36 </div>
37 <div class="bingBottom">
38 <div>2025年营业收入</div>
39 <div>(万元)</div>
40 </div>
41 </div>
42 <div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/>
43 </div>
44
45 <hr>
32 </div> 46 </div>
33 <div ref="boardRef2" style="width: 100%;height: 20vh;"> 47 <div class="father">
34 看板11 48 <div style="display: flex">
49 <div class="bing" style="width: 30%">
50 <div class="bingTitle">
51 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
52 应收余额
53 </div>
54 <div ref="bing2" style="width: 100%;height:13vh;">
55 </div>
56 <div class="bingBottom">
57 <div>2025年3月前 累计应收余额</div>
58 <div>(万元)</div>
59 </div>
60 </div>
61 <div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/>
62 </div>
63
64 <hr>
35 </div> 65 </div>
36 <div ref="boardRef3" style="width: 100%;height: 20vh;"> 66 <div class="father">
37 看板11 67 <div style="display: flex">
68 <div class="bing" style="width: 30%">
69 <div class="bingTitle">
70 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
71 现金余额
72 </div>
73 <div ref="bing3" style="width: 100%;height:13vh;">
74 </div>
75 <div class="bingBottom">
76 <div>2025年3月前 累计现金余额</div>
77 <div>(万元)</div>
78 </div>
79 </div>
80 <div ref="zhuRef3" class="zhu" style="width:70%;height: 17vh"/>
81 </div>
82 <hr>
38 </div> 83 </div>
39 <div ref="boardRef4" style="width: 100%;height: 20vh;"> 84 <div>
40 看板11 85 <div ref="zhuRef4" style="width: 100%;height: 17vh">
86 1234
87 </div>
41 </div> 88 </div>
42 </div> 89 </div>
43 90
44 <!-- &lt;!&ndash; &ndash;&gt;-->
45 <!-- <div class="partB">-->
46 <!-- <div class="q1box qqbox">-->
47 <!-- &lt;!&ndash; 液体球&ndash;&gt;-->
48 <!-- <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>-->
49 <!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
50 <!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
51 <!-- <stop offset="0%" stop-color="#03AEFD"/>-->
52 <!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
53 <!-- </linearGradient>-->
54 <!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
55 <!-- 非常满意-->
56 <!-- </text>-->
57 <!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
58 <!-- text-anchor="middle" x="50%">{{ list['非常满意'] }}-->
59 <!-- </text>-->
60 <!-- </svg>-->
61 <!-- </div>-->
62 <!-- <div class="q2box qqbox">-->
63 <!-- &lt;!&ndash; 液体球&ndash;&gt;-->
64 <!-- <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>-->
65 <!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
66 <!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
67 <!-- <stop offset="0%" stop-color="#03AEFD"/>-->
68 <!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
69 <!-- </linearGradient>-->
70 <!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
71 <!-- 满意-->
72 <!-- </text>-->
73 <!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
74 <!-- text-anchor="middle" x="50%">{{ list['满意'] }}-->
75 <!-- </text>-->
76 <!-- </svg>-->
77 <!-- </div>-->
78 <!-- &lt;!&ndash; <div class="q3box qqbox">&ndash;&gt;-->
79 <!-- &lt;!&ndash; &lt;!&ndash; 液体球&ndash;&gt;&ndash;&gt;-->
80 <!-- &lt;!&ndash; <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>&ndash;&gt;-->
81 <!-- &lt;!&ndash; <svg width="100%" :height="`calc(100*100vw/1920)`">&ndash;&gt;-->
82 <!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;-->
83 <!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD"/>&ndash;&gt;-->
84 <!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3"/>&ndash;&gt;-->
85 <!-- &lt;!&ndash; </linearGradient>&ndash;&gt;-->
86 <!-- &lt;!&ndash; <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"&ndash;&gt;-->
87 <!-- &lt;!&ndash; :font-size="`calc(14*100vw/1920)`">基本满意&ndash;&gt;-->
88 <!-- &lt;!&ndash; </text>&ndash;&gt;-->
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
123 </div> 91 </div>
124 92
125 93
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%'],
198 { 177 label: {
199 type: "linear", 178 show: false
200 x: 0, 179 },
201 y: 1,
202 x2: 0,
203 y2: 0,
204 colorStops: [
205 {
206 offset: 1,
207 color: ["#2897FE"], // 0% 处的颜色
208 },
209 {
210 offset: 0,
211 color: ["rgba(0,149,255,0)"], // 100% 处的颜色
212 },
213 ],
214 global: false, // 缺省为 false
215 },
216 ],
217 data: data, // data个数代表波浪数
218 amplitude: 5,
219 // 图形样式
220 itemStyle: { 180 itemStyle: {
221 opacity: 0.5, // 波浪的透明度 181 borderWidth: 2
222 shadowBlur: 2, // 波浪的阴影范围 182 },
223 }, 183 emphasis: {
224 backgroundStyle: { 184 scale: false
225 borderWidth: 2, 185 },
226 borderColor: 'transparent', 186 startAngle: 180,
227 color: { 187 endAngle: 360,
228 type: 'radial', 188 data: [
229 x: 0.5, 189 {value: 48, name: '1'},
230 y: 0.5, 190 {value: 1, name: '1'},
231 r: 0.5, 191 {value: 48, name: '1'}
232 colorStops: [{ 192 ]
233 offset: 0, color: 'transparent' // 0% 处的颜色 193 },
234 }, { 194 {
235 offset: 1, color: '#144C8A' // 100% 处的颜色 195 name: '2',
236 }], 196 type: 'pie',
237 global: false // 缺省为 false 197 radius: ['75%', '95%'],
238 } 198 center: ['50%', '70%'],
199 label: {
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 },
213 {
214 name: '3',
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 ]
233 },
234 {
235 name: '4',
236 type: 'pie',
237 radius: ['38%', '50%'],
238 center: ['50%', '70%'],
239 label: {
240 show: false
241 },
242 emphasis: {
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
271 },
272 itemStyle: {
273 borderWidth: 2
274 },
275 emphasis: {
276 scale: false
277 },
278 startAngle: 180,
279 endAngle: 360,
280 data: [
281 {value: 48, name: '1'},
282 {value: 1, name: '1'},
283 {value: 48, name: '1'}
284 ]
285 },
286 {
287 name: '2',
288 type: 'pie',
289 radius: ['75%', '95%'],
290 center: ['50%', '70%'],
291 label: {
292 show: false
239 }, 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%'],
240 label: { 310 label: {
241 show: true, 311 show: true,
242 textStyle: { 312 position: 'center',
243 color: '#fff', 313 formatter: '{b}'
244 shadowColor: '#000',
245 shadowBlur: 10,
246 fontSize: '2rem',
247 },
248 formatter: (params) => {
249 return `${(params.value * 100).toFixed(2)}%`;
250 },
251 },
252 outline: {
253 show: false,
254 }, 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 ]
255 }, 325 },
256 ] 326 ]
257 } 327 }
258 dom.setOption(option) 328
259 return dom 329 chart2.setOption(option)
330 autoHover(chart2, option, 2, 2000)
260 } 331 }
332 const handelBing3 = () => {
333 chart3 = echarts.init(bing3.value)
334 const option = {
335 tooltip: {
336 trigger: ''
337 },
261 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%'],
386 label: {
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: {
634 textStyle: {
635 color: '#FFF'
636 },
637 },
638 grid: {
639 left: '3%',
640 right: '4%',
641 bottom: '3%',
642 containLabel: true
643 },
644 xAxis: [
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'
664 },
665 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
666 },
667 ]
668 }
669 chart44.setOption(option)
670 autoHover(chart44, option, 0, 2000)
671 }
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 } 802 position: relative;
374 } 803 overflow: hidden;
375
376 804
377 .partA { 805 .bing {
378 min-height: 340px; 806 text-align: center;
379 height: 70vh;
380 background: url("@/assets/img/pan.png") no-repeat bottom;
381 background-size: 100% auto;
382 position: relative;
383 }
384 807
385 .gif_bg { 808 .bingTitle {
386 width: 100%; 809 font-family: PingFang SC, serif;
387 position: absolute; 810 font-weight: 500;
388 bottom: calc(-100 * 100vw / 1920);; 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);
389 819
390 img { 820 .titleImg {
391 width: 100%; 821 display: block;
392 transform: rotate3d(1, 0, 0, 70deg); 822 width: calc(50 * 100vw / 1920);
393 } 823 height: calc(20 * 100vw / 1920);
394 } 824 }
825 }
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,
191 emphasis: { 190
192 show: false 191 },
193 } 192 emphasis: {
193 scale: false
194 }, 194 },
195 data: [ 195 data: [
196 {value: 12, name: ''}, 196 {value: 12, name: ''},
...@@ -204,6 +204,7 @@ const setA = () => { ...@@ -204,6 +204,7 @@ const setA = () => {
204 avoidLabelOverlap: false, 204 avoidLabelOverlap: false,
205 itemStyle: { 205 itemStyle: {
206 borderWidth: 2, 206 borderWidth: 2,
207 opacity: 0.8,
207 // borderColor: '#fff', 208 // borderColor: '#fff',
208 }, 209 },
209 label: { 210 label: {
......
src/viewsPc/vip/rightPage.vue
1 <template> 1 <template>
2 <div class="pd20"> 2 <div class="pd20">
3 <div class="chartCard"> 3 <div class="chartCard">
4 <div class="title">查档接待情况</div> 4 <div class="title">开票计划与执行</div>
5 <div class="po_right"> 5 <div class="po_right">
6 <el-radio-group v-model="radioA" size="small" @change="radioAChange"> 6 <el-radio-group v-model="radioA" size="small" @change="radioAChange">
7 <el-radio-button label="本月" value="month"/> 7 <el-radio-button label="本月" value="month"/>
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
10 </el-radio-group> 10 </el-radio-group>
11 </div> 11 </div>
12 12
13 <div ref="zhuRef" style="width: 100%; height: 40vh;"></div> 13 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
14 </div> 14 </div>
15 15
16 <div class="chartCard mt30"> 16 <div class="chartCard mt30">
17 <div class="title">档案接收总览</div> 17 <div class="title">回款</div>
18 <div class="po_right"> 18 <div class="po_right">
19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">--> 19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
20 <!-- <el-radio-button label="本月" value="month" />--> 20 <!-- <el-radio-button label="本月" value="month" />-->
...@@ -23,7 +23,11 @@ ...@@ -23,7 +23,11 @@
23 <!-- </el-radio-group>--> 23 <!-- </el-radio-group>-->
24 </div> 24 </div>
25 25
26 <div ref="lineRef" style="width: 100%; height: 40vh;"></div> 26 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
27 </div>
28 <div class="chartCard mt30">
29 <div class="title">逾期360天以上未开票</div>
30 <div ref="overdueRef" style="width: 100%; height: 25vh;"></div>
27 </div> 31 </div>
28 </div> 32 </div>
29 </template> 33 </template>
...@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common" ...@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common"
37 41
38 const zhuRef = ref(null) 42 const zhuRef = ref(null)
39 const lineRef = ref(null) 43 const lineRef = ref(null)
44 const overdueRef = ref(null)
40 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 45 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
41 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 46 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
42 const radioA = ref('month') 47 const radioA = ref('month')
43 const radioB = ref('month')
44 let chartA 48 let chartA
45 let chartB 49 let chartB
50 let chartC
46 let intervalA = null 51 let intervalA = null
47 onMounted(() => { 52 onMounted(() => {
48 // init() 53 // init()
49 window.addEventListener('resize', handleResize); 54 window.addEventListener('resize', handleResize);
55 setA()
56 setB()
57 setC()
50 }) 58 })
51 const init = () => { 59 const init = () => {
52 clear() 60 clear()
...@@ -77,98 +85,51 @@ const getA = () => { ...@@ -77,98 +85,51 @@ const getA = () => {
77 const setA = () => { 85 const setA = () => {
78 chartA = echarts.init(zhuRef.value) 86 chartA = echarts.init(zhuRef.value)
79 const option = { 87 const option = {
80 animation: true,
81 // dataZoom: [
82 // {
83 // show: false,
84 // start: 0,
85 // end: 100
86 // },
87 // {
88 // type: 'inside',
89 // start: 0,
90 // end: 100
91 // }
92 // ],
93 xAxis: [{
94 data: kindList.value,
95 axisLabel: {
96 inside: false,
97 color: '#7ECEF4',
98 fontSize: '1.1rem'
99 },
100 axisTick: {
101 show: false
102 },
103 axisLine: {
104 show: true,
105 lineStyle: {
106 color: 'RGBA(38, 81, 128, 1)'
107 }
108 },
109 z: 10
110 }],
111 yAxis: {
112 name: '单位(次)',
113 nameTextStyle: {
114 color: '#7ECEF4',
115 fontSize: '1.2rem'
116 },
117 axisLine: {
118 show: false
119 },
120 axisTick: {
121 show: false
122 },
123 axisLabel: {
124 color: '#7ECEF4',
125 fontSize: '1.3rem'
126 },
127 splitLine: {
128 show: true,
129 lineStyle: {
130 color: 'RGBA(38, 81, 128, 1)',
131 type: 'dashed'
132 }
133 }
134 },
135 tooltip: { 88 tooltip: {
136 alwaysShowContent: true, 89 trigger: 'axis',
137 formatter: '<div style="font-size: 1.5rem">{c}</div>', 90 axisPointer: {
138 backgroundColor: 'transparent', 91 // Use axis to trigger tooltip
139 borderWidth: 0, 92 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
140 extraCssText: 'box-shadow:none',
141 position: 'top',
142 textStyle: {
143 color: '#fff',
144 fontWeight: 'bold',
145 fontSize: '1.5rem'
146 } 93 }
147 }, 94 },
95 legend: {
96 top: "3%"
97 },
98 grid: {
99 left: '3%',
100 right: '4%',
101 bottom: '3%',
102 containLabel: true
103 },
104 xAxis: {
105 type: 'value'
106 },
107 yAxis: {
108 type: 'category',
109 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
110 },
148 series: [ 111 series: [
149 { 112 {
150 type: 'pictorialBar', 113 name: 'Direct',
151 barGap: '0%', 114 type: 'bar',
152 symbol: 'path://M0,10 L10,10 C8,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', 115 label: {
153 showBackground: false, 116 show: true
154 itemStyle: { 117 },
155 borderWidth: 0, 118 emphasis: {
156 borderColor: '#B8FFF4', 119 focus: 'series'
157 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 120 },
158 {offset: 1, color: 'rgba(184, 255, 244, 0.1)'}, 121 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
159 {offset: 0, color: 'rgba(184, 255, 244, 0.8)'} 122 },
160 ]) 123 {
124 name: 'Direct',
125 type: 'bar',
126 label: {
127 show: true
161 }, 128 },
162 emphasis: { 129 emphasis: {
163 svgPath: 'M0,0 L5,0 L5,5 L0,5 Z', 130 focus: 'series'
164 itemStyle: {
165 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
166 {offset: 1, color: '#2378f7'},
167 {offset: 0, color: '#83bff6'}
168 ])
169 }
170 }, 131 },
171 data: dataA.value 132 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
172 } 133 }
173 ] 134 ]
174 } 135 }
...@@ -192,125 +153,113 @@ const getB = () => { ...@@ -192,125 +153,113 @@ const getB = () => {
192 const setB = () => { 153 const setB = () => {
193 chartB = echarts.init(lineRef.value) 154 chartB = echarts.init(lineRef.value)
194 const option = { 155 const option = {
195 animation: true,
196 grid: {
197 top: '15%',
198 left: '15%',
199 right: '10%',
200 bottom: '12%'
201 },
202 // dataZoom: [
203 // {
204 // show: false,
205 // start: 0,
206 // end: 100
207 // },
208 // {
209 // type: 'inside',
210 // start: 0,
211 // end: 100
212 // }
213 // ],
214 tooltip: { 156 tooltip: {
215 trigger: 'item', 157 trigger: 'axis',
216 formatter: '<div style="font-size: 1.5rem">{c}</div>', 158 axisPointer: {
217 renderModer: 'html', 159 // Use axis to trigger tooltip
218 className: 'downDot', 160 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
219 backgroundColor: 'transparent',
220 borderWidth: 0,
221 extraCssText: 'box-shadow:none',
222 position: 'top',
223 textStyle: {
224 color: '#fff',
225 fontWeight: 'bold',
226 fontSize: '1.5rem'
227 } 161 }
228 }, 162 },
163 legend: {
164 top: "3%"
165 },
166 grid: {
167 left: '3%',
168 right: '4%',
169 bottom: '3%',
170 containLabel: true
171 },
229 xAxis: { 172 xAxis: {
230 type: 'category', 173 type: 'value'
231 boundaryGap: false,
232 data: kindList.value,
233 axisTick: {
234 show: false
235 },
236 axisLabel: {
237 color: '#7ECEF4',
238 fontSize: '1.1rem',
239 interval: 0
240 },
241 axisLine: {
242 show: true,
243 lineStyle: {
244 color: 'RGBA(38, 81, 128, 1)'
245 }
246 },
247 }, 174 },
248 yAxis: { 175 yAxis: {
249 name: '单位(卷/件)', 176 type: 'category',
250 nameTextStyle: { 177 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
251 color: '#7ECEF4',
252 fontSize: '1.2rem'
253 },
254 type: 'value',
255 axisLabel: {
256 fontSize: '1.3rem'
257 },
258 axisLine: {
259 lineStyle: {
260 color: '#03DAFD',
261 }
262 },
263 splitLine: {
264 show: true,
265 lineStyle: {
266 color: 'RGBA(38, 81, 128, 1)',
267 type: 'dashed'
268 }
269 }
270 }, 178 },
271 series: [ 179 series: [
272 { 180 {
273 data: dataA.value, 181 name: 'Direct',
274 type: 'line', 182 type: 'bar',
275 itemStyle: { 183 label: {
276 borderWidth: '0', 184 show: true
277 color: '#3A80D5',
278 }, 185 },
279 emphasis: { 186 emphasis: {
280 itemStyle: { 187 focus: 'series'
281 color: '#fff',
282 borderColor: '#fff',
283 borderWidth: '4',
284 shadowColor: '#fff',
285 shadowBlur: '4',
286 }
287 },
288 label: {
289 show: false,
290 position: 'bottom',
291 formatter: '{c}',
292 fontSize: 12,
293 color: '#03DAFD'
294 }, 188 },
295 areaStyle: { 189 data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
296 opacity: 0.8,
297 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
298 {
299 offset: 0,
300 color: 'rgba(128, 255, 165,0.5)'
301 },
302 {
303 offset: 1,
304 color: 'rgba(1, 191, 236,0.5)'
305 }
306 ])
307 }
308 } 190 }
309 ] 191 ]
310 } 192 }
311 chartB.setOption(option) 193 chartB.setOption(option)
312 autoHover(chartB, option, 0, 2000) 194 autoHover(chartB, option, 0, 2000)
313 } 195 }
196 const setC = () => {
197 chartC = echarts.init(overdueRef.value)
198 const option = {
199 tooltip: {
200 trigger: 'axis',
201 axisPointer: {
202 type: 'shadow'
203 }
204 },
205 legend: {
206 top: '10%',
207 textStyle: {
208 color: '#FFF'
209 },
210 },
211 grid: {
212 left: '3%',
213 right: '4%',
214 bottom: '3%',
215 containLabel: true
216 },
217 xAxis: [
218 {
219 type: 'category',
220 stack: 'Ad',
221 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
222 }
223 ],
224 yAxis: [
225 {
226 type: 'value',
227 name: '金额(万元)',
228 }
229 ],
230 series: [
231 {
232 name: '0-180天未开票',
233 type: 'bar',
234 stack: 'Ad',
235 emphasis: {
236 focus: 'series'
237 },
238 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
239 },
240 {
241 name: '180-360天未开票',
242 type: 'bar',
243 stack: 'Ad',
244 emphasis: {
245 focus: 'series'
246 },
247 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
248 },
249 {
250 name: '逾期360天以上',
251 type: 'bar',
252 stack: 'Ad',
253 emphasis: {
254 focus: 'series'
255 },
256 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
257 },
258 ]
259 }
260 chartC.setOption(option)
261 autoHover(chartC, option, 0, 2000)
262 }
314 const radioAChange = (e) => { 263 const radioAChange = (e) => {
315 getA() 264 getA()
316 } 265 }
...@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) { ...@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) {
335 function handleResize() { 284 function handleResize() {
336 chartA?.resize() 285 chartA?.resize()
337 chartB?.resize() 286 chartB?.resize()
287 chartC?.resize()
338 } 288 }
339 289
340 onUnmounted(() => { 290 onUnmounted(() => {
...@@ -386,7 +336,7 @@ onUnmounted(() => { ...@@ -386,7 +336,7 @@ onUnmounted(() => {
386 } 336 }
387 337
388 .chartCard { 338 .chartCard {
389 background: url("@/assets/img/box_bg.png") no-repeat top left; 339 background: url("@/assets/image/box01@2x.png") no-repeat top left;
390 background-size: 100% 100%; 340 background-size: 100% 100%;
391 position: relative; 341 position: relative;
392 overflow: hidden; 342 overflow: hidden;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!