echarts 自定义tooltip样式
1.echarts options设置
tooltip: { trigger: 'item', className: 'custom-tooltip-box', // 命名父级类名 formatter: function (params) { const { name, value } = params var htmlText = `<div class='custom-tooltip-style'> // 用html自定义样式 <div class='custom-tooltip-top'> <div class='custom-tooltip-topImg'></div> ${name}专利量 </div> <div class='custom-tooltip-middle'></div> <div class='custom-tooltip-bbotton'> ${value || 0} </div> </div>` return htmlText } },
2.设置样式
<style scoped lang="scss"> // 给父盒子清除默认已有样式 /deep/ .custom-tooltip-box { padding: 0 !important; border: none !important; // 给子盒子自定义样式 .custom-tooltip-style { margin: 16px 25px 19px 25px; display: flex; flex-direction: column; .custom-tooltip-top { display: flex; color: #000000; align-items: center; .custom-tooltip-topImg { background-image: url('/static/images/icon.png'); width: 12px; height: 14px; margin-right: 8px; } } .custom-tooltip-middle { opacity: 0.5; height: 1px; background: #a3a199; margin: 8px 0 12px 0; } .custom-tooltip-bbotton { color: #000000; font-size: 30px; font-family: Helvetica; font-weight: bold; } } } </style>