echarts 柱状图名称显示不全问题

最新推荐文章于 2024-03-11 18:42:20 发布

原创最新推荐文章于 2024-03-11 18:42:20 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

web前端同时被 2 个专栏收录

40 篇文章

订阅专栏

3 篇文章

订阅专栏

这段代码展示了如何在ECharts图表上实现鼠标悬停时显示Y轴对应的值。通过监听`mouseover`和`mouseout`事件，动态创建并定位一个div元素来显示值，当鼠标移开时隐藏该元素。这有助于提升图表的交互性和用户体验。

在这里插入图片描述
代码附赠如下

 const barChart = echarts.init(indexChart.value);

              // barChartOptions 配置项，推荐放在外部引入。
              resizeChart(indexChart.value, barChart, state.obj.option);
              var div = document.createElement("div");
              div.class = "extension";
              div.style = "display:none";
              barChart.on("mouseover", function (params) {
                if (params.componentType === "yAxis") {
                  const value = params.value;
                  document.querySelector("body").append(div);
                  div.style.display="block"
                  div.className = "active";
                  div.innerHTML = value;
                  var xx = params.event.event.pageX - 30;
                  var yy = params.event.event.pageY + 20;
                  div.style.top = yy + "px";
                  div.style.left = xx + "px";
                  console.log(div.style, "123");
                }
              });
              barChart.on("mouseout", function (params) {
                console.log(params, "params");

                div.style = "display:none";
              });