vue中使用echarts下tooltip注意项

在使用echarts中tootip组件发现使用formatter时注意点 
           

formatter: function (params) {
              var test = '';
              params.forEach(item => {
                test += `
               **<span style="display: inline-block;
               width: 8px;
               height: 8px;
                border-radius: 50%;
                 margin-right: 8px;
                  background-color: ${ item.color }"
                  ></span>**
               <span style="color: #485465;font-size: 12px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400; margin-right: 6px;">${item.seriesName}</span>
               <span style="color: #485465;font-size: 12px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400; margin-right: 6px;">${item.data.value + '%'}</span>
               <span style="color: #485465;font-size: 12px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400; margin-right: 6px;">${item.data.name + '人'}</span>
               <br>
                `
              })
              return test;
            }

           

formatter: function (value) {
            let str = ''
            value.forEach(item => {
              str+=  `<div>
                **<span style="width: 8px; height: 8px; display: inline-block; border-radius: 50%; background-color: ${ item.color }"/>**
                <span style="display: inline-block;color: #485465;font-size: 12px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400; margin-right: 6px;">${item.data.month + '月'}</span>
                <span style="display: inline-block;color: #485465;font-size: 12px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400; margin-right: 6px;">${ item.data.value + '人' }</span>
              </div>`
            })
            return str
          }
           

正常情况span标签里面如果没有内容可以写单标签 但是在echarts的tooltip下的自定义函数中需要注意

如果使用了单标签渲染的dom就会不是我们想要的结构 希望大家注意 如有什么不足请指出 谢谢