echarts自定义图表提示框。鼠标指上去显示。echarts tooltip的使用

官方文档：
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轴的数据都是简单的一个值，如果是对象的话，针对性的改变一点取值的方法就可以了，通过对象把需要的值取出来拼装成需要的格式就行了。