Skip to content

杨炀 / dangan_dataV

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

大屏

1 parent 174aa61b
Inline Side-by-side
Showing 2 changed files with 276 additions and 34 deletions
src/viewsPc/vip/centerPage.vue
......@@ -685,7 +685,9 @@ const handelZhu3 = () => {
},
toolbox: {
feature: {
saveAsImage: {}
saveAsImage: {
show: false
}
}
},
grid: {
......@@ -1081,4 +1083,9 @@ function autoHover(myChart, option, index, time) {
}
}
hr {
border: 0;
border-top: 1px solid #373e51;
}
</style>
......
src/viewsPc/vip/rightPage.vue
......@@ -2,13 +2,13 @@
<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>
<!-- <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>
......@@ -88,48 +88,93 @@ const setA = () => {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
top: "3%"
top: "3%",
textStyle: {
color: '#FFF'
},
},
grid: {
top: "30",
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
},
yAxis: {
type: 'category',
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 1)',
width: 1,
type: 'solid'
}
},
},
series: [
{
name: 'Direct',
name: '计划金额',
type: 'bar',
barGap: 0,
label: {
show: true
show: false
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(0, 162, 255, .5)'}, // 顶部颜色
{offset: 1, color: 'rgba(34, 117, 255, .5)'} // 底部颜色
],
},
borderColor: 'rgba(0, 246, 255, 1)',
// borderWidth: 1
},
// barWidth: '30%'
},
{
name: 'Direct',
name: '执行金额',
type: 'bar',
label: {
show: true
show: false
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
],
},
borderColor: 'rgba(0, 246, 255, 1)',
borderWidth: 1
},
}
]
}
......@@ -160,33 +205,169 @@ const setB = () => {
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
top: "3%"
},
grid: {
top: "15%",
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
},
},
yAxis: {
type: 'category',
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克']
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
},
series: [
{
name: 'Direct',
type: 'bar',
label: {
show: true
show: false
},
itemStyle: {
// 设置柱状图顶部圆角（半圆形）
borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320, 330, 320]
data: [
{
value: 320,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
],
},
}
},
{
value: 302,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
],
},
}
},
{
value: 301,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
],
},
}
},
{
value: 334,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
],
},
}
},
{
value: 390,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
],
},
}
},
{
value: 330,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
],
},
}
},
{
value: 320,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
],
},
}
},
{
value: 330,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
],
},
}
},
{
value: 320,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
],
},
}
}
]
}
]
}
......@@ -218,13 +399,33 @@ const setC = () => {
{
type: 'category',
stack: 'Ad',
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: '金额(万元)',
show: false, // 完全隐藏 Y 轴
axisTick: {show: false},
axisLabel: {show: false},
splitLine: {show: false},
axisLine: {
show: false,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
}
],
series: [
......@@ -235,7 +436,18 @@ const setC = () => {
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(147, 119, 28, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
],
},
},
barWidth: '30%'
},
{
name: '180-360天未开票',
......@@ -244,7 +456,18 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(82, 72, 228, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(148, 140, 252, 1)'} // 底部颜色
],
},
},
barWidth: '30%'
},
{
name: '逾期360天以上',
......@@ -253,7 +476,18 @@ const setC = () => {
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(254, 151, 198, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(176, 72, 119, 1)'} // 底部颜色
],
},
},
barWidth: '30%'
},
]
}
......@@ -301,14 +535,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;
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;
font-size: calc(17 * 100vw / 1920);
-webkit-text-fill-color: transparent;
padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
font-size: calc(20 * 100vw / 1920);
position: relative;
&::after {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!