From 1dbdda3517a01851d8d9894b22e61aa4462b541c Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期四, 07 十二月 2023 19:16:36 +0800 Subject: [PATCH] tooltip值优化 --- src/views/cockpitPage/components/BarChart.vue | 24 ++++++++++++++++-------- 1 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue index 5f9262d..f4c4554 100644 --- a/src/views/cockpitPage/components/BarChart.vue +++ b/src/views/cockpitPage/components/BarChart.vue @@ -4,7 +4,7 @@ <div class="bar-contents"> <div class="bar-total"> <div class="bar-item">褰撴棩鍚堣鐢熶骇锛歿{ chartData.total }}</div> - <div class="bar-item">姝e搧鐜囷細{{ chartData.rate }}</div> + <div class="bar-item">姝e搧鐜囷細{{ chartData.rate }}%</div> </div> <div class="chart" ref="chart"></div> </div> @@ -54,11 +54,15 @@ // datay: [120, 200, 150, 180, 170, 150, 130, 180, 140], // datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40], // }, + startValue: 0, + endValue: 5, chartTimer: null, }; }, watch: { "chartData.datay"(val) { + this.startValue = 0; + this.endValue = 5; this.pieChart("chart", this.chartData); }, }, @@ -112,7 +116,8 @@ '<span style=width:70px;display:inline-block">' + "姝e搧鐜�" + "</span> " + - data.rate; + data.rate + + "%"; list.push(lastString); listItem = list.join("<br>"); return '<div class="showBox">' + listItem + "</div>"; @@ -129,8 +134,11 @@ type: "inside", xAxisIndex: 0, show: false, - startValue: 0, // 浠庡ご寮�濮� - endValue: 5, // 涓�娆℃�у睍绀哄嚑涓� + startValue: that.startValue, // 浠庡ご寮�濮� + endValue: that.endValue, // 涓�娆℃�у睍绀哄嚑涓� + zoomOnMouseWheel: false, + moveOnMouseWheel: true, + moveOnMouseMove: true, }, ], legend: { @@ -175,8 +183,8 @@ color: "#00FFFF", }, formatter: function (value) { - if (value.length > 5) { - return `${value.slice(0, 4)}...`; + if (value.length > 4) { + return `${value.slice(0, 3)}...`; } return value; }, @@ -285,8 +293,8 @@ this.chartTimer = setInterval(function () { // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨�� if (option.dataZoom[0].endValue == that.chartData.datay.length) { - option.dataZoom[0].startValue = 0; - option.dataZoom[0].endValue = 5; + option.dataZoom[0].startValue = that.startValue; + option.dataZoom[0].endValue = that.endValue; } else { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; -- Gitblit v1.8.0