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

anbeime · Sep 26, 2024 · af274fb · af274fb
1 parent f931cc7
commit af274fb
Showing 1 changed file with 47 additions and 2 deletions.
diff --git a/ui/src/components/markdown/EchartsRander.vue b/ui/src/components/markdown/EchartsRander.vue
@@ -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>