【无标题】

记录下工作遇到的问题

有的地方遇到需要返回字符串拼接成html的函数，而 ${xxx}拼接某些复杂类型时不能用JSON.stringify转成功，会获得一个[object Object]然后报错

创造DOM解决，例子

window.deleteCircle= deleteCircle 
// tooltip格式化
    const circleFormatter = (params: any)=>{
      let _option = baseChart.value.instance.getOption()
      const polar_index: number = _option.series[params.seriesIndex].polarIndex
      const chart_list = [
        baseChart,
        baseChart1
      ]
      const deleteFun = (baseChart_list: any[], polar_index: number) => {
        console.log(polar_index)
        console.log(chart_list)
        return deleteCircle(baseChart_list, polar_index)
      }
       return `<a>删除seriesIndex:${params.seriesIndex}?
               <button onClick="deleteCircle([${baseChart}, ${baseChart1}], ${polar_index})">删除</button>
               </a>`
    }

deleteCircle函数还要注册全局变量不然会报未定义的错，然而已经会出错，故以下为解决方案

// tooltip格式化
    const circleFormatter = (params: any)=>{
      let _option = baseChart.value.instance.getOption()
      const polar_index: number = _option.series[params.seriesIndex].polarIndex
      const chart_list = [
        baseChart,
        baseChart1
      ]
      const deleteFun = (baseChart_list: any[], polar_index: number) => {
        console.log(polar_index)
        console.log(chart_list)
        return deleteCircle(baseChart_list, polar_index)
      }
      // return `<a>删除seriesIndex:${params.seriesIndex}?
      //         <button onClick="deleteCircle([${baseChart}, ${baseChart1}], ${polar_index})">删除</button>
      //         </a>`
      const a = document.createElement('a')
      a.textContent = '删除seriesIndex:' + params.seriesIndex + '?'
      const button = document.createElement('button')
      button.textContent = '删除'
      button.addEventListener('click', () =>
        deleteFun([baseChart, baseChart1], polar_index)
      )
      a.appendChild(button)

      return a
    }

灵感源于https://stackoom.com/cn_en/question/4K105的二楼回答