echarts 柱状图tooltip小三角图标

gyuhao_o

已于 2022-09-14 15:53:59 修改

阅读量2.4k

点赞数 1

文章标签： echarts 前端 javascript vue.js

于 2022-09-14 15:49:53 首次发布

本文链接：https://blog.csdn.net/m0_48571414/article/details/126853426

版权

其实echarts官方给出的写法就有自带小三角形，只是设置了position属性之后才会显示出来，并且有背景颜色要求的情况下，我们需要注意不要使用透明度<1的rgba表示法，否则效果会有些差强人意。

tooltip配置：

tooltip:{
    formatter: function (params) {
         return `人数 ${num} 人 <br/> 占比 ${params.data}%`;
    },
    position: 'top',
    backgroundColor: '#EEF3FF',   //不能是rgba形式，否则会导致底下的三角形无法遮盖蓝色边框
    padding: [6,14,6,14], //上、右、下、左
    textStyle:{
        fontSize: 14,
        color: '#3D7EFF',
    }
},

注意点：

1、formatter里面可以根据需求自定义提示内容；

2、position设定提示框出现的位置，还可以选择left、right、bottom等，不设置的话，提示框会随着鼠标移动位置；

3、backgroundColor最好使用16进制，或者rgb表示，不要设置透明度小于1的rgba，否则会导致三角形无法遮盖提示框的外边框，达不到想要的效果。