1.模板字符串换行问题

2. 鼠标移入  显示提示框   点击手动隐藏 

myChart.on("mouseover", function (params) {
    myChart.dispatchAction({
      type: "downplay",
    });
});

tooltip: {
   show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
   trigger: 'item', //触发类型。item,axis,none
   enterable: true,//鼠标是否可进入提示框浮层中，默认为false，
   showContent: true,          //是否显示提示框浮层
   triggerOn: 'click',//提示框触发的条件(mousemove|click|none)  
   showDelay: 0,   //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
   textStyle: {
       color: 'white',
       fontSize: 12
   },
   padding: [0, 8],
   hideDelay: 10,             //浮层隐藏的延迟
   formatter: (i) => (i.data) ? `<div class="map-tooltip">
       <h3>${i.data.title}</h3>
       <i class="map-tooltip-close" οnclick="toolTipClose(this)">X</i>
       </div>` 
       : `` ,
   backgroundColor: 'none',  //提示框浮层的背景颜色。
   borderColor: "white",  //图形的描边颜色
   borderWidth: 0,
   alwaysShowContent: true,
   transitionDuration: 1,      //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
},

window.toolTipClose = this.toolTipClose   //在formatter中给元素绑定点击事件，点击事件需要先在window上挂载


toolTipClose(e){
  e.parentNode.style.display = 'none'   //找到该元素父元素，设置display为none即可实现手动关闭
},

 3.模板字符串

tooltip: {
     trigger: "item",
     padding: 5,
     confine: true, // 是否将tooltip框限制在图表的区域内
     enterable: true, // 允许鼠标移入提示悬浮层中
     hideDelay: 5, // 浮层隐藏的延迟
     axisPointer: { //坐标轴指示器，坐标轴触发有效 //默认为line，line直线，cross十字准星，shadow阴影
          type: "none",
          label: {
              textStyle: {
                 color: "#fff"
              }
          }
              
         },
         borderRadius: '8px', // 边框圆角
         borderColor: "#fff", //设置边框颜色
         triggerOn: "mousemove|click", // 提示框触发的条件
         transitionDuration: 0.8, // 提示框浮层的移动动画过渡时间，单位是 s
         backgroundColor: "#ffffff66", // 背景颜色
         position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            // boxWidth > pointX说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
               x = pointX;
            } else {
               // x轴为当前鼠标位置在加10
               x = pointX + 10;
            }
            // boxHeight > pointY说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
               y = 5;
            } else {
               // 上边放的下
               y = pointY - boxHeight;
            }
              return [x, y];
            },
            formatter: (params) => {
              const { data: { value } } = params
              var dom = "";
              if (params.data.doorHeadImage) {
                dom = `<span style="width: 270px;height: 30px">查看监控</span>`;
              } else {
                dom = `
                <div>
                 // 模板字符串中引入图片时，
                 // 1.将图片引入 作为变量 
                 // 2.将图片放入静态文件夹,防止编译
                 <img style="margin-left: 5px;width: 32px;margin-top: 2px;height: 32px;" src="${home}" alt="" />  
                  // 判断 是否有图片    
                  ${ value.img ? `<img src="${value.img}" alt="" />` : ''}
                  // 点击事件    
                  // window.sendObj = sendObj 
                  // 在methods中挂载
                  //在formatter中给元素绑定点击事件，点击事件需要先在window上挂载
                  <span onClick = 'sendObj(${JSON.stringify(value)},this)'>查看监控</span>`;
              }
              return dom;
            },
          }