From fdc39252f525a5be3a531afdd2e74764fee9bb29 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Mon, 17 Mar 2025 22:41:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=B3=E4=BE=A7=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E9=83=A8=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images/big-data/bg/bg-right-bottom.png | Bin 0 -> 3427 bytes src/assets/styles/animations/animations.scss | 2 +- src/assets/styles/global.scss | 2 +- src/views/big-data/charts/right-top.ts | 56 +++++++ .../components/right-bottom.vue | 146 +++++++----------- .../big-data-right/components/right-top.vue | 2 +- .../welcome/components/welcome-content.vue | 2 +- 7 files changed, 118 insertions(+), 92 deletions(-) create mode 100644 src/assets/images/big-data/bg/bg-right-bottom.png create mode 100644 src/views/big-data/charts/right-top.ts diff --git a/src/assets/images/big-data/bg/bg-right-bottom.png b/src/assets/images/big-data/bg/bg-right-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..451fbde4901dc37c8bece2337806760e76eb09b5 GIT binary patch literal 3427 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 Jila_9{{wK!Os@a{ literal 0 HcmV?d00001 diff --git a/src/assets/styles/animations/animations.scss b/src/assets/styles/animations/animations.scss index cf7d603..d50b55f 100644 --- a/src/assets/styles/animations/animations.scss +++ b/src/assets/styles/animations/animations.scss @@ -1,3 +1,3 @@ @use "src/rotate"; @use "src/transition"; -@use "src/line-move"; \ No newline at end of file +@use "src/line-move"; diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index dc54068..7989f18 100644 --- a/src/assets/styles/global.scss +++ b/src/assets/styles/global.scss @@ -4,7 +4,7 @@ :root { --color-primary: #027AFF; --color-primary-secondary: #00FFFF; - --color-primary-secondary-1: rgba(0, 255, 255, 0.71); + --color-primary-secondary-1: #00FFFFB5; --color-success: #44D7B6; --color-info: #7CC1FF; --color-info-secondary: #707070; diff --git a/src/views/big-data/charts/right-top.ts b/src/views/big-data/charts/right-top.ts new file mode 100644 index 0000000..d0b64a2 --- /dev/null +++ b/src/views/big-data/charts/right-top.ts @@ -0,0 +1,56 @@ +import 'echarts/lib/component/dataZoom'; + +import type { EChartsOption } from 'echarts'; +import { type Ref, ref } from 'vue'; + +import echarts from '@/plugins/echarts'; +import { debounceChart } from '@/utils/chart'; + +const option = ref(); +option.value = { + tooltip: { + trigger: 'axis', + axisPointer: { type: 'shadow' }, + }, + grid: { top: 0, left: 0, right: -100, bottom: 0, containLabel: false }, + xAxis: { show: false, type: 'value' }, + yAxis: { show: false, type: 'category', data: ['进出口金额'] }, + series: [ + { + name: '进口额', + type: 'bar', + barMaxWidth: 24, + barGap: '-100%', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#1B3052' }, + { offset: 1, color: '#32A5DE' }, + ]), + }, + data: [381], + }, + { + name: '出口额', + type: 'bar', + barMaxWidth: 23, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#1B3052' }, + { offset: 1, color: '#3684F2' }, + ]), + }, + data: [-158], + }, + ], +}; + +export const renderEcharts = (element: Ref) => { + const myChart: any = echarts.init(element.value, null, { + renderer: 'svg', + devicePixelRatio: window.devicePixelRatio, + }); + + debounceChart(myChart); + + myChart.setOption(option.value); +}; diff --git a/src/views/big-data/components/big-data-right/components/right-bottom.vue b/src/views/big-data/components/big-data-right/components/right-bottom.vue index bcfcbc3..b8e35d5 100644 --- a/src/views/big-data/components/big-data-right/components/right-bottom.vue +++ b/src/views/big-data/components/big-data-right/components/right-bottom.vue @@ -1,61 +1,21 @@