echart折线图柱状图示例，包含3种点击事件

点击事件包含点击柱子/范围点击/x轴点击
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>eCharts 统计图 x 轴实现拉伸滑动</title>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>

<body>
  <div id="mainDiv" style="height: 400px; width: 500px"></div>
  <script>
    drawFun();
    function drawFun() {
      let option = {
        xAxis: {
          name: "单位",
          type: 'category',
          triggerEvent: true,//允许点击事件
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            //间隔 为0可强制显示
            interval: 0,
            //重新格式化返回
            formatter: function (params) {
              return params
            }
          },
        },
        yAxis: {
          name: "单位",
          type: 'value',
          axisLabel: {
            //间隔 为0可强制显示
            interval: 0,
            //重新格式化返回
            formatter: function (params) {
              return params
            }
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          //格式化提示显示
          formatter: (params) => {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += '\n' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value)
            }
            return relVal;
          },
        },
        legend: {
          icon: "circle",
          //图例排序
          data: ["第二条线条", "第一条线条"],
          //格式化图例
          formatter: (name) => {
            return `${name}`;
          },
        },
        grid: {
          left: '30',
          right: '50',
          bottom: '30',
          containLabel: true
        },
        series: [
          {
            name: '第一条线条',
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'bar',
            label: {
              show: true,
            }
          },
          {
            name: '第二条线条',
            data: [130, 200, 234, 210, 105, 140, 250],
            type: 'line',
            label: {
              show: true,
            }
          }
        ]
      };
      const eChart = echarts.init(document.getElementById('mainDiv')); // 初始化 echarts 实例
      eChart.setOption(option);
      //表格大小自适应
      eChart.resize();
      window.addEventListener("resize", () => {
        setTimeout(function () {
          eChart.resize();
        }, 1000);
      });
      //点击事件
      eChart.on("click", function (param) {
        if (param.componentType == "xAxis") {
          alert("单击了x轴标签，值为" + param.value);
        } else {
          alert("点击的是柱，name值：" + param.name + "，value值：" + param.value);
        }
      });
      //范围点击
      eChart.getZr().on("click", (params) => {
        const pointInPixel = [params.offsetX, params.offsetY];
        let xIndex; // x轴索引
        if (eChart.containPixel("grid", pointInPixel)) {
          xIndex = eChart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
          ])[0];
          // 点击到图表其他区域不操作
          if (typeof xIndex !== "number") {
            return;
          }
          alert("点击的是范围（第n个）：" + xIndex)
        }
      });
    }
  </script>
</body>

</html>