政务云智慧大屏-部分细节调整
This commit is contained in:
parent
07dbd6398d
commit
304be8b129
@ -57,10 +57,10 @@ const series = types.map((type, idx) => {
|
||||
barGap: '0%', // 强制堆叠布局
|
||||
itemStyle: {
|
||||
color: colors[idx],
|
||||
barBorderRadius: 8,
|
||||
barBorderRadius: 0,
|
||||
shadowColor: colors[idx],
|
||||
// shadowBlur: 8,
|
||||
shadowOffsetY: -16,
|
||||
shadowOffsetY: 0,
|
||||
},
|
||||
label: {
|
||||
// 添加标签配置
|
||||
@ -70,16 +70,18 @@ const series = types.map((type, idx) => {
|
||||
backgroundColor: 'rgba(255,255,255,0.7)', // 白色背景
|
||||
padding: [2, 4],
|
||||
borderRadius: 4,
|
||||
formatter: '{@value}万亩',
|
||||
z: 100,
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{c}%',
|
||||
formatter: '{c}万亩',
|
||||
},
|
||||
},
|
||||
silent: true, // 禁用所有交互效果
|
||||
animation: false, // 禁用动画
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
disabled: true, // 禁用高亮效果
|
||||
},
|
||||
z: 100 - idx,
|
||||
data: towns.map((town) => {
|
||||
@ -96,8 +98,10 @@ const state = reactive({
|
||||
legend: {
|
||||
data: types,
|
||||
textStyle: {
|
||||
color: '#ccc',
|
||||
color: '#fff',
|
||||
},
|
||||
selectedMode: false, // 禁用图例切换功能
|
||||
inactiveColor: '#fff', // 设置非激活状态颜色(保持原色)
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
@ -117,7 +121,7 @@ const state = reactive({
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category', // 分类轴(横向条形图的标签)
|
||||
data: [120, 230, 152, 136, 145, 17], // 分类数据放在 yAxis
|
||||
data: towns, // 分类数据放在 yAxis
|
||||
axisTick: { show: false }, // 隐藏刻度线
|
||||
},
|
||||
color: colors,
|
||||
@ -128,7 +132,7 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.6);',
|
||||
backgroundColor: 'rgba(0,0,0,0);',
|
||||
borderColor: '#35d0c0',
|
||||
borderRadius: 8,
|
||||
formatter: (params) => `
|
||||
|
@ -33,26 +33,27 @@ const props = defineProps({
|
||||
.basic {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
height: 100%;
|
||||
height: 95%;
|
||||
border: 2px solid #01fefd;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(2px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
color: #ffffff;
|
||||
padding: 20px;
|
||||
.line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
line-height: 50px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
width: 40%;
|
||||
color: #ddd;
|
||||
}
|
||||
.values {
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user