xjs
/
payment-statistics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化echarts渲染

master
xjs 2025-05-27 14:27:53 +08:00
parent 8311f20c82
commit ebf464b881
9 changed files with 68 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/components/AskSection.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h-[358px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0">
<div class="h-[358px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
<SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
@ -11,7 +11,7 @@
</div>
</div>
</div>
<div class="w-full h-[calc(100%-36px)] mt-[36px]">
<div class="w-full h-[calc(100%-36px)]">
<AskSectionChart :chart-data="askSectionData.stages || []" />
</div>
</div>

6
src/views/components/ChargingRanking.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0">
<div class="h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
@ -8,7 +8,7 @@
<div class="text-color text-[20px] ml-[9px] font-700" data-text="收费排行榜">收费排行榜</div>
</div>
</div>
<div class="w-[296px] h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="w-[296px] h-[calc(100%-36px)] flex flex-col">
<div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
<div class="text-[15px] text-[#84E8FF]">更多</div>
<SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />

6
src/views/components/OfflineStatus.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="w-[296px] h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0">
<div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
@ -8,7 +8,7 @@
<div class="text-[20px] ml-[9px] font-700 text-color" data-text="线下详情">线下详情</div>
</div>
</div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="w-full h-[calc(100%-36px)] flex flex-col">
<div class="ml-[22px] relative mt-[13px] flex items-center justify-center">
<ProportionCharts :chart-data="chartData" class="" />
<div class="leading-[1] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3 flex items-center flex-col font-700 italic">

6
src/views/components/OnlineStatus.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="w-[296px] h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0">
<div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
@ -8,7 +8,7 @@
</div>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
</div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="w-full h-[calc(100%-36px)] flex flex-col">
<div class="ml-[22px] relative mt-[13px] flex items-center justify-center">
<ProportionCharts :chart-data="chartData" class="" />
<div class="leading-[1] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3 flex items-center flex-col font-700 italic">

6
src/views/components/OperatingTrends.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h-[358px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0">
<div class="h-[358px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
<SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center flex leading-[30px] items-baseline">
@ -8,7 +8,7 @@
<div class="text-[20px] ml-[9px] font-700 text-color" data-text="经营趋势">经营趋势</div>
</div>
</div>
<div class="w-full h-[calc(100%-36px)] mt-[36px]">
<div class="w-full h-[calc(100%-36px)]">
<OperatingTrendsChart :chartDataArray="acqTrend" @date-change="handleDateChange" />
</div>
</div>

6
src/views/components/SixStatistics.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="w-[296px] h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0">
<div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
@ -8,7 +8,7 @@
<div class="text-[20px] ml-[9px] font-700 text-color" data-text="六纬志愿">六纬志愿</div>
</div>
</div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="w-full h-[calc(100%-36px)] flex flex-col">
<div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
<div class="text-[15px] text-[#84E8FF]">更多</div>
<SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />

4
src/views/components/TodayPayment.vue
View File

@ -3,12 +3,12 @@
<SvgComponent :content="groupSvg" class="w-[312px] h-[210px]" />
<div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] pl-[14px] pr-[19px] flex items-center">
<div class="relative w-[144px] h-[113px] flex items-center flex-col">
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
<div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div>
<div class="mb-[15px] z-10 font-700 leading-[1] flex items-baseline">
<div class="mb-[15px] font-700 leading-[1] flex items-baseline">
<span class="text-[34px] italic text-color" :data-text="paymentData.toDayTotal">{{paymentData.toDayTotal || 0}}</span>
<span class="text-[18px] text-color" data-text="人">人</span>
</div>
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
</div>
<div class="relative ml-[12px]">
<SvgComponent :content="paymentBorderSvg" class="w-[127px] h-[104px] z-1" />

6
src/views/components/WinCustomer.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0">
<div class="h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
@ -8,7 +8,7 @@
<div class="text-color text-[20px] ml-[9px] font-700" data-text="获客排行榜">获客排行榜</div>
</div>
</div>
<div class="w-[296px] h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="w-[296px] h-[calc(100%-36px)] flex flex-col">
<div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
<div class="text-[15px] text-[#84E8FF]">更多</div>
<SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />

91
src/views/components/chartsComponents/StudentSourceChart.vue
View File

@ -135,8 +135,7 @@
hovered: false,
k: k,
},
animation: true,
zlevel: 1,
animation: false,
};
if (pieData[i].itemStyle) {
@ -234,52 +233,52 @@
opacity: 1,
borderWidth: 0,
},
z: 1,
// z: 0,
},
],
graphic: [
// {
// id: "backgroundImg",
// elements: [
// {
// type: "image",
// left: "center",
// top: "33%",
// style: {
// image: "/images/particleBase.png",
// width: 254,
// height: 106,
// },
// z: 0,
// cursor: "point",
// origin: [127, 53],
// // keyframeAnimation: [
// // {
// // duration: 1600,
// // loop: true,
// // keyframes: [
// // {
// // percent: 0,
// // scaleX: 1.1,
// // scaleY: 1.1,
// // },
// // {
// // percent: 0.3,
// // scaleX: 1,
// // scaleY: 1,
// // },
// // {
// // percent: 1,
// // scaleX: 1.1,
// // scaleY: 1.1,
// // },
// // ],
// // },
// // ],
// },
// ],
// },
],
// graphic: [
// // {
// // id: "backgroundImg",
// // elements: [
// // {
// // type: "image",
// // left: "center",
// // top: "33%",
// // style: {
// // image: "/images/particleBase.png",
// // width: 254,
// // height: 106,
// // },
// // z: 0,
// // cursor: "point",
// // origin: [127, 53],
// // // keyframeAnimation: [
// // // {
// // // duration: 1600,
// // // loop: true,
// // // keyframes: [
// // // {
// // // percent: 0,
// // // scaleX: 1.1,
// // // scaleY: 1.1,
// // // },
// // // {
// // // percent: 0.3,
// // // scaleX: 1,
// // // scaleY: 1,
// // // },
// // // {
// // // percent: 1,
// // // scaleX: 1.1,
// // // scaleY: 1.1,
// // // },
// // // ],
// // // },
// // // ],
// // },
// // ],
// // },
// ],
};
};