Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
65d3b4bb by zhangmeng
Options

饼图

1 parent 14368e7c
Inline Side-by-side
Showing 4 changed files with 260 additions and 193 deletions
src/layoutPc/components/AppHeader.vue
......@@ -7,7 +7,7 @@
<LoginDialog ref="pcloginDialog" @submitForm="reFlash"/>
<!-- <img alt="" src="@/assets/image/top.png" style="width: 100%">-->
<h1 class="text-top pd20">
数据统计截至2025-03-20 12:00:30
数据统计截至{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}
</h1>
<div class="date">
<svg :height="`calc(100*100vw/1920)`" :width="`calc(300*100vw/1920)`" xmlns="http://www.w3.org/2000/svg">
......@@ -30,7 +30,6 @@
import {computed, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import useUserStore from '@/store/modules/user'
import {Search, UserFilled} from '@element-plus/icons-vue'
import {getCurrentInstance, onMounted} from '@vue/runtime-core'
import _ from 'lodash'
import LoginDialog from '@/viewsPc/login'
......@@ -91,10 +90,9 @@ watch(() => useUserStore().visitor, (val) => {
<style lang="scss" scoped>
h1 {
font-family: 'YouSheBiaoTiHei';
font-family: 'YouSheBiaoTiHei', serif;
position: relative;
top: calc(15 * 100vw / 1920);
//background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);
font-size: calc(32 * 100vw / 1920);
//-webkit-background-clip: text;
//-webkit-text-fill-color: transparent;
......
src/layoutPc/index.vue
......@@ -22,6 +22,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
.bg {
width: 100vw;
height: 100vh;
//overflow: hidden;
//background: rgba(0,0,0,0.75)
background: url("@/assets/image/bg@2x.png") no-repeat top center;
background-size: 100% 100%;
......
src/viewsPc/home.vue
......@@ -19,16 +19,7 @@
import LeftPage from "@/viewsPc/vip/leftPage"
import CenterPage from "@/viewsPc/vip/centerPage"
import RightPage from "@/viewsPc/vip/rightPage"
import {onBeforeUnmount, ref} from "vue";
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, onMounted, onUnmounted} from "@vue/runtime-core";
const {proxy} = getCurrentInstance()
onMounted(() => {
})
</script>
<style lang="scss" scoped>
......
src/viewsPc/vip/leftPage.vue
......@@ -2,27 +2,65 @@
<div class="pd20">
<div class="chartCard">
<div class="title">应收款余额</div>
<div class="po_right">
<el-radio-group v-model="radioA" size="small" @change="radioAChange">
<el-radio-button label="本月" value="month"/>
<el-radio-button label="本季度" value="quarter"/>
<el-radio-button label="本年" value="year"/>
</el-radio-group>
<!-- <div class="po_right">-->
<!-- <el-radio-group v-model="radioA" size="small" @change="radioAChange">-->
<!-- <el-radio-button label="本月" value="month"/>-->
<!-- <el-radio-button label="本季度" value="quarter"/>-->
<!-- <el-radio-button label="本年" value="year"/>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div ref="zhuRef" style="width: 100%; height: 40vh;"></div>
<div class="chartCard mt30">
<div>
<div class="title">应收账款余额与收入</div>
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="全部基地(可多选)" value="month"/>-->
<!-- </el-select>-->
<!-- </div>-->
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="数据因素(可多选)" value="month"/>-->
<!-- </el-select>-->
<!-- </div>-->
</div>
<!-- <div class="po_right">-->
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month"/>-->
<!-- <el-radio-button label="本季度" value="quarter"/>-->
<!-- <el-radio-button label="本年" value="year"/>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">档案检索情况</div>
<div class="po_right">
<el-radio-group v-model="radioB" size="small" @change="radioBChange">
<el-radio-button label="本月" value="month"/>
<el-radio-button label="本季度" value="quarter"/>
<el-radio-button label="本年" value="year"/>
</el-radio-group>
<div>
<div class="title">应收账款余额组成</div>
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="全部基地(可多选)" value="month"/>-->
<!-- </el-select>-->
<!-- </div>-->
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="数据因素(可多选)" value="month"/>-->
<!-- </el-select>-->
<!-- </div>-->
</div>
<!-- <div class="po_right">-->
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month"/>-->
<!-- <el-radio-button label="本季度" value="quarter"/>-->
<!-- <el-radio-button label="本年" value="year"/>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<div ref="lineRef" style="width: 100%; height: 40vh;"></div>
<div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
</div>
</div>
</template>
......@@ -30,25 +68,29 @@
<script setup>
import {onMounted, ref, onUnmounted} from 'vue'
import _ from 'lodash'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
const zhuRef = ref(null)
const lineRef = ref(null)
const payeeRef = ref(null)
const kindList = ref([])
const dataA = ref([])
const radioA = ref('month')
const radioB = ref('month')
let chartA
let chartB
let chartC
let intervalA = null;
onMounted(() => {
// init()
window.addEventListener('resize', handleResize);
setA()
setB()
setC()
})
const init = () => {
......@@ -95,210 +137,243 @@ const getBdata = () => {
const setA = () => {
chartA = echarts.init(zhuRef.value)
const option = {
animation: true,
// dataset: dataA.value,
// dataZoom: [
// {
// show: false,
// start: 0,
// end: 100
// },
// {
// type: 'inside',
// start: 0,
// end: 100
// }
// ],
xAxis: [{
data: kindList.value,
axisLabel: {
inside: false,
color: '#7ECEF4',
fontSize: '1.1rem'
},
axisTick: {
show: false
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
right: 20,
top: '12%',
bottom: 20,
textStyle: {
color: '#FFF'
},
axisLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)'
formatter: function (name) {
let value = 0
for (let i = 0; i < option.series[2].data.length; i++) {
if (option.series[2].data[i].name === name) {
value = option.series[2].data[i].value;
break;
}
}
// 计算百分比
let percentage = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2) + '%';
return name + ' ' + percentage;
},
z: 10
}],
yAxis: {
name: '单位(次)',
nameTextStyle: {
color: '#7ECEF4',
fontSize: '1.2rem'
},
axisLine: {
show: false
series: [
{
type: 'pie',
center: ['25%', '50%'],
radius: '5%',
emphasis: {
radius: '5%',
show: false,
},
axisTick: {
data: [
{value: 110, name: ''},
],
label: {
show: false,
emphasis: {
show: false
},
axisLabel: {
color: '#7ECEF4',
fontSize: '1.3rem'
},
splitLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)',
type: 'dashed'
}
}
},
tooltip: {
alwaysShowContent: true,
formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText: 'box-shadow:none',
position: 'top',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: '1rem'
{
type: 'pie',
// selectedMode: 'single',
center: ['25%', '50%'],
radius: ['8%', '10%'],
avoidLabelOverlap: false,
label: {
show: false,
emphasis: {
show: false
}
},
series: [
data: [
{value: 12, name: ''},
]
},
{
type: 'bar',
barWidth: '10',
showBackground: false,
name: '应收款余额',
type: 'pie',
center: ['25%', '50%'],
radius: ['30%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 1, color: '#037FC9'},
{offset: 0, color: '#0C3C7E'}
])
borderWidth: 2,
// borderColor: '#fff',
},
label: {
show: false,
// position: 'center'
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 1, color: '#2378f7'},
{offset: 0, color: '#83bff6'}
])
label: {
show: false,
fontSize: 20,
fontWeight: 'bold'
}
},
data: dataA.value
}
labelLine: {
show: false
},
data: [
{value: 1048, name: '山西'},
{value: 735, name: '深圳'},
{value: 580, name: '上海'},
{value: 484, name: '海南'},
{value: 484, name: '郑州'},
{value: 484, name: '合肥'},
{value: 484, name: '武汉'},
{value: 300, name: '新疆'}
]
}
]
};
chartA.setOption(option)
autoHover(chartA, option, 0, 2000)
autoHover(chartA, option, 2, 2000)
}
const setB = () => {
chartB = echarts.init(lineRef.value)
const option = {
animation: true,
grid: {
top: '15%',
left: '12%',
right: '12%',
bottom: '12%'
},
// dataZoom: [
// {
// show: false,
// start: 0,
// end: 50
// },
// {
// type: 'inside',
// start: 0,
// end: 50
// }
// ],
tooltip: {
trigger: 'item',
formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
renderModer: 'html',
// alignItems: 'center',
className: 'downDot',
backgroundColor: 'rgba(8,13,86,0.2)',
borderWidth: 0,
extraCssText: 'box-shadow:none',
position: 'top',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: '10rem'
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: kindList.value,
axisTick: {
show: false
legend: {
top: '10%',
textStyle: {
color: '#FFF'
},
},
axisLabel: {
color: '#7ECEF4',
fontSize: '1.1rem'
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
axisLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)'
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '金额(万元)',
}
],
series: [
{
name: '2025年应收账款余额',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
},
yAxis: {
name: '单位(次)',
nameTextStyle: {
color: '#7ECEF4',
fontSize: '1.2rem'
{
name: '2024年应收账款余额',
type: 'bar',
emphasis: {
focus: 'series'
},
type: 'value',
axisLabel: {
fontSize: '1.3rem'
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
},
axisLine: {
lineStyle: {
color: '#03DAFD',
}
{
name: '2025年收入',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
},
{
name: '2024年收入',
type: 'bar',
emphasis: {
focus: 'series'
},
splitLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)',
type: 'dashed'
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
},
]
}
chartB.setOption(option)
autoHover(chartB, option, 0, 2000)
}
const setC = () => {
chartC = echarts.init(payeeRef.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: '10%',
textStyle: {
color: '#FFF'
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
stack: 'Ad',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '金额(万元)',
}
],
series: [
{
data: dataA.value,
type: 'line',
itemStyle: {
borderWidth: '0',
color: '#03DAFD',
name: '代收款',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
},
{
name: '收费单待签',
type: 'bar',
stack: 'Ad',
emphasis: {
itemStyle: {
color: '#fff',
borderColor: '#fff',
borderWidth: '4',
shadowColor: '#fff',
shadowBlur: '4',
}
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
},
{
name: '合同待签',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
},
label: {
show: false,
position: 'bottom',
formatter: '{c}',
fontSize: '1rem',
color: '#03DAFD'
}
}
]
}
chartB.setOption(option)
autoHover(chartB, option, 0, 2000)
chartC.setOption(option)
autoHover(chartC, option, 0, 2000)
}
const radioAChange = (e) => {
......@@ -328,6 +403,7 @@ function autoHover(myChart, option, index, time) {
function handleResize() {
chartA?.resize()
chartB?.resize()
chartC?.resize()
}
onUnmounted(() => {
......@@ -345,14 +421,15 @@ onUnmounted(() => {
}
.title {
padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
font-family: 'YouSheBiaoTiHei';
font-family: PingFang SC, serif;
font-weight: 600;
color: #FFFFFF;
//text-shadow: 0px 4px 3px #003F85;
font-size: calc(17 * 100vw / 1920);
background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
font-size: calc(20 * 100vw / 1920);
position: relative;
&::after {
......@@ -380,7 +457,7 @@ onUnmounted(() => {
}
.chartCard {
background: url("@/assets/img/box_bg.png") no-repeat top left;
background: url("@/assets/image/box01@2x.png") no-repeat top left;
background-size: 100% 100%;
position: relative;
overflow: hidden;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!