早上收到产品需求,说要把弹框显示改到鼠标放在标签文字上触发,翻了一遍 e-charts 的文档看到有个 triggerEvent 属性可以控制标签鼠标事件的响应,我们可以配置这个属性让标签触发鼠标事件,然后通过 e-charts 的 event 事件来控制弹窗的显隐。
- 效果图:
- 全部代码:
<template>
<div class="radar">
<div class="chart-view" ref="dynamicRadar"></div>
<div class="radar-tooltip" v-show="isShow" ref="radarTooltip">
<div class="tooltip-title">{
{ itemName }}</div>
<div class="tooltip-content">
<div>正常机房:{
{ normalList.length }}个</div>
<div class="pt5">
<div class="item" v-for="(x, i) in normalList" :key="i">{
{ x.spaceName || "" }}</div>
</div>
</div>
<div class="tooltip-bottom">
<div>异常机房:{
{