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

核心代码

formatter: function (params) {
  var xValue = params[0].axisValue; // 获取x轴数值
  var yValue = params[0].value; // 获取y轴数值
  var str = "x轴数值：" + xValue + "
" + "y轴数值：" + yValue;
  return str;
}
1
2
3
4
5
6

柱状图示例

// 柱状图信息
        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 < 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);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206