官方文档： https://echarts.apache.org/zh/option.html#tooltip ### 使用的是tooltip，如果只是要显示出来，直接设置trigger: 'axis'即可 ``` const option = { color: ['#409EFF'], tooltip: { trigger: 'axis' // 触发类型：坐标轴触发 }, .... ``` 效果如下：  默认的就是把横纵坐标的值显示出来 ### 可以使用formatter的字符串模板自定义 ``` tooltip: { trigger: 'axis', formatter: '<div>hello</div>' } ``` 效果如下：  ### 使用formatter回调函数的形式自定义模板自定义 用字符串的方式只适合比较简单的自定义，如果复杂一点的不太好控制，参数也不太好拿，所以使用回调函数更好控制一点，参数这些官方文档还是写得很详细，详细的可以去看官方文档。 **如果要实现上面只显示一个hello的效果可以这样：** ``` tooltip: { trigger: 'axis', formatter: function(params) { return 'hello' } } ``` **显示横纵坐标信息如下：** ``` tooltip: { trigger: 'axis', formatter: function(params) { console.log(params) const chartData = params[0] return `<div>${chartData.name}:${chartData.value}</div>` } } ```  #### 来显示一个稍微复杂一点的效果 实现一个这样的效果：  可以看到有三个数值，所以我们第一步在后台接口返回的时候纵坐标数据就不是一个了，虽然图表需要的纵坐标还是一个，但是我们要返回一些额外的数据，我们先在接口加一点测试数据：  通过在控制台输出formatter函数的params可以看到我们额外携带的参数是在data里边的,value还是只有纵坐标的数值，需要我们可以直接用value来写  **有了额外的数值我们就可以在格式化函数中去取出来用了** ``` tooltip: { trigger: 'axis', formatter: function(params) { console.log(params) const chartData = params[0] const htmlContent = `<div style='width: 100px;height: 65px;background: rgba(179,216,255,0.3);opacity: 1;border: 1px solid #B3D8FF;'> <div><span>任务数:</span><span>${chartData.data.taskCount}</span></div> <div><span>完成数:</span><span>${chartData.data.completeCount}</span></div> <div><span>完成率:</span><span>${chartData.value}</span></div> </div>` return htmlContent } } ``` 效果如下：  样式写成class的方式好像不行，所以写成了内联样式 **外面有一层白色的，是因为默认有padding以及边框什么的，需要把他干掉** 就是padding，borderWidth，borderColor这些属性的设置 ``` tooltip: { trigger: 'axis', padding: 0, borderWidth: 0, formatter: function(params) { console.log(params) const chartData = params[0] const htmlContent = `<div style='width: 100px;height: 65px;background: rgba(179,216,255,0.3);opacity: 1;border: 1px solid #B3D8FF;'> <div><span>任务数:</span><span>${chartData.data.taskCount}</span></div> <div><span>完成数:</span><span>${chartData.data.completeCount}</span></div> <div><span>完成率:</span><span>${chartData.value}</span></div> </div>` return htmlContent } } ``` 效果如下：  现在效果越来越接近了 透明度可以在背景颜色设置中通过rgba来设置,类似这样： ``` backgroundColor: 'rgba(0,0,0,0.5)' ``` **把样式在调一下** ``` tooltip: { trigger: 'axis', padding: 0, borderWidth: 0, formatter: function(params) { console.log(params) const chartData = params[0] const htmlContent = `<div style='width: 100px;height: 65px;background: rgba(179,216,255,0.3);opacity: 1;border: 1px solid #B3D8FF;border-radius:5%;text-align: left;padding-left: 10px;padding-top:5px;padding-bottom:5px'> <div style='font-size:12px'><span style='color:#747774'>任务数 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.data.taskCount}</span></div> <div style='font-size:12px'><span style='color:#747774'>完成数 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.data.completeCount}</span></div> <div style='font-size:12px'><span style='color:#747774'>完成率 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.value}</span></div> </div>` return htmlContent } } ``` 效果如下：  已经和设计图比较接近了，先到这里了 **数据多一点的效果** ``` tooltip: { trigger: 'axis', padding: 0, borderWidth: 0, // backgroundColor: 'rgba(0,0,0,0.0)', formatter: function(params) { console.log(params) const chartData = params[0] const htmlContent = `<div style='width: 110px;height: 128px;background: rgba(179,216,255,0.3);opacity: 1;border: 1px solid #B3D8FF;border-radius:4px;text-align: left;padding-left: 10px;padding-top:5px;padding-bottom:5px'> <div style='font-size:12px'><span style='color:#747774'>整体实验数 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.data.taskCount}</span></div> <div style='font-size:12px'><span style='color:#747774'>整体完成数 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.data.completeCount}</span></div> <div style='font-size:12px'><span style='color:#747774'>必做实验数 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.data.mustDoTaskCount}</span></div> <div style='font-size:12px'><span style='color:#747774'>必做完成数 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.data.mustDoCompleteCount}</span></div> <div style='font-size:12px'><span style='color:#747774'>整体完成率 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.data.completPrByStudentTermNum}</span></div> <div style='font-size:12px'><span style='color:#747774'>必做完成率 :</span><span style='color:#409EFF;margin-left:6px'>${chartData.value}%</span></div> </div>` return htmlContent } } ``` 效果如下：  ### 实现效果 设计图给的效果如下：  **实现方法1，不使用formatter** ``` tooltip: { trigger: 'axis', backgroundColor: "rgba(18,103,167,0.9)", borderColor: "#01DCF3", textStyle: { color: "#fff", fontSize: 12 }, icon: "rect", symbol: "rect", axisPointer: { label: { // y轴格式化函数官方文档：https://echarts.apache.org/zh/option.html#tooltip.axisPointer.label.formatter formatter: function (params) { console.log(params) return params.value + "月"; } }, }, // 分别设置四个方向的内边距 padding: [ 6, // 上 10, // 右 9, // 下 10, // 左 ], //数值格式化函数，好像是5.3版本才开始支持的 valueFormatter: (value) => value + "人次" }, ``` 这样实现除了那个图例是原点，不是长方形的，其他和设计图基本一样了，但是感觉还是没有使用formatter自定义灵活。 **实现方法2，使用formatter** ``` tooltip: { trigger: 'axis', backgroundColor: "rgba(18,103,167,0.9)", borderColor: "#01DCF3", textStyle: { color: "#fff", fontSize: 12 }, icon: "rect", symbol: "rect", axisPointer: { label: { // y轴格式化函数官方文档：https://echarts.apache.org/zh/option.html#tooltip.axisPointer.label.formatter formatter: function (params) { console.log(params) return params.value + "月"; } }, }, // 分别设置四个方向的内边距 padding: [ 6, // 上 10, // 右 9, // 下 10, // 左 ], valueFormatter: (value) => value + "人次", formatter: function (params) { var result = '' var dotHtml = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#F2C52A"></span>' // 定义第一个数据前的长方形颜色 var dotHtml2 = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#23FFFC"></span>' // 定义第二个数据前的长方形颜色 var dotHtml3 = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#1C8DFF"></span>' // 定义第二个数据前的长方形颜色 result += "<div>" + params[0].axisValue + "月" + "</div>" + "<div style='margin-top:2px'>" + dotHtml + " 累计评估量: <span style='display:inline-block;margin-left:5px;'>" + params[0].data + "人次" + "</div>" + "<div style='margin-top:3px'>" + dotHtml2 + " 累计实验量: <span style='display:inline-block;margin-left:5px;'>" + params[1].data + "人次" + "</div>" + "<div style='margin-top:3px'>" + dotHtml3 + " 累计项目数: <span style='display:inline-block;margin-left:5px;'>" + params[2].data + "人次</span>" + "</div>"; return result } }, ``` 这里x,y轴的数据都是简单的一个值，如果是对象的话，针对性的改变一点取值的方法就可以了，通过对象把需要的值取出来拼装成需要的格式就行了。