{"id":9676,"date":"2024-03-14T16:28:42","date_gmt":"2024-03-14T08:28:42","guid":{"rendered":"https:\/\/sdeno.com\/?p=9676"},"modified":"2024-03-15T14:50:06","modified_gmt":"2024-03-15T06:50:06","slug":"echarts%e7%9a%84tooltip%e8%b6%85%e5%87%ba%e5%b1%8f%e5%b9%95%e5%8f%af%e8%a7%86%e8%8c%83%e5%9b%b4","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=9676","title":{"rendered":"echarts\u7684tooltip\u8d85\u51fa\u5c4f\u5e55\u53ef\u89c6\u8303\u56f4"},"content":{"rendered":"<p>\u89e3\u51b3\u524d<\/p>\n<figure class=\"mdx-lazyload-container\" style=\"max-width:503px\"><div style=\"padding-top:62.027833001988%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"503\" height=\"312\" class=\"alignnone size-full wp-image-9677 lazyload\" title=\"echarts\u7684tooltip\u8d85\u51fa\u5c4f\u5e55\u53ef\u89c6\u8303\u56f4\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103228.png\" alt=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103228.png\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103228.png 503w, https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103228-300x186.png 300w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\"><\/figure>\n<p>&nbsp;<\/p>\n<p>\u89e3\u51b3\u540e<\/p>\n<figure class=\"mdx-lazyload-container\" style=\"max-width:775px\"><div style=\"padding-top:40.258064516129%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"775\" height=\"312\" class=\"alignnone size-full wp-image-9678 lazyload\" title=\"echarts\u7684tooltip\u8d85\u51fa\u5c4f\u5e55\u53ef\u89c6\u8303\u56f4\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103241.png\" alt=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103241.png\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103241.png 775w, https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103241-300x121.png 300w, https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314103241-768x309.png 768w\" sizes=\"auto, (max-width: 775px) 100vw, 775px\"><\/figure>\n<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">tooltip: {\r\n   position: function (point, params, dom, rect, size) {\r\n             \/\/ \u83b7\u53d6\u53ef\u89c6\u533a\u57df\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\r\n             const viewWidth = size.viewSize[0];\r\n             const viewHeight = size.viewSize[1];\r\n\r\n             \/\/ \u83b7\u53d6\u63d0\u793a\u6846\u5185\u5bb9\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\r\n             const tooltipWidth = dom.offsetWidth;\r\n             const tooltipHeight = dom.offsetHeight;\r\n\r\n             \/\/ \u8bbe\u7f6e\u63d0\u793a\u6846\u7684\u4f4d\u7f6e\r\n             let left = point[0];\r\n             let top = point[1];\r\n\r\n             \/\/ \u5224\u65ad\u63d0\u793a\u6846\u662f\u5426\u8d85\u51fa\u53ef\u89c6\u8303\u56f4\uff0c\u5982\u679c\u8d85\u51fa\u5219\u8c03\u6574\u4f4d\u7f6e\r\n             if (left + tooltipWidth &gt; viewWidth) {\r\n               left = viewWidth - tooltipWidth;\r\n             }\r\n             if (top + tooltipHeight &gt; viewHeight) {\r\n               top = viewHeight - tooltipHeight;\r\n             }\r\n\r\n             return [left, top];\r\n           },\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">tooltip \u7684\u6d6e\u7a97\u8981\u53ef\u4ee5\u70b9\u51fb<\/span><\/p>\n<figure class=\"mdx-lazyload-container\" style=\"max-width:509px\"><div style=\"padding-top:54.420432220039%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"509\" height=\"277\" class=\"alignnone size-full wp-image-9680 lazyload\" title=\"echarts\u7684tooltip\u8d85\u51fa\u5c4f\u5e55\u53ef\u89c6\u8303\u56f4\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314171610.png\" alt=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314171610.png\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314171610.png 509w, https:\/\/sdeno.com\/wp-content\/uploads\/2024\/03\/QQ\u622a\u56fe20240314171610-300x163.png 300w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\"><\/figure>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">tooltip: {\r\n           position: function (point,params,dom,rect,size) {\r\n             var x = 0;\/\/x\u5750\u6807\u4f4d\u7f6e\r\n             var y = 0;\/\/y\u5750\u6807\u4f4d\u7f6e\r\n\r\n             \/\/\u5f53\u524d\u9f20\u6807\u4f4d\u7f6e\r\n             var pointX = point[0];\r\n             var pointY = point[1];\r\n\r\n             \/\/\u63d0\u793a\u6846\u5927\u5c0f\r\n             var boxWidth = size.contentSize[0];\r\n             var boxHight = size.contentSize[1];\r\n\r\n             \/\/\u8bf4\u660e\u9f20\u6807\u5de6\u8fb9\u653e\u4e0d\u4e0b\u63d0\u793a\u6846\r\n             if(boxWidth &gt; pointX){\r\n               x = 5;\r\n             }else{\/\/\u5de6\u8fb9\u4e0b\u4e00\u70b9\r\n               x = pointX - boxWidth;\r\n             }\r\n             \/\/\u8bf4\u660e\u9f20\u6807\u4e0a\u8fb9\u653e\u4e0d\u4e0b\u63d0\u793a\u6846\r\n             if(boxHight &gt; pointY){\r\n               y = 5;\r\n             }else{\/\/\u4e0a\u8fb9\u4e0b\u4e00\u70b9\r\n               y = pointY - boxHight;\r\n             }\r\n\r\n             return [x,y];\r\n           },\r\n           trigger: \"item\",\r\n           enterable: true,\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u89e3\u51b3\u524d &nbsp; \u89e3\u51b3\u540e &nbsp; tooltip: { position: function (po [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9676","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9676"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9676\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}