1.模板字符串换行问题
white-space: pre-wrap;
2. 鼠标移入 显示提示框 点击手动隐藏
myChart.on("mouseover", function (params) {myChart.dispatchAction({type: "downplay",});
});tooltip: {show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。trigger: 'item', //触发类型。item,axis,noneenterable: 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 的时候会紧跟着鼠标移动。
},
有两个注意点
1.triggerOn需要设置为click触发
2.enterable设置为true ，鼠标可以进入悬浮框内
window.toolTipClose = this.toolTipClose //在formatter中给元素绑定点击事件，点击事件需要先在window上挂载toolTipClose(e){e.parentNode.style.display = 'none' //找到该元素父元素，设置display为none即可实现手动关闭
},
点击事件
window.sendObj = sendObj //在formatter中给元素绑定点击事件，点击事件需要先在window上挂载
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, // 提示框浮层的移动动画过渡时间，单位是 sbackgroundColor: "#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轴为当前鼠标位置在加10x = pointX + 10;}// boxHeight > pointY说明鼠标上边放不下提示框if (boxHeight > pointY) {y = 5;} else {// 上边放的下y = pointY - boxHeight;}return [x, y];},formatter: (params) => {const { data: { value } } = paramsvar 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;},}
)
