feat: update tip

src/components/CircularHeatmap/components/chart.vue

 <template>
-    <div ref="chartRef"></div>
+    <div ref="chartRef" class="chart-box">
+        <div class="tip"></div>
+    </div>
 </template>
 
 <script setup>
@@ -96,7 +98,7 @@ const generateChart = (data) => {
         .attr('width', width)
         .attr('height', height + width / 5)
         .attr('viewBox', [-width / 2, -height / 2, width, height])
-        .attr('style', 'max-width: 100%; height: auto; font: 10px sans-serif');
+        .attr('style', 'max-width: 100%; height: auto; font: 10px sans-serif;');
 
     let dataMaxNumber = null;
     const dataMaxArr = [];
@@ -108,7 +110,8 @@ const generateChart = (data) => {
         let fcolors = color(maxNumber, distinct_values);
         dataMaxArr.push(maxNumber);
 
-        svg.append('g')
+        const rectA = svg
+            .append('g')
             .attr('stroke', 'none')
             .attr('stroke-width', 1)
             .attr('stroke-linejoin', 'round')
@@ -123,7 +126,8 @@ const generateChart = (data) => {
             .attr('d', arcCustom(i, cleaned.length))
             .attr('transform', 'rotate(90)');
 
-        svg.append('g')
+        const rectB = svg
+            .append('g')
             .attr('stroke', 'none')
             .attr('stroke-width', 1)
             .attr('stroke-linejoin', 'round')
@@ -136,7 +140,9 @@ const generateChart = (data) => {
             .attr('fill', (d) => fcolors(d.data.value))
             .attr('d', arcCustom(i, cleaned.length))
             .attr('transform', 'rotate(130)');
-        svg.append('g')
+
+        const rectC = svg
+            .append('g')
             .attr('stroke', 'none')
             .attr('stroke-width', 1)
             .attr('stroke-linejoin', 'round')
@@ -149,7 +155,12 @@ const generateChart = (data) => {
             .attr('fill', (d) => fcolors(d.data.value))
             .attr('d', arcCustom(i, cleaned.length))
             .attr('transform', 'rotate(155)');
+
+        setTips(rectA);
+        setTips(rectB);
+        setTips(rectC);
     }
+
     dataMaxNumber = Math.round(Math.max.apply(null, dataMaxArr));
 
     // text
@@ -427,6 +438,35 @@ const setSideLabel = (config, svg) => {
     return svg.node();
 };
 
+const setTips = (rect) => {
+    const tips = d3
+        .select('.tip')
+        .style('visibility', 'hidden')
+        .style('position', 'relative')
+        .style('left', '0px')
+        .style('top', '0px')
+        .style('background-color', 'rgba(0, 0, 0, .8)')
+        .style('color', '#fff')
+        .style('border-radius', '5px')
+        .style('width', '80px')
+        .style('text-align', 'center')
+        .style('height', '20px')
+        .style('padding', '5px');
+
+    rect.on('mouseover', (event, d) => {
+        tips.style('visibility', 'visible');
+    })
+        .on('mousemove', function (event, d) {
+            tips.style('visibility', 'visible')
+                .style('left', event.offsetX + 15 + 'px')
+                .style('top', event.offsetY + 50 + 'px')
+                .html(`${d.data.value}`);
+        })
+        .on('mouseleave', function () {
+            tips.style('visibility', 'hidden');
+        });
+};
+
 // 数据处理
 const getChartData = (data) => {
     const sectionCount = 32; // 整个圆分为32段
@@ -456,4 +496,8 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.chart-box {
+    position: relative;
+}
+</style>

src/views/home/index.vue

@@ -19,7 +19,7 @@ import ClusterHeatmap from '../../components/ClusterHeatmap/index.vue';
 import CircularHeatmap from '../../components/CircularHeatmap/index.vue';
 import Test from '../../components/Test/index.vue';
 
-const chartCurrent = ref(0);
+const chartCurrent = ref(7);
 
 const chartList = shallowRef([
     { title: '线性拟合图', value: 1, comName: LinearFitting },