github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: optimize graph tooltips to make them more friendly (#216)

Browse Source
This commit is contained in:
Fine0830
2023-01-05 17:44:28 +08:00
committed by GitHub
parent 8785817efe
commit 163de5e5cf
3 changed files with 52 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/dashboard/graphs/Bar.vue
View File

@@ -74,12 +74,14 @@ limitations under the License. -->
return {
color,
tooltip: {
trigger: "none",
axisPointer: {
type: "cross",
trigger: "axis",
textStyle: {
fontSize: 12,
color: "#333",
backgroundColor: "rgba(255, 255, 255, 0.8)",
},
enterable: true,
confine: true,
extraCssText: "max-height: 300px; overflow: auto; border: none;",
},
legend: {
type: "scroll",
@@ -99,12 +101,6 @@ limitations under the License. -->
bottom: 5,
containLabel: true,
},
axisPointer: {
label: {
color: "#333",
backgroundColor: "rgba(255, 255, 255, 0.8)",
},
},
xAxis: {
type: "category",
axisTick: {

22
src/views/dashboard/graphs/Line.vue
View File

@@ -91,19 +91,13 @@ limitations under the License. -->
});
const color: string[] = chartColors(keys);
const tooltip = {
trigger: "none",
axisPointer: {
type: "cross",
trigger: "axis",
textStyle: {
fontSize: 12,
color: "#333",
backgroundColor: "rgba(255, 255, 255, 0.8)",
},
// trigger: "axis",
// textStyle: {
// fontSize: 12,
// color: "#333",
// },
// enterable: true,
// confine: true,
enterable: true,
confine: true,
extraCssText: "max-height: 300px; overflow: auto; border: none;",
};
const tips = {
@@ -133,12 +127,6 @@ limitations under the License. -->
color: props.theme === "dark" ? "#fff" : "#333",
},
},
axisPointer: {
label: {
color: "#333",
backgroundColor: "rgba(255, 255, 255, 0.8)",
},
},
grid: {
top: showEchartsLegend(keys) ? 35 : 10,
left: 0,