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; }
柱状图示例
// 柱状图信息 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