修改lenged样式

This commit is contained in:
wenzhijie
2022-08-11 11:17:35 +08:00
parent cdc702f689
commit feb662068c

View File

@@ -13,6 +13,7 @@
:legends="legends" :legends="legends"
:series="series" :series="series"
:is-fullscreen="isFullscreen" :is-fullscreen="isFullscreen"
class="legends-flex"
></chart-legend> ></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">
@@ -209,7 +210,6 @@ export default {
}, },
// 处理label // 处理label
treemapFormatterLabel (node) { treemapFormatterLabel (node) {
console.log(1100)
let str = '' let str = ''
let valueStr = '' let valueStr = ''
if (this.chartInfo.param.text === 'all') { if (this.chartInfo.param.text === 'all') {
@@ -226,7 +226,6 @@ export default {
str += '' str += ''
} }
if (str && valueStr) { if (str && valueStr) {
console.log(1)
return ` return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;"> <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center"> <p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center">
@@ -239,7 +238,6 @@ export default {
</div> </div>
` `
} else if (str) { } else if (str) {
console.log(2)
return ` return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;"> <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center"> <p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center">
@@ -249,7 +247,6 @@ export default {
</div> </div>
` `
} else if (valueStr) { } else if (valueStr) {
console.log(3)
return ` return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;"> <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center"> <p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center">
@@ -373,4 +370,20 @@ export default {
</script> </script>
<style scoped> <style scoped>
.theme-light .legend-container .legend-item {
white-space: nowrap;
margin-right: 10px;
cursor: pointer;
display: inline-block;
flex-wrap: wrap;
flex-direction: column;
}
.theme-light .legend-container{
height:30px !important;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
</style> </style>