jiangxucong
/
dq-ems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

统计分析

Browse Source
main
wangyunfei888 1 month ago
parent fd208e9c0f
commit 382e275528
2 changed files with 67 additions and 20 deletions
Show Stats Download Patch File Download Diff File

60
src/pages/business_environmental_activities/components/StatisticsAnalysis.js
Unescape Escape View File

@ -9,17 +9,24 @@ const statusOptions = [
{ label: '环保事件', value: 'incident' },
];
const CardTitle = ({ children }) => (
<div className={styles.cardTitle}>
<span className={styles.cardTitleIcon} />
{children}
</div>
);
const StatisticsAnalysis = () => {
const activityTypeOption = useMemo(
() => ({
color: ['#6abdfc', '#a585ff', '#fa8c16', '#ff6b6b'],
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', left: '70%' },
color: ['#1cd863', '#39a6ff', '#ffa74f', '#be70f0'],
// tooltip: { trigger: 'item' },
// legend: { orient: 'vertical', left: '70%' },
series: [
{
type: 'pie',
radius: ['30%', '60%'],
center: ['35%', '50%'],
center: ['50%', '50%'],
label: { formatter: '{b}: {d}%' },
data: [
{ value: 30, name: '培训' },
@ -35,18 +42,20 @@ const StatisticsAnalysis = () => {
const participationOption = useMemo(
() => ({
color: ['#6ee7d8', '#8fd0ff'],
color: ['#AAFFE1', '#009DFF'],
tooltip: { trigger: 'axis' },
grid: { left: 80, right: 30, top: 30, bottom: 30 },
xAxis: {
type: 'value',
boundaryGap: [0, 0.1],
axisLine: { lineStyle: { color: '#d8dfe6' } },
axisLabel: { color: '#333' },
},
yAxis: {
type: 'category',
data: ['xxx部门', 'xxx部门', 'xxx部门', 'xxx部门', 'xxx部门', 'xxx部门'],
axisLine: { lineStyle: { color: '#d8dfe6' } },
axisLabel: { color: '#333' },
},
series: [
{
@ -54,6 +63,19 @@ const StatisticsAnalysis = () => {
type: 'bar',
barWidth: 16,
data: [92, 88, 74, 56, 48, 30],
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: '#AAFFE1' },
{ offset: 1, color: '#009DFF' },
],
},
},
label: { show: false },
},
],
@ -64,13 +86,13 @@ const StatisticsAnalysis = () => {
const incidentTypeOption = useMemo(
() => ({
color: ['#4b7bff', '#5fd6f1', '#2fd192', '#ff9f7f', '#e85d8b', '#5e6ce6'],
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', right: 10, top: 'middle' },
// tooltip: { trigger: 'item' },
// legend: { orient: 'vertical', right: 10, top: 'middle' },
series: [
{
type: 'pie',
radius: ['40%', '65%'],
center: ['40%', '50%'],
radius: ['0%', '65%'],
center: ['50%', '50%'],
label: { formatter: '{b} {d}%' },
data: [
{ value: 45, name: 'xxx2' },
@ -89,12 +111,12 @@ const StatisticsAnalysis = () => {
const trendOption = useMemo(
() => ({
color: ['#6abdfc', '#f7a35c'],
tooltip: { trigger: 'axis' },
// tooltip: { trigger: 'axis' },
grid: { left: 50, right: 50, top: 30, bottom: 40 },
xAxis: [{ type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }],
xAxis: [{ type: 'category', axisLabel: { color: '#333' }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }],
yAxis: [
{ type: 'value', name: '活动数', axisLine: { lineStyle: { color: '#d8dfe6' } } },
{ type: 'value', name: '参与率', axisLine: { lineStyle: { color: '#d8dfe6' } } },
{ type: 'value', name: '活动数', axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#d8dfe6' } } },
{ type: 'value', name: '参与率', axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#d8dfe6' } } },
],
series: [
{
@ -108,7 +130,7 @@ const StatisticsAnalysis = () => {
type: 'line',
yAxisIndex: 1,
data: [55, 60, 58, 63, 60, 62, 65, 63, 64, 68, 66, 70],
smooth: true,
smooth: false,
},
],
}),
@ -147,26 +169,26 @@ const StatisticsAnalysis = () => {
<div className={styles.rowThree}>
<div className={styles.card}>
<div className={styles.cardTitle}>活动类型分布</div>
<CardTitle>活动类型分布</CardTitle>
<ReactECharts option={activityTypeOption} style={{ height: 240 }} />
</div>
<div className={styles.card}>
<div className={styles.cardTitle}>活动参与热度</div>
<CardTitle>活动参与热度</CardTitle>
<ReactECharts option={participationOption} style={{ height: 240 }} />
</div>
<div className={styles.card}>
<div className={styles.cardTitle}>事件类型分布</div>
<CardTitle>事件类型分布</CardTitle>
<ReactECharts option={incidentTypeOption} style={{ height: 240 }} />
</div>
</div>
<div className={styles.rowTwo}>
<div className={styles.cardWide}>
<div className={styles.cardTitle}>月度活动趋势</div>
<CardTitle>月度活动趋势</CardTitle>
<ReactECharts option={trendOption} style={{ height: 240 }} />
</div>
<div className={styles.card}>
<div className={styles.cardTitle}>事件部门分布</div>
<CardTitle>事件部门分布</CardTitle>
<ReactECharts option={departmentOption} style={{ height: 240 }} />
</div>
</div>

27
src/pages/business_environmental_activities/components/StatisticsAnalysis.less
Unescape Escape View File

@ -22,6 +22,20 @@
justify-content: flex-end;
}
:global(.ant-checkbox-wrapper-checked .ant-checkbox-inner) {
background: rgba(0, 212, 138, 1);
border-color: rgba(0, 212, 138, 1);
}
:global(.ant-checkbox-wrapper-checked::after) {
color: #fff;
}
:global(.ant-checkbox-wrapper-checked:hover .ant-checkbox-inner) {
background: rgba(0, 212, 138, 1);
border-color: rgba(0, 212, 138, 1);
}
.exportButton {
background: #fff !important;
border: 1px solid rgba(215, 215, 215, 1) !important;
@ -69,17 +83,28 @@
.card,
.cardWide {
background: #fff;
border-radius: 10px;
border-radius: 2px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
padding: 10px 12px 6px;
display: flex;
flex-direction: column;
.cardTitle {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
.cardTitleIcon {
width: 3px;
height: 16px;
border-radius: 1px;
background: rgba(0, 157, 111, 1);
flex-shrink: 0;
}
}
}
}
Write Preview
Loading…
Cancel
Save