Skip to content

杨炀 / dangan_dataV

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

大屏

1 parent 881defcf
Inline Side-by-side
Showing 1 changed file with 121 additions and 28 deletions
src/viewsPc/vip/centerPage.vue
......@@ -25,7 +25,7 @@
</div>
<div class="bottom">
<div class="father">
<div class="father dong">
<div style="display: flex">
<div class="bing" style="width: 30%">
<div class="bingTitle">
......@@ -173,13 +173,11 @@ const handelBing1 = () => {
name: '1',
type: 'pie',
radius: ['99%', '100%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: false
},
itemStyle: {
borderWidth: 2
},
emphasis: {
scale: false
},
......@@ -189,13 +187,17 @@ const handelBing1 = () => {
{value: 48, name: '1'},
{value: 1, name: '1'},
{value: 48, name: '1'}
]
],
itemStyle: {
color: 'rgba(1, 162, 237, 1)',
},
barWidth: 2
},
{
name: '2',
type: 'pie',
radius: ['75%', '95%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: false
},
......@@ -206,15 +208,18 @@ const handelBing1 = () => {
scale: false
},
data: [
{value: 735, name: 'Direct', itemStyle: {color: "rgb(255,217,0)"}},
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'}
]
],
itemStyle: {
color: 'rgba(1, 162, 237, .5)',
},
},
{
name: '3',
type: 'pie',
radius: ['55%', '70%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: true,
position: 'center',
......@@ -227,15 +232,18 @@ const handelBing1 = () => {
startAngle: 180,
endAngle: 360,
data: [
{value: 1048, name: '2025'},
{value: 1048, name: '2025', itemStyle: {color: "rgba(240, 255, 0, .5)"}},
{value: 735, name: '2025'}
]
],
itemStyle: {
color: 'rgba(1, 162, 237, .5)',
},
},
{
name: '4',
type: 'pie',
radius: ['38%', '50%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: false
},
......@@ -245,7 +253,18 @@ const handelBing1 = () => {
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
data: [{value: 1048, name: ''}]
data: [{value: 1048, name: ''}],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
]
},
},
barWidth: '40%'
}
]
}
......@@ -265,7 +284,7 @@ const handelBing2 = () => {
name: '1',
type: 'pie',
radius: ['99%', '100%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: false
},
......@@ -287,7 +306,7 @@ const handelBing2 = () => {
name: '2',
type: 'pie',
radius: ['75%', '95%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: false
},
......@@ -306,7 +325,7 @@ const handelBing2 = () => {
name: '3',
type: 'pie',
radius: ['55%', '70%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: true,
position: 'center',
......@@ -341,7 +360,7 @@ const handelBing3 = () => {
name: '1',
type: 'pie',
radius: ['99%', '100%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: false
},
......@@ -363,7 +382,7 @@ const handelBing3 = () => {
name: '2',
type: 'pie',
radius: ['75%', '95%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: false
},
......@@ -382,7 +401,7 @@ const handelBing3 = () => {
name: '3',
type: 'pie',
radius: ['55%', '70%'],
center: ['50%', '70%'],
center: ['50%', '60%'],
label: {
show: true,
position: 'center',
......@@ -422,31 +441,62 @@ const handelZhu1 = () => {
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
left: '0%',
right: '0%',
bottom: '1%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
}
],
yAxis: [
{
type: 'value',
name: '单位(万)',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
}
],
series: [
{
name: '2025年',
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,]
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(242, 196, 0, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(153, 101, 0, 1)'} // 底部颜色
]
},
borderColor: 'rgba(240, 255, 0, 1)',
borderWidth: 1
},
barWidth: '35%',
borderColor: 'rgba(240, 255, 0, 1)'
},
{
name: '2024年',
......@@ -454,7 +504,20 @@ const handelZhu1 = () => {
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(242, 196, 0, .5)'}, // 顶部颜色
{offset: 1, color: 'rgba(153, 101, 0, .5)'} // 底部颜色
]
},
borderColor: 'rgba(240, 255, 0, 1)',
borderWidth: 1
},
barWidth: '35%',
},
]
}
......@@ -691,6 +754,23 @@ function autoHover(myChart, option, index, time) {
.father {
position: relative;
}
.dong {
position: relative;
&::after {
content: '';
width: 40%;
height: 40%;
background: url("@/assets/img/line2.png") no-repeat;
background-size: contain;
position: absolute;
top: -25%;
left: 0;
animation: movelr 4s ease-in infinite;
}
}
.top {
......@@ -707,6 +787,7 @@ function autoHover(myChart, option, index, time) {
width: calc(140 * 100vw / 1920);
height: calc(210 * 100vh / 1920);
.titleTop {
text-align: center;
font-family: PingFang SC, serif;
......@@ -802,6 +883,7 @@ function autoHover(myChart, option, index, time) {
position: relative;
overflow: hidden;
.bing {
text-align: center;
......@@ -826,8 +908,8 @@ function autoHover(myChart, option, index, time) {
.bingBottom {
position: absolute;
z-index: 99;
bottom: 0;
z-index: 9;
bottom: 4%;
left: 0;
width: 30%;
......@@ -842,4 +924,15 @@ function autoHover(myChart, option, index, time) {
}
}
@keyframes movelr {
0% {
left: 0;
opacity: 1;
}
100% {
left: calc(220 * 100vw / 1920);
opacity: 0;
}
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!