15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 01:33:05 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: 修复图表渲染宽高不生效问题

This commit is contained in:
shaohuzhang1 2024-09-26 14:32:07 +08:00 committed by shaohuzhang1
parent f931cc7f49
commit af274fb545
1 changed files with 47 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
ui/src/components/markdown/EchartsRander.vue
View File

@ -1,5 +1,7 @@
<template>
<div ref="chartsRef" :style="style" v-resize="changeChartSize"></div>
<div class="charts-container">
<div ref="chartsRef" :style="style" v-resize="changeChartSize"></div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue'
@ -44,6 +46,9 @@ function jsonParseOption(option: any) {
return option
}
function evalParseOption(option_json: any) {
if (option_json.style) {
style.value = option_json.style
}
let option = {}
echarts
tmp.value = echarts
@ -76,4 +81,44 @@ onBeforeUnmount(() => {
echarts.getInstanceByDom(chartsRef.value)?.dispose()
})
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.charts-container {
overflow-x: auto;
}
.charts-container::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0);
border-left: 1px solid rgba(0, 0, 0, 0);
}
.charts-container::-webkit-scrollbar {
width: 5px;
height: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.charts-container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 28px;
}
.charts-container::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
</style>