echarts柱状图可鼠标左击出现自定义弹框，右击隐藏弹框并阻止默认右击事件

每项x轴数据对应有两条柱图和一条阴影效果是学习其它博客得到的效果，这个是学习的原文链接：echarts两个合并柱体（普通柱状图+象形柱图）共享一个柱体阴影

因为这次情况比较特殊，不仅需要自定义弹框内容，而且也需要鼠标的右击事件隐藏效果。这里我就假设在已有阴影效果的基础上，针对鼠标点击显示弹框进行记录。若有需要源码在后面，可自取。

echarts自定义弹框内容

效果图展示
前记
鼠标左击事件（click）
- 参数介绍
- 自定义弹框的样式
- 逻辑代码部分
- - 添加自定义元素
  - 清除之前的菜单元素
  - 左击方法的全部代码
鼠标右击事件（contextmenu）
- 逻辑代码部分
- - chart.getZr().on 与 chart.on
  - 隐藏鼠标右击后的默认行为
  - 右击方法的全部代码
源码

效果图展示

在这里插入图片描述

前记

echarts的鼠标事件：点击跳转至官方的鼠标事件
官网给的事件行为逻辑：点击跳转至官网的事件与行为
在这里插入图片描述
下面是具体含义：

click：当用户在图表上进行单击操作时触发，可以用于实现单击选中数据点或者执行特定的交互操作。
dblclick：当用户在图表上进行双击操作时触发，可以用于实现双击放大或者展开详细信息等功能。
mousedown：当用户按下鼠标按钮时触发，可以用于实现拖拽、绘制选框等交互操作。
mousemove：当用户在图表上移动鼠标时触发，可以用于实现实时显示数据信息或者跟随鼠标移动的提示框。
mouseup：当用户释放鼠标按钮时触发，可以用于结束拖拽、绘制等操作。
mouseover：当鼠标悬停在图表元素上时触发，可以用于显示详细信息或者高亮当前元素。
mouseout：当鼠标移出图表元素时触发，可以用于隐藏信息框或者取消高亮状态。
globalout：当鼠标移出图表区域时触发，可以用于清除所有高亮状态或者隐藏全局提示框。
contextmenu：当用户在图表上右键单击时触发，可以用于显示自定义的右键菜单或者执行特定的操作。

这里用到的是click单击以及contextmenu右键单击事件。

鼠标左击事件（click）

这里在绑定点击操作里，根据被点击的位置使用子绝父相（子盒子position: absolute;父盒子position: relative;），设定自定义弹框的位置。

参数介绍

点击阴影部分时，可查看params值，params.event.event与vue的鼠标右击事件 @contextmenu="func"传的event参数一样，通过这个可以设置被点击盒子的显示位置，设定其top值及left值。
在这里插入图片描述

自定义弹框的样式

1、若添加自定义类名可通过divdom.classList.add(“类名”)，在 JavaScript 中，classList 是 DOM 元素的属性，它提供了一组方法来操作元素的类名。其中，.add() 方法用于向元素的类列表中添加一个或多个类名。
2、若添加自定义样式可通过divdom.style.cssText，此方法是用于设置元素的内联样式的属性。直接将 CSS 样式规则作为字符串赋给元素的内联样式，从而一次性设置多个样式属性。

单引号与反引号的区别：
反引号是 ES6 中的模板字符串语法。使用反引号包裹字符串可以实现字符串插值，即在字符串中嵌入变量或表达式的值。
与单引号和双引号相比，使用反引号的优势在于可以在字符串中直接引用变量，而无需使用字符串连接符（+）来拼接字符串。这样使得代码更具可读性，并且更容易维护。

在下面这段代码中，反引号用于创建一个模板字符串，其中 ${} 内部的表达式会被计算并替换为实际的值。这样就可以动态地设置 left 和 top 样式属性的值，根据 params.event.event.pageX 和 params.event.event.pageY 的实时数值来确定自定义div菜单的位置。

逻辑代码部分

添加自定义元素

通过 createElement 方法创建视图元素，这里创建了三个div，分别为父盒子（.custom-menu）、两个子盒子（.menu-item），元素结构如下图。
在这里插入图片描述

清除之前的菜单元素

自定义弹框已经创建显示好了，每次左击时都会出现一个新创建的弹框，接下来就需要隐藏之前出现的，如何拿到之前的弹框呢？那么就需要一个全局参数 currentMenu: null 记录当前菜单，用于判断是否存在菜单并使用 removeChild 方法删除子节点。

这里分为两种情况使用清除，一是每次左击时清除之前被左击显示的菜单；二是点击菜单里的某项子盒子时清除盒子。清除逻辑都差不多，只不过需要分情况调用而已。

左击方法的全部代码

chartLeftEvent(chart) {
      chart.on("click", (params) => {
        console.log("params", params);
        if (this.currentMenu && this.currentMenu.parentNode === document.body) {
          document.body.removeChild(this.currentMenu); // 清除之前的菜单元素
        }

        const menu = document.createElement("div");// 创建一个新的 div 元素，并将其赋给名为 menu 的常量
        menu.classList.add("custom-menu");// 为新创建的 div 元素添加一个自定义样式类名 "custom-menu"
        // 使用模板字符串设置 div 元素的内联样式，动态确定菜单的位置
        menu.style.cssText = `
    left: ${params.event.event.pageX}px;
    top: ${params.event.event.pageY}px;
  `;
  		// 将创建好的 div 元素添加到页面的 body 元素中，显示出菜单
        document.body.appendChild(menu);

        const menuItem1 = document.createElement("div");
        menuItem1.className = "menu-item";
        menuItem1.style.cssText = `
          border-radius: 0px 10px 0px 0px;
        `;
        menuItem1.innerText = "查看具体信息1";
        menuItem1.onclick = () => {
          console.log("查看工步信息");
          if (this.currentMenu && this.currentMenu.parentNode === document.body) {
            document.body.removeChild(this.currentMenu); // 清除之前的菜单元素
          }
        };
        menu.appendChild(menuItem1);

        const menuItem2 = document.createElement("div");
        menuItem2.className = "menu-item";
        menuItem2.style.cssText = `
          border-radius: 0px 0px 0px 10px;
        `;
        menuItem2.innerText = "查看具体信息2";
        menuItem2.onclick = () => {
          console.log("查看人员信息");
          if (this.currentMenu && this.currentMenu.parentNode === document.body) {
            document.body.removeChild(this.currentMenu); // 清除之前的菜单元素
          }
        };
        menu.appendChild(menuItem2);

        this.currentMenu = menu; // 保存当前菜单元素
      });
    },

鼠标右击事件（contextmenu）

逻辑代码部分

chart.getZr().on 与 chart.on

在 echarts 中，chart.getZr().on 与 chart.on 的区别主要在于事件绑定的对象和事件触发的时机：

chart.on与chart.getZr().on的区别：
chart.on: 这种方式是在 echarts 实例上直接绑定事件监听器。通过 chart.on 可以监听 echarts实例上的特定事件，如鼠标点击图表、图例切换等。这种方式适用于监听 echarts 提供的交互事件，如点击图表某个系列时触发的事件。
chart.getZr().on: 这种方式是直接在 echarts 实例的底层渲染容器（即 ZRender 实例）上绑定事件监听器。通过chart.getZr() 可以获取到 ZRender 实例，然后使用 .on 方法可以在 ZRender 实例上监听各种原生 DOM事件，如鼠标点击、移动等。这种方式可以实现更加底层的事件监听，对 echarts 渲染的交互细节进行定制。

总体来说，使用 chart.getZr().on 可以监听更加底层的原生 DOM 事件，而 chart.on 则用于监听 echarts 封装的图表交互事件。这里的左击事件用的chart.on，右击事件用的chart.getZr().on ，大家都可以感受一下。

隐藏鼠标右击后的默认行为

右击图表示默认会显示下图这个菜单，所以需要通过preventDefault方法阻止默认右击事件
在这里插入图片描述

右击方法的全部代码

chartRightEvent(chart) {
      // 使用箭头函数
      chart.getZr().on("contextmenu", (params) => {
        params.event.preventDefault(); // 取消默认右击事件
        if (this.currentMenu && this.currentMenu.parentNode === document.body) {
          document.body.removeChild(this.currentMenu); // 清除之前的菜单元素
        }
      });
    },

源码

<div style="width: 100%; height: 100%" id="barChart" ref="echartsContainer"></div>

....
data() {
    return { 
    	currentMenu: null, // 保存当前显示的菜单元素
   };
},
mounted() {
    this.updateChartData();
  },
 methods: {
 // 柱状图
    updateChartData() {
      var xdata = [
        "ABCD01-01",
        "ABCD01-02",
        "ABCD01-03",
        "ABCD01-04",
        "ABCD01-05",
        "ABCD01-06",
        "ABCD01-07",
        "ABCD01-08",
        "ABCD01-09",
        "ABCD01-10",
        "ABCD01-11",
        "ABCD01-12",
        "ABCD01-13",
        "ABCD01-14",
        "ABCD01-15",
        "ABCD01-16",
        "ABCD01-17",
        "ABCD01-18",
        "ABCD01-19",
        "ABCD01-20",
        "ABCD01-21",
        "ABCD01-22",
        "ABCD01-23",
        "ABCD01-24",
      ];
      var ctdata = [
        21,
        18,
        34,
        31,
        22,
        18,
        18,
        18,
        18,
        18,
        18,
        18,
        21,
        15,
        34,
        31,
        22,
        18,
        18,
        18,
        18,
        18,
        18,
        18,
      ];
      var stdata = [
        20.5,
        15,
        31,
        31,
        18,
        9,
        9,
        9,
        9,
        9,
        9,
        9,
        20.5,
        15,
        31,
        31,
        18,
        9,
        9,
        9,
        9,
        9,
        9,
        9,
      ];
      var bgdata = [
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
        10,
      ];
      var maxValue = 34; //最大秒数
      var maxCenterName = "ABCD01-03"; //最大秒数对应的工站
      var threshold = 8; //差值
      const chartDom = document.getElementById("barChart");
      const chart = echarts.init(chartDom, "dark");
      var option;
      option = {
        backgroundColor: "transparent",
        // 预设颜色优先级低于series里定义的颜色，所以象形柱图不会被污染
        color: [
          {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(204, 218, 234,0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(204, 218, 234,1)", // 100% 处的颜色
              },
            ],
          },
          {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(93, 207, 207,0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(93, 207, 207,1)", // 100% 处的颜色
              },
            ],
          },
        ],
        grid: {
          left: "3%",
          right: "6%",
          bottom: "15%",
        },
        legend: {
          orient: "vertical", // 设置图例垂直排列
          right: 10, // 调整图例距离右侧的距离
          top: "top", // 设置图例位于上方
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: xdata,
            axisLabel: {
              show: true,
              color: "#ffffff",
            },
            axisLabel: {
              show: true,
              color: "#ffffff",
              fontSize: 12, // 设置字体大小为12
            },
          },
          {
            type: "category",
            show: false,
            data: this.xAxisData_,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "second",
            min: 0,
            max: 40,
            splitNumber: 5,
            nameTextStyle: {
              //y轴上方单位的颜色
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                color: "rgba(133, 139, 145,0.3)",
              },
            },
            axisLabel: {
              show: true,
              color: "#ffffff",
            },
          },
          {
            type: "value",
            alignTicks: true,
            show: false,
          },
          {
            type: "value",
            show: false,
          },
        ],
        dataZoom: [
          {
            type: "slider", // 设置为滑动条
            show: true, // 显示滑动条
            start: 0, // 滑动条起始位置
            end: 100 / (12 - 10) - 1, // 滑动条结束位置
            bottom: 10, // 滑动条距离底部的距离
            textStyle: {
              color: "#fff",
            },
            backgroundColor: "#acb7c3", // 设置背景颜色
            handleStyle: {
              color: "#2a82e4", // 设置左右两边的可滑动收缩竖线颜色
            },
          },
        ],
        series: [
          {
            name: "DATA1",
            data: ctdata,
            type: "bar",
            barWidth: 10,
            barGap: 1, //柱子之间间距
            yAxisIndex: 0,
            z: 2,
            label: {
              show: true,
              position: "top",
              color: "white",
            },
            // 标记线配置
            markLine: {
              data: [
                {
                  yAxis: maxValue, // 最大值的纵坐标
                  label: {
                    show: true,
                    position: "end",
                    formatter: "瓶颈CT:" + maxValue + "s\n" + maxCenterName, // 标记线的标签
                    textStyle: {
                      color: "red",
                    },
                  },
                  lineStyle: {
                    type: "dashed", // 设置为虚线
                    color: "red", // 标记线的颜色
                  },
                  symbol: ["none", "arrow"], // 取消箭头样式
                  silent: true, // 取消鼠标悬浮时的高亮效果
                },
              ],
            },
          },
          {
            name: "DATA2",
            data: stdata,
            type: "bar",
            barWidth: 10,
            yAxisIndex: 1,
            z: 2,
            label: {
              show: true,
              position: "top",
              color: "#66e1df",
            },
          },
          {
            data: bgdata,
            type: "bar",
            barWidth: 55,
            yAxisIndex: 2,
            xAxisIndex: 1,
            z: 1,
            itemStyle: {
              normal: {
                color: function (params) {
                  var ctValue = ctdata[params.dataIndex];
                  var stValue = stdata[params.dataIndex];
                  if (Math.abs(ctValue - stValue) > threshold) {
                    return "rgba(102, 77, 107,0.6)";
                  } else {
                    return "rgba(0,0,0,0.16)";
                  }
                },
              },
            },
          },
        ],
      };
      option && chart.setOption(option);
      this.chartRightEvent(chart);
      this.chartLeftEvent(chart);
    },
    chartRightEvent(chart) {
      chart.getZr().on("contextmenu", (params) => {
        params.event.preventDefault(); // 取消默认右击事件
        // 使用箭头函数
        if (this.currentMenu && this.currentMenu.parentNode === document.body) {
          document.body.removeChild(this.currentMenu); // 清除之前的菜单元素
        }
      });
    },
    chartLeftEvent(chart) {
      chart.on("click", (params) => {
        console.log("params", params);
        // let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
        //   params.offsetX,
        //   params.offsetY,
        // ])[0]; // 阴影索引值
        // console.log("xIndex", xIndex);
        if (this.currentMenu && this.currentMenu.parentNode === document.body) {
          document.body.removeChild(this.currentMenu); // 清除之前的菜单元素
        }

        const menu = document.createElement("div");
        menu.classList.add("custom-menu"); // 添加自定义样式类名
        menu.style.cssText = `
    left: ${params.event.event.pageX}px;
    top: ${params.event.event.pageY}px;
  `;
        document.body.appendChild(menu);

        const menuItem1 = document.createElement("div");
        menuItem1.className = "menu-item";
        menuItem1.style.cssText = `
          border-radius: 0px 10px 0px 0px;
        `;
        menuItem1.innerText = "查看具体信息1";
        menuItem1.onclick = () => {
          console.log("查看工步信息");
          if (this.currentMenu && this.currentMenu.parentNode === document.body) {
            document.body.removeChild(this.currentMenu); // 清除之前的菜单元素
          }
        };
        menu.appendChild(menuItem1);

        const menuItem2 = document.createElement("div");
        menuItem2.className = "menu-item";
        menuItem2.style.cssText = `
          border-radius: 0px 0px 0px 10px;
        `;
        menuItem2.innerText = "查看具体信息2";
        menuItem2.onclick = () => {
          console.log("查看人员信息");
          if (this.currentMenu && this.currentMenu.parentNode === document.body) {
            document.body.removeChild(this.currentMenu); // 清除之前的菜单元素
          }
        };
        menu.appendChild(menuItem2);

        this.currentMenu = menu; // 保存当前菜单元素
      });
    },
    }

/* echarts图表样式 */
.custom-menu {
  position: absolute;
  width: 130px;
  box-shadow: rgb(0 0 0 / 30%) 1px 1px 3px;
  z-index: 999;
  background: rgb(69 140 199 / 80%);
  border: none;
  border-radius: 0px 10px 0px 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-item {
  padding: 5px 0px;
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: center;
}

.menu-itemborder1 {
  border-radius: 0px 10px 0px 0px;
}

.menu-itemborder2 {
  border-radius: 0px 0px 0px 10px;
}

.menu-item:hover {
  background-color: #a2bbda;
}