修复lenged样式bug

This commit is contained in:
wenzhijie
2022-08-11 13:51:39 +08:00
parent feb662068c
commit 43fccefbc8

View File

@@ -1,20 +1,12 @@
<template> <template>
<div <div
:class="legendPlacement"
ref="pie-chart-box" ref="pie-chart-box"
class="nz-chart__component" class="nz-chart__component nz-chart__component--time-series"
> >
<div :id="`chart-canvas-${chartId}`" class="chart__canvas" > <div :id="`chart-canvas-${chartId}`" class="chart__canvas" >
<svg :id="`treemap-svg-${chartId}`" width="100%" height="100%"> <svg :id="`treemap-svg-${chartId}`" width="100%" height="100%">
</svg> </svg>
<chart-legend
v-if="hasLegend"
:chart-data="chartData"
:chart-info="chartInfo"
:legends="legends"
:series="series"
:is-fullscreen="isFullscreen"
class="legends-flex"
></chart-legend>
</div> </div>
<div :class="`chart-canvas-tooltip-${chartId}`" :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div :class="`chart-canvas-tooltip-${chartId}`" :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
<div class="chart-canvas-tooltip-title tooltip-title"> <div class="chart-canvas-tooltip-title tooltip-title">
@@ -30,6 +22,15 @@
</div> </div>
</div> </div>
</div> </div>
<chart-legend
v-if="hasLegend"
:chart-data="chartData"
:chart-info="chartInfo"
:legends="legends"
:series="series"
:is-fullscreen="isFullscreen"
class="legends-flex"
></chart-legend>
</div> </div>
</template> </template>
@@ -377,13 +378,22 @@ export default {
display: inline-block; display: inline-block;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
height:20px !important;
line-height: 20px;
align-self: stretch;
-webkit-box-align: stretch;
} }
.theme-light .legend-container{ .theme-light .legend-container{
height:30px !important; -ms-overflow-style: none; /* Internet Explorer 10+ */
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
.container::-webkit-scrollbar { .container::-webkit-scrollbar {
display: none; /* Safari and Chrome */ display: none; /* Safari and Chrome */
} }
.legends-flex{
width: 100%;
max-height: 80px;
min-height: 25px;
}
</style> </style>