关于修改echarts在datazoom中鼠标指针为十字准星的问题

最新推荐文章于 2024-08-06 16:13:57 发布

ikedaelaiza

最新推荐文章于 2024-08-06 16:13:57 发布

阅读量533

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/ikedaelaiza/article/details/138108446

版权

需求:当图表的datazoom为insider时,鼠标移入折线图折点,修改鼠标样式为手型;即元素的cursor属性为pointer(默认为crosshair)

一开始使用

let chartDom = document.getElementById("mainChart");
let myChart = echarts.init(chartDom);
myChart.setOption(this.option);

myChart.on("mouseover", function (params) {
      myChart.getZr().setCursorStyle('pointer');
});

鼠标会在触碰折点的一瞬间变为手型,之后变回为十字准星

解决:直接操作echart渲染的canvas的dom元素并修改

 let chartDom = document.getElementById("mainChart");
 let myChart = echarts.init(chartDom);
 myChart.setOption(this.option);
 let cavDom = myChart.getDom().getElementsByTagName("canvas")[0];
myChart.on("mouseover", function (params) {
     cavDom.style.cursor = "pointer";
      });
 // // 监听鼠标移出事件
 myChart.on("mouseout", function () {
        // 还原鼠标样式
     cavDom.style.cursor = "default";
  });