核心代码

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: -45formatter: 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);}