From af274fb54572933f76eff437e19bebcc5d1e2f80 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Thu, 26 Sep 2024 14:32:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=AE=BD=E9=AB=98=E4=B8=8D=E7=94=9F=E6=95=88?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/markdown/EchartsRander.vue | 49 +++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/markdown/EchartsRander.vue b/ui/src/components/markdown/EchartsRander.vue
index 889cb183d..6e3d2e87d 100644
--- 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>