echarts悬浮窗做透明效果

最新推荐文章于 2024-08-17 10:42:50 发布

DRAGONZLL111

最新推荐文章于 2024-08-17 10:42:50 发布

阅读量222

点赞数 2

文章标签： echarts css javascript

本文链接：https://blog.csdn.net/DRAGONZLL111/article/details/141027574

版权

tooltip: {
    trigger: 'axis',
    borderWidth: 0,
    padding: [0],
    backgroundColor: 'rgba(50,50,50,0)',
    alwaysShowContent: true, //是否永远显示提示框内容
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      return `<div style="width: 180px;padding: 10px; font-size: 12px;border-radius: 6px;
      border-image: linear-gradient(335deg, #FFFFFF 3%, rgba(255, 255, 255, 0) 79%) 0.5;
          backdrop-filter: blur(1px);
          background:  linear-gradient(319deg, rgba(253, 254, 255, 0.6) -7%, rgba(244, 247, 252, 0.6) 86%)"
      ">
    <div style="display: flex;justify-content: space-between;margin-bottom: 5px;padding: 0 5px;">
        <span>${params[0].data[0]}</span>
        <span>${
          params[0].data[1] + params[1].data[1] + params[2].data[1] + params[3].data[1]
        }/辆</span>
    </div>
    <div style="display: flex;justify-content: space-between;height: 32px;margin-bottom: 5px;line-height: 32px; background-color: #fff;padding: 0 10px;border-radius:4px;">
        <div>
            <span style="display: inline-block;width: 10px;height: 10px;margin-right: 10px;background-color: #0165FE;border-radius: 2px;"></span>
            <span>蓝色车牌</span>
        </div>
        <div style="font-size: 13px;">${params[3].data[1]}/辆</div>
    </div>
     <div style="display: flex;justify-content: space-between;height: 32px;margin-bottom: 5px;line-height: 32px; background-color: #fff;padding: 0 10px;border-radius:4px;">
        <div>
            <span style="display: inline-block;width: 10px;height: 10px;margin-right: 10px;background-color: #FFB200;border-radius: 2px;"></span>
            <span>黄色车牌</span>
        </div>
        <div style="font-size: 13px;">${params[2].data[1]}/辆</div>
    </div>
    <div style="display: flex;justify-content: space-between;height: 32px;margin-bottom: 5px;line-height: 32px; background-color: #fff;padding: 0 10px;border-radius:4px;">
        <div>
            <span style="display: inline-block;width: 10px;height: 10px;margin-right: 10px;background-color: #6DE55E;border-radius: 2px;"></span>
            <span>渐变绿车牌</span>
        </div>
        <div style="font-size: 13px;">${params[1].data[1]}/辆</div>
    </div>
    <div style="display: flex;justify-content: space-between;height: 32px;margin-bottom: 5px;line-height: 32px; background-color: #fff;padding: 0 10px;border-radius:4px;">
        <div>
            <span style="display: inline-block;width: 10px;height: 10px;margin-right: 10px;background-color: #D5DEEE;border-radius: 2px;"></span>
            <span>白色车牌</span>
        </div>
        <div style="font-size: 13px;">${params[0].data[1]}/辆</div>
    </div>

</div>`
    }
  },

backgroundColor: 'rgba(50,50,50,0)',

border-image: linear-gradient(335deg, #FFFFFF 3%, rgba(255, 255, 255, 0) 79%) 0.5;

backdrop-filter: blur(1px);

background: linear-gradient(319deg, rgba(253, 254, 255, 0.6) -7%, rgba(244, 247, 252, 0.6) 86%)"

重点是这几行代码