echarts+Vue2：定制tooltip弹框

原创已于 2024-04-04 21:27:00 修改

· 1.6k 阅读

26 ·

版权

文章标签：

#echarts #javascript #前端

于 2023-11-27 21:00:00 首次发布

Q1：怎么添加自定义按钮？

A1：模版字符串

// 配置项部分
tooltip: {
  trigger: 'item',     // 数据项图形触发
  enterable: true,     // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
  confine: true,       // 是否将 tooltip 框限制在图表的区域内。
  triggerOn: 'click',  // 提示框触发的条件
  backgroundColor: 'rgba(0,0,0,0.60)', // 提示框浮层的背景颜色
  formatter: (params) => {
    return `
      <div class="map-tooltip" id="map-tooltip">
        <div class="tip-title">${params.name}</div>
        <button onclick="${this.checkDetail(params)}" id="check-detail-btn" class="tip-btn" type="button">查看详情</button>
      </div>`
  }
}


// 按钮方法
checkDetail (params) {
  this.$nextTick(() => {
    document.getElementById('check-detail-btn').addEventListener('click', () => {
      // some code
    })
  })
},

Q2：怎么给弹框加自定义样式？

A1：tooltip. extraCssText 【给tooltilp的DOM节点，添加行内样式】

tooltip: {
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 为tooltip背景添加阴影。
    // 设置了tooltip.backgroundColor,且extraCssText设置了background-color。后者的优先级更高，弹框背景渲染成后者设置的颜色。
}

A2：tooltip. className【指定 tooltip 的 DOM 节点的 CSS 类】

这个属性生效的2个前提条件：

-- tooltip.renderMode为'html'

-- echarts的版本在 v5.0.0及以上
```
tooltip: {
    className: 'echarts-tooltip echarts-tooltip-dark'
}
```

A3：tooltip.formatter【指定 tooltip 的内容，可以添加class】

tooltip: {
    formatter: (params) => {
        return `
            <div class="tooltip-title">title</div>
        `
    }
}


// css
.tooltip-title {
    font-size: 20px;
    font-weight: bold;
}

Q3：自定义弹框添加了自定义class，样式不生效？

因为css 加了scoped属性。

A1：style为css时，>>> 操作符
A2：style使用css的预处理器(less, sass, scss)时，使用::v-deep或/deep/。 /deep/ 或 ::v-deep 操作符都是 >>> 的别名。建议使用::v-deep，/deep/在某些时候会报错，::v-deep更保险并且编译速度更快【本人未验证，请自行尝试】。

Q4：自定义弹框时，怎么实现数值千分位分隔？

利用 echarts.format.addCommas() 方法。

formatter: function (params) {
    return echarts.format.addCommas(params.value);
}

The end.