企微通讯录的canvas渲染方式在echarts中使用时，姓名展示为“烫烫烫”解决方案

（图源网络） 在对接企微通讯录时发现坐标轴名字展示正确，但是tooltip展示的是“烫烫烫”，官方给出的解释是：

所以是重写tooltip的内容，我的解决方案是创建一个元素，将需要展示的内容挂载到这个元素下，用vue解析后再将内容传给echarts进行渲染，代码如下：

tooltip: {
  formatter(data){
    let html = '';
      let openId = data[0].data._origin.openId
      let id = Math.ceil(Math.random() * 1000)
      // 因为可能每次划过的地方不一致，所以每次的元素是随机的
      html = `<ww-open-data type="userName" openid="${openId}" id="wwOpenData${id}"></ww-open-data>`
      setTimeout(() => {
        window.WWOpenData && window.WWOpenData.bind(document.getElementById(`wwOpenData${id}`))
      }, 500);

    data.forEach(item => {
      html += `<div>${item.marker} ${item.seriesName}: ${ctx.formatterTime(item.value >> 0)}</div>`;
    })

    return html;
  }
}

但是我想了下，觉得应该可以把创建元素那一块写成一个组件再挂载，那样如果图表比较多的话不需要重复书写着一部分内容，感兴趣的也可以自己试下哈