Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
b7998bdf by zhangmeng
Options

大屏初稿

1 parent 787223b9
Expand all
Inline Side-by-side
Showing 5 changed files with 148 additions and 197 deletions
src/layoutPc/index.vue
......@@ -23,7 +23,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
width: 100vw;
height: 100vh;
min-width: 1000px;
//overflow: hidden;
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/vip/leftPage.vue
......@@ -167,8 +167,7 @@ const setA = () => {
center: ['25%', '50%'],
radius: '5%',
emphasis: {
radius: '5%',
show: false,
scale: false
},
data: [
{value: 110, name: ''},
......@@ -188,9 +187,10 @@ const setA = () => {
avoidLabelOverlap: false,
label: {
show: false,
emphasis: {
show: false
}
},
emphasis: {
scale: false
},
data: [
{value: 12, name: ''},
......@@ -204,6 +204,7 @@ const setA = () => {
avoidLabelOverlap: false,
itemStyle: {
borderWidth: 2,
opacity: 0.8,
// borderColor: '#fff',
},
label: {
......
src/viewsPc/vip/rightPage.vue
<template>
<div class="pd20">
<div class="chartCard">
<div class="title">查档接待情况</div>
<div class="title">开票计划与执行</div>
<div class="po_right">
<el-radio-group v-model="radioA" size="small" @change="radioAChange">
<el-radio-button label="本月" value="month"/>
......@@ -10,11 +10,11 @@
</el-radio-group>
</div>
<div ref="zhuRef" style="width: 100%; height: 40vh;"></div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">档案接收总览</div>
<div class="title">回款</div>
<div class="po_right">
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month" />-->
......@@ -23,7 +23,11 @@
<!-- </el-radio-group>-->
</div>
<div ref="lineRef" style="width: 100%; height: 40vh;"></div>
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">逾期360天以上未开票</div>
<div ref="overdueRef" style="width: 100%; height: 25vh;"></div>
</div>
</div>
</template>
......@@ -37,16 +41,20 @@ import * as api from "@/apiPc/common"
const zhuRef = ref(null)
const lineRef = ref(null)
const overdueRef = ref(null)
const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
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 = () => {
clear()
......@@ -77,98 +85,51 @@ const getA = () => {
const setA = () => {
chartA = echarts.init(zhuRef.value)
const option = {
animation: true,
// 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
},
axisLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)'
}
},
z: 10
}],
yAxis: {
name: '单位(次)',
nameTextStyle: {
color: '#7ECEF4',
fontSize: '1.2rem'
},
axisLine: {
show: false
},
axisTick: {
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="font-size: 1.5rem">{c}</div>',
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText: 'box-shadow:none',
position: 'top',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: '1.5rem'
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
top: "3%"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
},
series: [
{
type: 'pictorialBar',
barGap: '0%',
symbol: 'path://M0,10 L10,10 C8,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
showBackground: false,
itemStyle: {
borderWidth: 0,
borderColor: '#B8FFF4',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 1, color: 'rgba(184, 255, 244, 0.1)'},
{offset: 0, color: 'rgba(184, 255, 244, 0.8)'}
])
name: 'Direct',
type: 'bar',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
},
{
name: 'Direct',
type: 'bar',
label: {
show: true
},
emphasis: {
svgPath: 'M0,0 L5,0 L5,5 L0,5 Z',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 1, color: '#2378f7'},
{offset: 0, color: '#83bff6'}
])
}
focus: 'series'
},
data: dataA.value
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
}
]
}
......@@ -192,125 +153,113 @@ const getB = () => {
const setB = () => {
chartB = echarts.init(lineRef.value)
const option = {
animation: true,
grid: {
top: '15%',
left: '15%',
right: '10%',
bottom: '12%'
},
// dataZoom: [
// {
// show: false,
// start: 0,
// end: 100
// },
// {
// type: 'inside',
// start: 0,
// end: 100
// }
// ],
tooltip: {
trigger: 'item',
formatter: '<div style="font-size: 1.5rem">{c}</div>',
renderModer: 'html',
className: 'downDot',
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText: 'box-shadow:none',
position: 'top',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: '1.5rem'
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
top: "3%"
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: kindList.value,
axisTick: {
show: false
},
axisLabel: {
color: '#7ECEF4',
fontSize: '1.1rem',
interval: 0
},
axisLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)'
}
},
type: 'value'
},
yAxis: {
name: '单位(卷/件)',
nameTextStyle: {
color: '#7ECEF4',
fontSize: '1.2rem'
},
type: 'value',
axisLabel: {
fontSize: '1.3rem'
},
axisLine: {
lineStyle: {
color: '#03DAFD',
}
},
splitLine: {
show: true,
lineStyle: {
color: 'RGBA(38, 81, 128, 1)',
type: 'dashed'
}
}
type: 'category',
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
},
series: [
{
data: dataA.value,
type: 'line',
itemStyle: {
borderWidth: '0',
color: '#3A80D5',
name: 'Direct',
type: 'bar',
label: {
show: true
},
emphasis: {
itemStyle: {
color: '#fff',
borderColor: '#fff',
borderWidth: '4',
shadowColor: '#fff',
shadowBlur: '4',
}
},
label: {
show: false,
position: 'bottom',
formatter: '{c}',
fontSize: 12,
color: '#03DAFD'
focus: 'series'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(128, 255, 165,0.5)'
},
{
offset: 1,
color: 'rgba(1, 191, 236,0.5)'
}
])
}
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
}
]
}
chartB.setOption(option)
autoHover(chartB, option, 0, 2000)
}
const setC = () => {
chartC = echarts.init(overdueRef.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: [
{
name: '0-180天未开票',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
},
{
name: '180-360天未开票',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
},
{
name: '逾期360天以上',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
},
]
}
chartC.setOption(option)
autoHover(chartC, option, 0, 2000)
}
const radioAChange = (e) => {
getA()
}
......@@ -335,6 +284,7 @@ function autoHover(myChart, option, index, time) {
function handleResize() {
chartA?.resize()
chartB?.resize()
chartC?.resize()
}
onUnmounted(() => {
......@@ -386,7 +336,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!