gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：.Dashboard界面地图鼠标放置在圆上，endpoint以及prometheus状态图表丢失的问题

Browse Source
This commit is contained in:
zhangyu
2020-11-11 17:39:49 +08:00
parent 38424c849a
commit 30a6f36784
1 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -749,28 +749,31 @@
return loadPromise;
},
initTooltipChart(param) {
let data = param.tooltip.options.data;
//console.info(tooltipEndpointChart);
tooltipEndpointChart = echarts.init(document.querySelector("#tooltip-chart--endpoint"));
tooltipPrometheusChart = echarts.init(document.querySelector("#tooltip-chart--prometheus"));
let endpointOption = chartConfig.getOption("tooltipPie"),
prometheusOption = chartConfig.getOption("tooltipPie");
endpointOption.series[0].label.formatter = data.endpointTotal + "";
endpointOption.series[0].data = [
{name: this.$t("dashboard.overview.asset.pingUp"), value: data.endpointUp ? data.endpointUp : 0},
{name: this.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0}
];
endpointOption.title.text = this.$t("project.endpoint.endpoint");
endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
prometheusOption.series[0].label.formatter = data.promTotal + "";
prometheusOption.series[0].data = [
{name: this.$t("dashboard.overview.asset.pingUp"), value: data.promUp ? data.promUp : 0},
{name: this.$t("dashboard.overview.asset.pingDown"), value: data.promDown ? data.promDown : 0}
];
prometheusOption.title.text = "Prometheus";
prometheusOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
tooltipEndpointChart.setOption(endpointOption, true);
tooltipPrometheusChart.setOption(prometheusOption, true);
let vm = this;
setTimeout(()=>{
let data = param.tooltip.options.data;
//console.info(tooltipEndpointChart);
tooltipEndpointChart = echarts.init(document.querySelector("#tooltip-chart--endpoint"));
tooltipPrometheusChart = echarts.init(document.querySelector("#tooltip-chart--prometheus"));
let endpointOption = chartConfig.getOption("tooltipPie"),
prometheusOption = chartConfig.getOption("tooltipPie");
endpointOption.series[0].label.formatter = data.endpointTotal + "";
endpointOption.series[0].data = [
{name: vm.$t("dashboard.overview.asset.pingUp"), value: data.endpointUp ? data.endpointUp : 0},
{name: vm.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0}
];
endpointOption.title.text = vm.$t("project.endpoint.endpoint");
endpointOption.legend.data = [vm.$t("dashboard.overview.asset.pingUp"), vm.$t("dashboard.overview.asset.pingDown")];
prometheusOption.series[0].label.formatter = data.promTotal + "";
prometheusOption.series[0].data = [
{name: vm.$t("dashboard.overview.asset.pingUp"), value: data.promUp ? data.promUp : 0},
{name: vm.$t("dashboard.overview.asset.pingDown"), value: data.promDown ? data.promDown : 0}
];
prometheusOption.title.text = "Prometheus";
prometheusOption.legend.data = [vm.$t("dashboard.overview.asset.pingUp"), vm.$t("dashboard.overview.asset.pingDown")];
tooltipEndpointChart.setOption(endpointOption, true);
tooltipPrometheusChart.setOption(prometheusOption, true);
},100)
/*setTimeout(function() {
tooltipEndpointChart.setOption(endpointOption);
tooltipPrometheusChart.setOption(prometheusOption);
@@ -797,7 +800,9 @@
}).setView([mapConfig.latitude,mapConfig.longitude],mapConfig.zoom);
map.createPane("myPane", document.querySelector(".my-pane"));
map.on("tooltipopen", function(param) {
vm.initTooltipChart(param);
setTimeout(()=>{
vm.initTooltipChart(param);
},100)
});
map.on("tooltipclose", function(param) {
tooltipEndpointChart && tooltipEndpointChart.clear();