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

小明 2025-05-05 18:34:47 6

核心代码

formatter: function (params) {
  var xValue = params[0].axisValue; // 获取x轴数值
  var yValue = params[0].value; // 获取y轴数值
  var str = "x轴数值:" + xValue + "" + "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 =
                  '当前日期:' +
                  time +
                  xValue +
                  "当前里程:" +
                  yValue +
                  "公里";
                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 
                
                
                ()()
The End
微信