diff --git a/index.html b/index.html index f97e5f1..cbecd3e 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,10 @@ - + 奉节旅游调度 diff --git a/package-lock.json b/package-lock.json index d90c3ca..811c4e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@newpanjing/datav-vue3": "^0.0.0-alpha.0", "axios": "^1.7.9", "echarts": "^5.5.1", + "echarts-wordcloud": "^2.0.0", "element-plus": "^2.9.0", "flv.js": "^1.6.2", "pinia": "^2.2.6", @@ -1787,6 +1788,14 @@ "zrender": "5.6.0" } }, + "node_modules/echarts-wordcloud": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz", + "integrity": "sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==", + "peerDependencies": { + "echarts": "^5.0.1" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.68", "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz", diff --git a/package.json b/package.json index 8d61d51..d59ec04 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@newpanjing/datav-vue3": "^0.0.0-alpha.0", "axios": "^1.7.9", "echarts": "^5.5.1", + "echarts-wordcloud": "^2.0.0", "element-plus": "^2.9.0", "flv.js": "^1.6.2", "pinia": "^2.2.6", diff --git a/src/components/CountItem/index.vue b/src/components/CountItem/index.vue index cc1dad7..a4d6800 100644 --- a/src/components/CountItem/index.vue +++ b/src/components/CountItem/index.vue @@ -6,7 +6,7 @@
-
+
{{ suffix }}
@@ -16,7 +16,7 @@ diff --git a/src/components/PieRow/index.vue b/src/components/PieRow/index.vue index ae194e8..fe2ee5c 100644 --- a/src/components/PieRow/index.vue +++ b/src/components/PieRow/index.vue @@ -61,7 +61,6 @@ fontSize: fitChartSize(12) } }, - series: [ { type: 'pie', @@ -98,14 +97,6 @@ } ] } - const resize = () => { - if (pieChart) { - pieChart.dispose() - pieChart = null - init() - } - } - const init = () => { const dom = document.getElementById(id.value) pieChart = echarts.init(dom) @@ -116,7 +107,13 @@ // 监听窗口大小变化 window.addEventListener('resize', resize) } - + const resize = () => { + if (pieChart) { + pieChart.dispose() + pieChart = null + init() + } + } onMounted(() => { init() }) diff --git a/src/styles/common.scss b/src/styles/common.scss index d3758ad..f61865c 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -19,9 +19,18 @@ .justify-evenly { justify-content: space-evenly; } +.gap-8 { + gap: vh(8) vw(8); +} .mb-6 { margin-bottom: vh(6) !important; } +.ml-8 { + margin-left: vw(8) !important; +} +.mr-8 { + margin-right: vw(8) !important; +} .pt-10 { padding-top: vh(10) !important; } diff --git a/src/styles/screen.scss b/src/styles/screen.scss index 94168bb..be3a85c 100644 --- a/src/styles/screen.scss +++ b/src/styles/screen.scss @@ -1,16 +1,16 @@ -@use "sass:math"; +@use 'sass:math'; //默认设计稿的宽度 -$designWidth:3840; +$designWidth: 3822; //默认设计稿的高度 -$designHeight:1080; +$designHeight: 1080; //px转为vw的函数 @function vw($px) { - @return math.div($px , $designWidth) * 100vw; + @return math.div($px, $designWidth) * 100vw; } //px转为vh的函数 @function vh($px) { - @return math.div($px , $designHeight) * 100vh; + @return math.div($px, $designHeight) * 100vh; } diff --git a/src/utils/dataUtil.js b/src/utils/dataUtil.js index 4050124..5d53de2 100644 --- a/src/utils/dataUtil.js +++ b/src/utils/dataUtil.js @@ -1,5 +1,5 @@ /* Echarts图表尺寸自适应 */ -export const fitChartSize = (size, width = 3840) => { +export const fitChartSize = (size, width = 3822) => { let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth if (!clientWidth) return size diff --git a/src/utils/styleUtil.js b/src/utils/styleUtil.js index b2c2309..89f8a20 100644 --- a/src/utils/styleUtil.js +++ b/src/utils/styleUtil.js @@ -1,5 +1,5 @@ //默认设计稿的宽度 -const designWidth = 3840 +const designWidth = 3822 //默认设计稿的高度 const designHeight = 1080 diff --git a/src/views/home/components/age-ratio.vue b/src/views/home/components/age-ratio.vue index 2ac58a9..046a939 100644 --- a/src/views/home/components/age-ratio.vue +++ b/src/views/home/components/age-ratio.vue @@ -15,16 +15,42 @@ tooltip: { trigger: 'item' }, + legend: { + orient: 'vertical', + left: '60%', + y: 'center', + data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'], + itemHeight: fitChartSize(8), + itemWidth: fitChartSize(8), + itemGap: fitChartSize(10), + formatter: function (name) { + return '{title|' + name + '}' + }, + textStyle: { + rich: { + title: { + color: '#fff', + fontSize: fitChartSize(14) + }, + value: { + color: '#00D5F6', + fontSize: fitChartSize(14) + } + } + } + }, series: [ { type: 'pie', - radius: ['30%', '40%'], + center: ['30%', '50%'], + radius: ['50%', '70%'], itemStyle: { borderColor: 'transparent', borderRadius: fitChartSize(2), borderWidth: fitChartSize(2) }, label: { + show: false, color: '#D3F0FE', fontSize: fitChartSize(12) }, @@ -36,11 +62,11 @@ } }, data: [ - { value: 484, name: '19岁以下', labelLine: { length: 2 } }, - { value: 300, name: '18-30岁', labelLine: { length: 2 } }, - { value: 1048, name: '30-40岁', labelLine: { length: 2 } }, - { value: 580, name: '40-60岁', labelLine: { length: 2 } }, - { value: 735, name: '60岁以上', labelLine: { length: 2 } } + { value: 484, name: '19岁以下' }, + { value: 300, name: '18-30岁' }, + { value: 1048, name: '30-40岁' }, + { value: 580, name: '40-60岁' }, + { value: 735, name: '60岁以上' } ] } ] @@ -63,6 +89,6 @@ diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue index 904f787..79bc069 100644 --- a/src/views/home/components/box-2.vue +++ b/src/views/home/components/box-2.vue @@ -245,7 +245,7 @@ } .box-1 { width: vw(253); - height: vh(270); + height: vh(290); background-image: url('@/assets/images/bg-3.png'); background-size: 100% 100%; &:nth-child(1) { diff --git a/src/views/home/components/box-4.vue b/src/views/home/components/box-4.vue index 78f333f..90228dc 100644 --- a/src/views/home/components/box-4.vue +++ b/src/views/home/components/box-4.vue @@ -235,7 +235,7 @@ } .box-4 { margin-top: vh(120); - width: vw(790); + width: vw(710); height: vh(950); padding: vw(8); box-sizing: border-box; diff --git a/src/views/home/components/box-5.vue b/src/views/home/components/box-5.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/views/home/components/jam.vue b/src/views/home/components/jam.vue index 69d3834..fbef9aa 100644 --- a/src/views/home/components/jam.vue +++ b/src/views/home/components/jam.vue @@ -103,7 +103,7 @@ }, label: { show: true, - offset: [10, -13], + offset: [10, -10], color: '#D3E5FF', fontWeight: 500, position: 'left', diff --git a/src/views/home/components/ticket.vue b/src/views/home/components/ticket.vue index ec04de9..afa8095 100644 --- a/src/views/home/components/ticket.vue +++ b/src/views/home/components/ticket.vue @@ -42,12 +42,8 @@ } }, legend: { - orient: 'vertical', - x: 'right', - y: 'center', - // textStyle: { - // color: '#4A9AE4' - // }, + x: 'center', + y: 'bottom', data: qxzbData, itemHeight: fitChartSize(8), itemWidth: fitChartSize(8), @@ -75,7 +71,7 @@ type: 'pie', clockWise: false, //顺时加载 radius: ['15%', '25%'], - center: ['30%', '50%'], + center: ['50%', '40%'], label: { normal: { show: false @@ -109,7 +105,7 @@ type: 'pie', clockWise: false, //顺时加载 radius: ['30%', '40%'], - center: ['30%', '50%'], + center: ['50%', '40%'], label: { normal: { show: false @@ -143,7 +139,7 @@ type: 'pie', clockWise: false, //顺时加载 radius: ['45%', '55%'], - center: ['30%', '50%'], + center: ['50%', '40%'], label: { normal: { show: false diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 0fd8d13..f145f80 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -11,7 +11,11 @@ import box2 from './components/box-2.vue' import box3 from './components/box-3.vue' import box4 from './components/box-4.vue' - const navLeft = [{ name: '安全' }, { name: '景区', path: '/scenic' }, { name: '交通' }] + const navLeft = [ + { name: '安全', path: '/monitor' }, + { name: '景区', path: '/scenic' }, + { name: '交通' } + ] const navRight = [ { name: '停车' }, { name: '工单' }, diff --git a/src/views/scenic/index.vue b/src/views/scenic/index.vue index 7fa5434..ec8dafb 100644 --- a/src/views/scenic/index.vue +++ b/src/views/scenic/index.vue @@ -1,5 +1,5 @@