[{"data":1,"prerenderedAt":342},["ShallowReactive",2],{"article-5":3},{"id":4,"title":5,"body":6,"create":330,"description":12,"extension":331,"labels":332,"locked":334,"meta":335,"navigation":336,"path":337,"seo":338,"stem":339,"update":340,"__hash__":341},"articles/article/5.md","Echarts-提示框组件",{"type":7,"value":8,"toc":319},"minimark",[9,13,49,59,70,77,87,96,112,128,133,137,152,161,164,167,186,189,196,207,239,246,249,264,279,289,316],[10,11,12],"p",{},"当图表数据计量过大，图形过于密集的话，单凭肉眼是很难一眼就看出数据量的，所以使用 Echarts 图表的过程中，tooltip\n也是一个非常重要的组件。下面就来看看它的用法，看看怎么和数据联动，实现各种各样的提示框。",[10,14,15,16,20,21,24,25,28,29,32,33,36,37,40,41,44,45,48],{},"在 option 中，添加 ",[17,18,19],"code",{},"tooltip:{show:true}"," 就能够开启提示框组件的显示了，不过这时候你可能还是看不到提示框的显示，这是因为，需要设置触发方式才能顺利显示提示框。需要在\n",[17,22,23],{},"tooltip"," 配置项中添加 ",[17,26,27],{},"trigger:\u003CtriggerName>","，一共有三种类型：",[17,30,31],{},"\"item\"","（主要用在没有坐标轴的图表）、",[17,34,35],{},"\"axis\"","（用在有坐标轴的图表）、\n",[17,38,39],{},"\"none\"","（不触发）；默认的触发事件是 ",[17,42,43],{},"mousemove","，也就是鼠标移动过去的时候它就会显示，移出消失，可以通过设置\n",[17,46,47],{},"tooltip.triggerOn = 'click'"," 设置为鼠标左键单击显示，除非设置过延迟隐藏，或者是鼠标移出图表 dom\n范围，否则这个提示框会一直停留。它大体上可以分为两个部分，即坐标轴指示器和浮框。下面会大致介绍一些关于这两个组件的设置。",[50,51,53],"h2",{"id":52},"坐标轴指示器",[54,55,52],"a",{"href":56,"rel":57},"https://echarts.apache.org/zh/option.html#tooltip.axisPointer",[58],"nofollow",[10,60,61,62,65,66,69],{},"坐标轴指示器可以通过 ",[17,63,64],{},"tootip.axisPointer"," 进行设置，也可以直接通过 ",[17,67,68],{},"axisPointer"," 进行全局设置。",[10,71,72,73,76],{},"坐标轴指示器的类型可以通过 ",[17,74,75],{},"tooltip.axisPointer.type"," 进行以下设置：",[10,78,79,82],{},[17,80,81],{},"\"line\"",[83,84],"img",{"alt":85,"src":86},"tooltip_line","https://github.com/ttdly/ttdly.github.io/assets/108915955/c46ac5ec-bab5-4ff7-82ea-491f65dc84b3",[10,88,89,90,95],{},"设置为类型为 line 之后，可以通过 ",[54,91,94],{"href":92,"rel":93},"https://echarts.apache.org/zh/option.html#tooltip.axisPointer.lineStyle",[58],"lineStyle","\n设置样式，但是 cross 不行。",[10,97,98,101,105,106,111],{},[17,99,100],{},"\"shadow\"",[83,102],{"alt":103,"src":104},"tooltip_shadow","https://github.com/ttdly/ttdly.github.io/assets/108915955/54893176-3ec3-4f39-8a6d-af7715c9606d","\n设置为 shadow 之后，可以通过 ",[54,107,110],{"href":108,"rel":109},"https://echarts.apache.org/zh/option.html#tooltip.axisPointer.shadowStyle",[58],"shadowStyle","\n设置样式。",[10,113,114,117,121,122,127],{},[17,115,116],{},"\"cross\"",[83,118],{"alt":119,"src":120},"tooltip_cross","https://github.com/ttdly/ttdly.github.io/assets/108915955/3139dd98-c7fd-4a75-89d6-ab5936d4ed87","\n设置为 cross 之后，可以通过 ",[54,123,126],{"href":124,"rel":125},"https://echarts.apache.org/zh/option.html#tooltip.axisPointer.crossStyle",[58],"crossStyle"," 设置样式。",[10,129,130,132],{},[17,131,39],{}," 即不进行任何提示。",[134,135,136],"h3",{"id":136},"指示器标签",[10,138,139,140,143,144,147,148],{},"通过 ",[17,141,142],{},"tooltip.axisPointer.label"," 进行设置，设置 ",[17,145,146],{},"show = true"," 显示标签之后，会在坐标轴通过设定的格式进行坐标轴文本的高亮显示，默认会这样显示：\n",[83,149],{"alt":150,"src":151},"tooltip_label","https://github.com/ttdly/ttdly.github.io/assets/108915955/9bc56750-00dc-438b-b6fd-1155b4b7e190",[10,153,154,155,160],{},"详细配置可以看看 ",[54,156,159],{"href":157,"rel":158},"https://echarts.apache.org/zh/option.html#tooltip.axisPointer.label",[58],"官方文档","。",[10,162,163],{},"剩下的一些配置都是这个指示器的动画设置。",[50,165,166],{"id":166},"浮框层",[10,168,169,173,174,177,178,181,182,185],{},[83,170],{"alt":171,"src":172},"tootip_content","https://github.com/ttdly/ttdly.github.io/assets/108915955/83284017-4ea2-415e-b8c7-6ddf524d5ea9","\n浮框层可以将鼠标所选区域的数据通过文本显示出来，如果只需要指示器效果，而不需要浮框层的显示，可以在 tooltip 下配置\n",[17,175,176],{},"showContent = false"," 不显示这个浮框层，默认浮框层是会鼠标离开图标后隐藏，隐藏的延迟通过 ",[17,179,180],{},"hideDelay","\n属性进行设置，单位是毫秒，同样也可以设置触发提示框组件之后延迟多久显示浮框层，通过 ",[17,183,184],{},"showDelay"," 进行设置。",[134,187,188],{"id":188},"交互",[10,190,191,192,195],{},"默认情况下，浮框层的位置始终会跟随鼠标，有时候我们的图标 dom 大小没有留足够的空间，浮框层在边界被截断了，会产生显示不全的现象，这样就需要设置\n",[17,193,194],{},"confine = true"," 来使得浮框层能够一直在图表 dom 内显示。当然，也可以固定浮框层的位置：",[10,197,198,199,202,203,206],{},"通过数组的形式，设置浮框层左上角相对于图表左上角的位置：",[17,200,201],{},"[1,1]"," 是固定距离，距离图表左侧 1px，上侧 1px；",[17,204,205],{},"[50%,50%]","\n是处于图表中间（注意是左上角处于图表中间，并不是浮框层的中心点对准图表中心点）。",[10,208,209,210,213,214,216,217,220,221,220,224,227,228,220,231,234,235],{},"当你的 ",[17,211,212],{},"trigger"," 参数设置为 ",[17,215,31],{}," 时，你可以对 position 进行相对于 item 的设置即：",[17,218,219],{},"\"inside\"","、",[17,222,223],{},"\"top\"",[17,225,226],{},"\"left\"","、\n",[17,229,230],{},"\"right\"",[17,232,233],{},"\"bottom\""," 对于这个浮框层的位置，可以参考下图：\n",[83,236],{"alt":237,"src":238},"content_position","https://github.com/ttdly/ttdly.github.io/assets/108915955/5c702145-616d-40f4-99f9-98427007f566",[10,240,241,242,245],{},"有时，我们想要在浮框层里面进行一些交互设计，默认情况下鼠标是很难做到进入浮框层内的，这时候通过设置 ",[17,243,244],{},"tooltip. enterable ​","\n就能够很轻松地在任何情况下让鼠标进入浮框层进行交互了。",[134,247,248],{"id":248},"渲染",[10,250,251,252,255,256,259,260,263],{},"echarts 图表的渲染模式有两种模式，一种是 svg 一种是 canvas，但是浮框层可以设置为 html 格式，通过\n",[17,253,254],{},"tooltip.renderMode =\"html\"","进行设置，如果设置了 html 渲染模式的话，就可以通过",[17,257,258],{},"tooltip.className","设置该 html 节点的类名。同时，由于\nhtml 模式渲染出的组件默认是包括在图表根节点内，所以当图表根节点设置了 overflow: hidden 的时候，渲染出来的浮框层即使是设置了\nconfine 属性，也有可能显示不全，所以官方提供了",[17,261,262],{},"tootip.appendToBody = true"," 这个选项来使得浮框层是直属 body\n的元素，一定程度上解决了显示不全的情况。",[10,265,266,267,270,271,274,275,278],{},"对于浮框层的文本，文本的样式可以通过 ",[17,268,269],{},"tooltip.textStyle"," 选项设置，文本显示格式可以通过 ",[17,272,273],{},"tooltip.formatter","\n控制，对于文本中数值的处理，通过 ",[17,276,277],{},"tooltip.valueFormatter"," 进行设置，参数是需要提供一个处理函数：",[280,281,287],"pre",{"className":282,"code":284,"language":285,"meta":286},[283],"language-javascript","(value) => value.toFixed (1)+ '℃'\n// 传入 36\n// 输出 36.0℃\n","javascript","",[17,288,284],{"__ignoreMap":286},[10,290,291,292,220,295,220,298,220,301,304,305,307,308,311,312,315],{},"对于浮框层本身，可配置的属性有 ",[17,293,294],{},"backgroundColor",[17,296,297],{},"borderWidth",[17,299,300],{},"borderColor",[17,302,303],{},"padding"," 但是对于长度的话，不需要额外添加单位；基本上和\ncss 的属性配置是一样的，但是 ",[17,306,303],{}," 的速记形式不可以像 css 那样设置，顺序是一样的，但是需要套个数组，如 ",[17,309,310],{},"[5,10]"," 就是上下内边距\n5px，左右内边距 10px。如果想要设置额外的 css 属性，需要通过设置 ",[17,313,314],{},"tooltip.extraCssText"," 进行添加，就像写 html 行内样式一样。",[10,317,318],{},"到这里，对于 echarts 的提示框组件基本介绍完毕，可以见得我们能够通过一系列的设置，设计出我们想要的提示框组件。",{"title":286,"searchDepth":320,"depth":320,"links":321},2,[322,326],{"id":52,"depth":320,"text":52,"children":323},[324],{"id":136,"depth":325,"text":136},3,{"id":166,"depth":320,"text":166,"children":327},[328,329],{"id":188,"depth":325,"text":188},{"id":248,"depth":325,"text":248},"2023-05-19T07:13:00.000Z","md",[333],"echarts",false,{},true,"/article/5",{"title":5,"description":12},"article/5","2023-05-19T07:18:12.000Z","cfwNkiW7TWR_fC0ZEdIbyx9pT1gsfnxqScS22apMfyc",1755235549204]