layui柱状图tooltip获取x轴和y轴数据

核心代码

formatter: function (params) {
  var xValue = params[0].axisValue; // 获取x轴数值
  var yValue = params[0].value; // 获取y轴数值
  var str = "x轴数值：" + xValue + "<br/>" + "y轴数值：" + yValue;
  return str;
}

柱状图示例

// 柱状图信息
        function getEchartsDay(xdata, ydata, title) {
          // 每日统计
          // 具体的配置项信息
          //先调用echarts.getInstanceByDom()方法判断是否已经存在echarts实例，如果不存在再去初始化
          // 有的话就获取已有echarts实例的DOM节点
          var myChartElement = document.getElementById("zztChartDay");
          // let myChart = echarts.getInstanceByDom(myChartElement);
          var myChart;
          // 如果不存在，就进行初始化
          if (myChartElement) {
            myChart = echarts.init(myChartElement);
          }
          var optionDay = {
            legend: {
              data: ["公里数(km)"],
            },
            // hover时的提示浮窗
            tooltip: {
              trigger: "axis", // 触发类型 坐标轴触发
              backgroundColor: "#fff", // 通过设置rgba调节背景颜色与透明度
              borderColor: "#5098F8",
              extraCssText: "box-shadow: 0px 3px 5px 0px rgba(80,152,248,0.2);", // 给浮窗设置的css样式
              borderWidth: 1,
              padding: [15, 10, 15, 10],
              textStyle: {
                color: "#333",
                lineHeight: 24,
              },
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效  // 默认为直线，可选为：'line' | 'shadow' | 'none'
                type: "none",
              },
              formatter: function (params) {
                // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 此处为回调函数
                // var str = "当前巡查了" + params[0].value + "公里";
                var xValue = params[0].axisValue; // 获取x轴数值
                var yValue = params[0].value; // 获取y轴数值
                var str =
                  '<div style="text-align: left;">当前日期：' +
                  time +
                  xValue +
                  "<br/>当前里程：" +
                  yValue +
                  "公里</div>";
                return str;
              },
            },
            // 模拟x轴的横向滑动条
            dataZoom: {
              type: "slider", // 滑动条类型
              show: true,
              height: 5, // 设置高度
              xAxisIndex: 0, // 设置关联的x轴 如果只有一个，可以不写
              filterMode: "none", // 设置数据过滤模式
              backgroundColor: "#fff",
              borderColor: "#fff",
              fillerColor: "#eee", // 滚动条颜色
              showDetail: false, // 是否展示滚动条起始位置数据信息和结束位置数据信息
              bottom: 5, // 距离底部的位置
              dataBackground: {
                // 调整数据阴影的位置
                lineStyle: {
                  color: "#fff",
                },
                areaStyle: {
                  color: "#fff",
                },
              },
              startValue: 0, // 滚动条起始位置
              endValue: 9, // 滚动条结束为止
              zoomLock: true, // 锁定数据窗口（滚动条）大小 使其不可调节
              handleSize: 0, // 控制手柄大小
            },
            title: { text: title },
            // x轴相关
            xAxis: {
              type: "category", // 轴类型
              // 设置不展示轴线
              axisLine: {
                show: false,
              },
              // 不显示坐标轴刻度
              axisTick: {
                show: false,
                interval: 0,
              },
              // 坐标轴刻度元素相关
              axisLabel: {
                show: true,
                interval: 0, // 刻度之间的距离
                margin: 10, // 刻度与轴线之前的间隔
                // rotate: -45
                formatter: function (value) {
                  // 刻度标签（x轴坐标）的内容格式器，支持字符串模板和回调函数两种形式
                  var str = "";
                  var num = 6; //每行显示字数
                  var valLength = value.length; //该项x轴字数
                  var rowNum = Math.ceil(valLength / num); // 行数
                  if (valLength > 12) {
                    str =
                      value.substring(0, num) + "\n" + value.substring(num, 2 * num - 2) + " ... ";
                    return str;
                  } else {
                    for (var i = 0; i < rowNum; i++) {
                      var temp = "";
                      var start = i * num;
                      var end = start + num;
                      temp = value.substring(start, end) + "\n";
                      str += temp;
                    }
                    return str;
                  }
                },
              },
              // 这里设置x轴的坐标
              data: xdata,
            },
            // y轴相关
            yAxis: [
              {
                type: "value", // 轴类型
                // 不显示轴线
                axisLine: {
                  show: false,
                },
                // 不显示坐标轴刻度
                axisTick: {
                  show: false,
                },
                // 不展示坐标轴在 grid 区域中的分隔线
                splitLine: {
                  show: false,
                },
                // axisLabel: {
                //   formatter: function (val) {
                //     // 刻度标签（y轴坐标）的内容格式器，支持字符串模板和回调函数两种形式
                //     // return val + "km";
                //   },
                // },
                max: 150, // 坐标轴刻度最大值
                min: 0, // 坐标轴刻度最小值
              },
            ],

            series: [
              {
                type: "bar", // 设置图表类型
                name: "公里数(km)",
                coordinateSystem: "cartesian2d", // 该图表使用的坐标系 此处为二维直角坐标系
                // 柱子宽度
                barWidth: 22,
                // 柱子间距
                barCategoryGap: "100%",
                // y轴的延伸横线
                markLine: {
                  // 是否响应鼠标事件
                  silent: true,
                  label: {
                    show: false,
                  },
                  symbol: "none",
                  // 那些刻度展示延伸横线
                  data: [
                    {
                      yAxis: 0,
                    },
                    {
                      yAxis: 30,
                    },
                    {
                      yAxis: 60,
                    },
                    {
                      yAxis: 90,
                    },
                    {
                      yAxis: 120,
                    },
                    {
                      yAxis: 150,
                    },
                  ],
                },
                // 柱状图相关
                itemStyle: {
                  barBorderRadius: [4, 4, 4, 4],
                  color: "rgba(106,174,242,0.5)",
                },
                //鼠标悬停时：
                emphasis: {
                  disabled: false,
                  itemStyle: {
                    color: "rgba(106,174,242,1)",
                  },
                },
                // 这里设置整体的柱状图数据  name属性需要与上面x轴的data相对应
                data: ydata,
              },
            ],
          };
          // }

          // 将配置项应用在初始化过的myChart中
          myChart.setOption(optionDay);
        }