Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
174aa61b by zhangmeng
Options

大屏

1 parent 59939518
Inline Side-by-side
Showing 1 changed file with 177 additions and 31 deletions
src/viewsPc/vip/centerPage.vue
......@@ -81,9 +81,12 @@
</div>
<hr>
</div>
<div>
<div class="father">
<div class="bingTitle tex4">
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
DSO天数
</div>
<div ref="zhuRef4" style="width: 100%;height: 17vh">
1234
</div>
</div>
</div>
......@@ -212,7 +215,7 @@ const handelBing1 = () => {
{value: 1048, name: 'Search Engine'},
],
itemStyle: {
color: 'rgba(1, 162, 237, .5)',
color: 'rgba(1, 162, 237, .3)',
},
},
{
......@@ -236,7 +239,7 @@ const handelBing1 = () => {
{value: 735, name: '2025'}
],
itemStyle: {
color: 'rgba(1, 162, 237, .5)',
color: 'rgba(1, 162, 237, .3)',
},
},
{
......@@ -264,7 +267,6 @@ const handelBing1 = () => {
]
},
},
barWidth: '40%'
}
]
}
......@@ -288,9 +290,6 @@ const handelBing2 = () => {
label: {
show: false
},
itemStyle: {
borderWidth: 2
},
emphasis: {
scale: false
},
......@@ -300,7 +299,11 @@ const handelBing2 = () => {
{value: 48, name: '1'},
{value: 1, name: '1'},
{value: 48, name: '1'}
]
],
itemStyle: {
color: 'rgba(1, 162, 237, 1)',
},
barWidth: 2
},
{
name: '2',
......@@ -317,9 +320,12 @@ const handelBing2 = () => {
scale: false
},
data: [
{value: 1048, name: 'Search Engine'},
{value: 1048, name: 'Search Engine', itemStyle: {color: "rgba(0, 255, 190,1)"}},
{value: 735, name: 'Direct'}
]
],
itemStyle: {
color: 'rgba(1, 162, 237, .5)',
},
},
{
name: '3',
......@@ -339,8 +345,17 @@ const handelBing2 = () => {
endAngle: 360,
data: [
{value: 1048, name: '2025'},
{value: 735, name: '2025'}
]
],
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)'} // 底部颜色
]
},
},
},
]
}
......@@ -364,9 +379,6 @@ const handelBing3 = () => {
label: {
show: false
},
itemStyle: {
borderWidth: 2
},
emphasis: {
scale: false
},
......@@ -376,7 +388,10 @@ const handelBing3 = () => {
{value: 48, name: '1'},
{value: 1, name: '1'},
{value: 48, name: '1'}
]
],
itemStyle: {
color: 'rgba(1, 162, 237, 1)',
},
},
{
name: '2',
......@@ -393,9 +408,24 @@ const handelBing3 = () => {
scale: false
},
data: [
{value: 1048, name: 'Search Engine'},
{
value: 1048, name: 'Search Engine',
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)'} // 底部颜色
]
}
}
},
{value: 735, name: 'Direct'}
]
],
itemStyle: {
color: 'rgba(1, 162, 237, .3)',
},
},
{
name: '3',
......@@ -415,8 +445,17 @@ const handelBing3 = () => {
endAngle: 360,
data: [
{value: 1048, name: '2025'},
{value: 735, name: '2025'}
]
],
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)'} // 底部颜色
]
},
},
},
]
}
......@@ -548,23 +587,53 @@ const handelZhu2 = () => {
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: 1,
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(32, 217, 170, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
]
},
borderColor: 'rgba(0, 255, 190, 1)',
borderWidth: 1
},
barWidth: '35%',
},
{
name: '2024年',
......@@ -572,7 +641,20 @@ const handelZhu2 = () => {
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(32, 217, 170, .5)'}, // 顶部颜色
{offset: 1, color: 'rgba(8, 130, 160, .5)'} // 底部颜色
]
},
borderColor: 'rgba(0, 255, 190, 1)',
borderWidth: 1
},
barWidth: '35%',
},
]
}
......@@ -584,7 +666,7 @@ const handelZhu3 = () => {
const option = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
title: {
text: '2025年'
text: ''
},
tooltip: {
trigger: 'axis',
......@@ -616,12 +698,28 @@ const handelZhu3 = () => {
{
type: 'category',
boundaryGap: false,
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'
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
},
}
],
series: [
......@@ -631,7 +729,7 @@ const handelZhu3 = () => {
stack: 'Total',
smooth: false,
lineStyle: {
width: 0
width: 2
},
showSymbol: false,
areaStyle: {
......@@ -658,7 +756,7 @@ const handelZhu3 = () => {
stack: 'Total',
smooth: false,
lineStyle: {
width: 0
width: 2
},
showSymbol: false,
areaStyle: {
......@@ -708,13 +806,29 @@ const handelZhu4 = () => {
{
type: 'category',
stack: 'Ad',
data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海']
data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海'],
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
}
],
yAxis: [
{
type: 'value',
name: '金额(万元)',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
},
}
],
series: [
......@@ -725,7 +839,20 @@ const handelZhu4 = () => {
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390]
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
]
},
borderColor: 'rgba(0, 255, 190, 1)',
borderWidth: 1
},
barWidth: '35%',
},
]
}
......@@ -755,6 +882,25 @@ function autoHover(myChart, option, index, time) {
.father {
position: relative;
.tex4 {
position: absolute;
font-family: PingFang SC, serif;
font-weight: 500;
font-size: calc(18 * 100vw / 1920);
color: #D1D6DF;
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;
display: flex;
margin-top: calc(5 * 100vw / 1920);
.titleImg {
display: block;
width: calc(50 * 100vw / 1920);
height: calc(20 * 100vw / 1920);
}
}
}
.dong {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!