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

11903人阅读 2023/1/31 16:41 总访问：4462625 评论：0 收藏：0 手机

分类: 前端

官方文档：
https://echarts.apache.org/zh/option.html#tooltip

### 使用的是tooltip，如果只是要显示出来，直接设置trigger: 'axis'即可
```
const option = {
  color: ['#409EFF'],
  tooltip: {
    trigger: 'axis' // 触发类型：坐标轴触发
  },
  ....
```
效果如下：
![](https://img.tnblog.net/arcimg/aojiancc2/b7d8165a61a046e69f73e89087cffbc7.png)

默认的就是把横纵坐标的值显示出来

### 可以使用formatter的字符串模板自定义
```
tooltip: {
  trigger: 'axis',
  formatter: '<div>hello</div>'
}
```
效果如下：
![](https://img.tnblog.net/arcimg/aojiancc2/c32c70bebd694fe88ba18f72f126a9d6.png)

### 使用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>`
  }
}
```
![](https://img.tnblog.net/arcimg/aojiancc2/497b140e9e18452a9aab53eb28d03e40.png)


#### 来显示一个稍微复杂一点的效果
实现一个这样的效果：
![](https://img.tnblog.net/arcimg/aojiancc2/264e12eeac02431bb038e71228593875.png)

可以看到有三个数值，所以我们第一步在后台接口返回的时候纵坐标数据就不是一个了，虽然图表需要的纵坐标还是一个，但是我们要返回一些额外的数据，我们先在接口加一点测试数据：
![](https://img.tnblog.net/arcimg/aojiancc2/618156d8ba0d447189f39dfc9759791f.png)

通过在控制台输出formatter函数的params可以看到我们额外携带的参数是在data里边的,value还是只有纵坐标的数值，需要我们可以直接用value来写
![](https://img.tnblog.net/arcimg/aojiancc2/49c757b66f6a496592e7123a2252e981.png)

**有了额外的数值我们就可以在格式化函数中去取出来用了**
```
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
  }
}
```
效果如下：
![](https://img.tnblog.net/arcimg/aojiancc2/bb76d5630ea740e09e2444c24cf288c9.png)

样式写成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
  }
}
```
效果如下：
![](https://img.tnblog.net/arcimg/aojiancc2/e308f2f58d3b4dff966ab0fc6f53cb97.png)

现在效果越来越接近了

透明度可以在背景颜色设置中通过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
  }
}
```
效果如下：
![](https://img.tnblog.net/arcimg/aojiancc2/6a7c5d3cd7f342dab02cc801f59ec4e4.png)

已经和设计图比较接近了，先到这里了

**数据多一点的效果**
```
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
  }
}
```

效果如下：
![](https://img.tnblog.net/arcimg/aojiancc2/11725ae4a4db4fceb260f3c8460cf6a2.png)


### 实现效果

设计图给的效果如下：

![](https://img.tnblog.net/arcimg/aojiancc2/c3ea1a51410d41669bf08c8fcb5121fa.png)

**实现方法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轴的数据都是简单的一个值，如果是对象的话，针对性的改变一点取值的方法就可以了，通过对象把需要的值取出来拼装成需要的格式就行了。

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

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

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}