From 5cc21c98806c7a659de3868c7df653d00abe0e5d Mon Sep 17 00:00:00 2001 From: "wkylin.w" Date: Tue, 9 Jul 2024 14:21:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E5=B1=8F=E5=8F=AF=E8=A7=86?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/bigScreen/bigHeader/index.tsx | 2 +- src/pages/bigScreen/chinaMap/index.tsx | 2 +- src/pages/bigScreen/index.tsx | 30 +- src/pages/bigScreen/offlinePortalOptions.ts | 317 ++++++++++++++++++++ 4 files changed, 346 insertions(+), 5 deletions(-) create mode 100644 src/pages/bigScreen/offlinePortalOptions.ts diff --git a/src/pages/bigScreen/bigHeader/index.tsx b/src/pages/bigScreen/bigHeader/index.tsx index 23a0bbc2..c63e987e 100644 --- a/src/pages/bigScreen/bigHeader/index.tsx +++ b/src/pages/bigScreen/bigHeader/index.tsx @@ -29,7 +29,7 @@ const BigHeader = () => { }, []) return ( -
+
{stateInfo.title} {timeStr}
diff --git a/src/pages/bigScreen/chinaMap/index.tsx b/src/pages/bigScreen/chinaMap/index.tsx index 735b1410..b0a238c2 100644 --- a/src/pages/bigScreen/chinaMap/index.tsx +++ b/src/pages/bigScreen/chinaMap/index.tsx @@ -91,7 +91,7 @@ const ChinaMap = () => { return (
diff --git a/src/pages/bigScreen/index.tsx b/src/pages/bigScreen/index.tsx index 31103847..9a05aaea 100644 --- a/src/pages/bigScreen/index.tsx +++ b/src/pages/bigScreen/index.tsx @@ -1,14 +1,24 @@ -import React, { useEffect, useRef } from 'react' +import React, { useState, useEffect, useRef } from 'react' import FixTabPanel from '@stateless/FixTabPanel' +import EChartsCommon from '@stateless/EChartsCommon' import { previewFitScale } from '@utils/previewScale' import BigHeader from './bigHeader' import styles from './index.module.less' import ChinaMap from './chinaMap' +import { OfflinePortalOptions } from './offlinePortalOptions' const BigScreen = () => { const scaleDom = useRef(null) + const [feedbackData] = useState({ + data1: [80, 152, 101, 134, 90, 130], + data2: [120, 182, 191, 210, 170, 110], + data3: [110, 132, 201, 154, 150, 80], + data4: [90, 142, 161, 114, 190, 170], + xData: ['9:00', '12:00', '15:00', '18:00', '21:00', '00:00'], + barData: [32.2, 60.0, 32.6, 36.4, 53.3, 35.0], + }) useEffect(() => { const { calcRate, windowResize, unWindowResize } = previewFitScale(1440, 900, scaleDom.current) calcRate() @@ -22,9 +32,23 @@ const BigScreen = () => {
-
左侧
+
+ +
-
右侧
+
+ +
diff --git a/src/pages/bigScreen/offlinePortalOptions.ts b/src/pages/bigScreen/offlinePortalOptions.ts new file mode 100644 index 00000000..5aa35abe --- /dev/null +++ b/src/pages/bigScreen/offlinePortalOptions.ts @@ -0,0 +1,317 @@ +import { graphic } from 'echarts/core' + +// 关联数据类别 +export const BrowseCategoriesOptions = (params: any) => ({ + radar: { + center: ['50%', '50%'], + radius: '70%', + name: { + formatter(name: any) { + const arr = [`{a|${name}}`] + return arr.join('\n') + }, + textStyle: { + rich: { + // 根据文字的组设置格式 + a: { + color: '#BCDCFF', + fontSize: 14, + fontWeight: 600, + fontFamily: 'Source Han Sans CN', + }, + }, + }, + }, + // 名字和图形的距离 + nameGap: 5, + indicator: params.indicator, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + splitArea: { + areaStyle: { + color: [ + 'rgba(84,136,255, 0.05)', + 'rgba(84,136,255, 0.1)', + 'rgba(84,136,255, 0.2)', + 'rgba(84,136,255, 0.3)', + 'rgba(84,136,255, 0.4)', + 'rgba(84,136,255, 0.5)', + ].reverse(), + shadowColor: 'rgba(0, 0, 0, .5)', + shadowBlur: 5, + shadowOffsetX: 10, + shadowOffsetY: 10, + }, + }, + }, + series: [ + { + name: '用户浏览类别', + type: 'radar', + data: [params.data], + label: { + show: false, + formatter(param: any) { + return `${param.value}万` + }, + color: '#9ae8ac', + distance: 10, + align: 'right', + }, + symbol: 'none', + symbolSize: [6, 6], + // 边缘颜色 + lineStyle: { + color: 'rgba(160,159,246, 0.6)', + width: 2, + }, + areaStyle: { + color: 'rgba(114,113,233,.4)', + opacity: 0.8, + shadowColor: 'rgba(115,149,255,1)', + shadowBlur: 10, + }, + }, + ], +}) + +// 反馈 +export const FeedbackOptions = (params: any) => ({ + title: { + text: `${params.number}%`, + left: '45%', + top: '40%', + textAlign: 'center', + textStyle: { + fontSize: '16', + fontWeight: '500', + color: '#909dff', + textAlign: 'center', + }, + }, + series: [ + { + type: 'pie', + startAngle: 0, + radius: ['80%', '70%'], + center: ['50%', '50%'], + data: [ + { + value: params.number, + name: params.title, + itemStyle: { + normal: { + color: new graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#5a8bfa', + }, + { + offset: 1, + color: '#831bdb', + }, + ]), + shadowColor: 'rgba(175,143,230,.5)', + shadowBlur: 10, + }, + }, + label: { + show: false, + }, + labelLine: { + normal: { + smooth: true, + lineStyle: { + width: 0, + }, + }, + }, + hoverAnimation: false, + }, + { + label: { + show: false, + }, + labelLine: { + normal: { + smooth: true, + lineStyle: { + width: 0, + }, + }, + }, + value: 100 - params.number, + hoverAnimation: true, + itemStyle: { + color: 'rgba(79,76,192, 0.3)', + }, + }, + ], + }, + ], +}) + +// 线下门店流量 +export const OfflinePortalOptions = (params: any) => ({ + color: ['#73A0FA', '#73DEB3', '#32C5E9', '#67E0E3'], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999', + }, + lineStyle: { + type: 'dashed', + }, + }, + }, + grid: { + left: '15', + right: '15', + bottom: '0', + top: '30', + containLabel: true, + }, + legend: { + data: ['旗舰店', '小寨店', '钟楼店', '回民街店'], + show: false, + textStyle: { + color: '#BCDCFF', + }, + }, + xAxis: [ + { + type: 'category', + data: params.xData, + axisLabel: { + color: '#BCDCF0', + textStyle: { + fontSize: 12, + }, + }, + splitLine: { + show: false, + }, + axisTick: { + show: true, + }, + axisLine: { + show: false, + }, + boundaryGap: true, + }, + { + type: 'category', + axisLabel: { + color: '#BCDCF0', + textStyle: { + fontSize: 12, + }, + }, + splitLine: { + show: false, + }, + axisTick: { + show: true, + }, + axisLine: { + show: false, + }, + boundaryGap: true, + }, + ], + yAxis: [ + { + type: 'value', + name: '单位/人', + nameTextStyle: { + color: '#BCDCFF', + }, + axisLabel: { + color: '#BCDCF0', + textStyle: { + fontSize: 12, + }, + }, + splitLine: { + show: true, + lineStyle: { + color: '#252938', + }, + }, + axisTick: { + show: true, + }, + axisLine: { + show: true, + }, + }, + { + type: 'value', + min: 0, + max: 100, + interval: 20, + name: '密度', + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: '#94b5ca', + }, + }, + }, + ], + series: [ + { + name: '门店1', + type: 'line', + data: params.data1, + }, + { + name: '旗舰店', + type: 'line', + data: params.data2, + }, + { + name: '小寨店', + type: 'line', + data: params.data3, + }, + { + name: '钟楼店', + type: 'line', + data: params.data4, + }, + { + name: '额度', + type: 'bar', + data: params.barData, + itemStyle: { + normal: { + color: new graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(34,224,214,.8)', + }, + { + offset: 0.5, + color: 'rgba(5,137,186,1)', + }, + { + offset: 1, + color: 'rgba(11,12,31,1)', + }, + ]), + barBorderRadius: 7.5, + }, + }, + barMaxWidth: 15, + }, + ], +})