{"id":206,"date":"2025-11-25T09:39:37","date_gmt":"2025-11-25T01:39:37","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=206"},"modified":"2025-11-25T09:39:37","modified_gmt":"2025-11-25T01:39:37","slug":"%e4%bd%bf%e7%94%a8canvas%e4%bb%bfecharts%e5%ae%9e%e7%8e%b0%e9%87%91%e5%ad%97%e5%a1%94%e5%9b%be%e7%9a%84%e5%ae%9e%e4%be%8b%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/%e4%bd%bf%e7%94%a8canvas%e4%bb%bfecharts%e5%ae%9e%e7%8e%b0%e9%87%91%e5%ad%97%e5%a1%94%e5%9b%be%e7%9a%84%e5%ae%9e%e4%be%8b%e4%bb%a3%e7%a0%81\/","title":{"rendered":"\u4f7f\u7528canvas\u4effEcharts\u5b9e\u73b0\u91d1\u5b57\u5854\u56fe\u7684\u5b9e\u4f8b\u4ee3\u7801"},"content":{"rendered":"\n<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a <strong>\u7eaf Canvas \u4eff ECharts \u5b9e\u73b0\u91d1\u5b57\u5854\u56fe\u7684\u5b8c\u6574\u793a\u4f8b<\/strong>\uff0c\u652f\u6301\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u81ea\u5b9a\u4e49\u6570\u636e<\/li>\n\n\n\n<li>\u81ea\u9002\u5e94 Canvas \u5927\u5c0f<\/li>\n\n\n\n<li>\u91d1\u5b57\u5854\u5c42\u7ea7\u6309\u6570\u636e\u6bd4\u4f8b\u7ed8\u5236<\/li>\n\n\n\n<li>\u652f\u6301\u5728\u6bcf\u5c42\u663e\u793a\u6807\u7b7e\u548c\u767e\u5206\u6bd4<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n&amp;lt;title&gt;Canvas \u4eff ECharts \u91d1\u5b57\u5854\u56fe&amp;lt;\/title&gt;\n&amp;lt;style&gt;\n  body { font-family: Arial, sans-serif; text-align: center; margin-top: 20px; }\n  canvas { border: 1px solid #ccc; }\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;h1&gt;Canvas \u4eff ECharts \u91d1\u5b57\u5854\u56fe&amp;lt;\/h1&gt;\n&amp;lt;canvas id=&quot;pyramid&quot; width=&quot;400&quot; height=&quot;500&quot;&gt;&amp;lt;\/canvas&gt;\n\n&amp;lt;script&gt;\nconst canvas = document.getElementById(&#039;pyramid&#039;);\nconst ctx = canvas.getContext(&#039;2d&#039;);\n\nconst data = &#x5B;\n  {name: &#039;\u7b2c\u4e00\u5c42&#039;, value: 100},\n  {name: &#039;\u7b2c\u4e8c\u5c42&#039;, value: 80},\n  {name: &#039;\u7b2c\u4e09\u5c42&#039;, value: 60},\n  {name: &#039;\u7b2c\u56db\u5c42&#039;, value: 40},\n  {name: &#039;\u7b2c\u4e94\u5c42&#039;, value: 20}\n];\n\nconst colors = &#x5B;&#039;#ff4d4f&#039;,&#039;#ff7a45&#039;,&#039;#ffa940&#039;,&#039;#ffd666&#039;,&#039;#73d13d&#039;];\n\nfunction drawPyramid(data){\n  const canvasWidth = canvas.width;\n  const canvasHeight = canvas.height;\n  const totalValue = data&#x5B;0].value; \/\/ \u6309\u6700\u5927\u503c\u7f29\u653e\n  const layerHeight = canvasHeight \/ data.length;\n\n  ctx.clearRect(0,0,canvasWidth, canvasHeight);\n  ctx.textAlign = &#039;center&#039;;\n  ctx.textBaseline = &#039;middle&#039;;\n  ctx.font = &#039;16px Arial&#039;;\n  ctx.strokeStyle = &#039;#fff&#039;;\n\n  data.forEach((item, index) =&gt; {\n    const layerWidth = canvasWidth * (item.value \/ totalValue);\n    const x = (canvasWidth - layerWidth)\/2;\n    const y = index * layerHeight;\n\n    \/\/ \u7ed8\u5236\u68af\u5f62\n    const nextWidth = index &amp;lt; data.length - 1 ? canvasWidth * (data&#x5B;index+1].value \/ totalValue) : 0;\n    ctx.beginPath();\n    ctx.moveTo(x, y);\n    ctx.lineTo(x + layerWidth, y);\n    ctx.lineTo(x + nextWidth + (layerWidth - nextWidth)\/2, y + layerHeight);\n    ctx.lineTo(x + (layerWidth - nextWidth)\/2, y + layerHeight);\n    ctx.closePath();\n    ctx.fillStyle = colors&#x5B;index % colors.length];\n    ctx.fill();\n    ctx.stroke();\n\n    \/\/ \u7ed8\u5236\u6587\u5b57\n    ctx.fillStyle = &#039;#000&#039;;\n    ctx.fillText(`${item.name} (${item.value})`, canvasWidth\/2, y + layerHeight\/2);\n  });\n}\n\ndrawPyramid(data);\n&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u7279\u6027\u8bf4\u660e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u81ea\u9002\u5e94 Canvas<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u91d1\u5b57\u5854\u56fe\u6839\u636e Canvas \u5bbd\u9ad8\u81ea\u52a8\u7ed8\u5236<\/li>\n\n\n\n<li>\u6bcf\u5c42\u9ad8\u5ea6\u76f8\u7b49<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6309\u6bd4\u4f8b\u7ed8\u5236<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u6bcf\u5c42\u5bbd\u5ea6\u6309\u6570\u636e\u503c\u5360\u6700\u5927\u503c\u7684\u6bd4\u4f8b<\/li>\n\n\n\n<li>\u5b9e\u73b0\u91d1\u5b57\u5854\u9010\u5c42\u6536\u7a84\u6548\u679c<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6587\u5b57\u663e\u793a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5728\u6bcf\u5c42\u4e2d\u592e\u663e\u793a\u5c42\u540d\u548c\u6570\u503c<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u989c\u8272\u81ea\u5b9a\u4e49<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>colors<\/code> \u6570\u7ec4\u53ef\u81ea\u7531\u5b9a\u4e49\u6bcf\u5c42\u989c\u8272<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u6269\u5c55\u601d\u8def<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u9f20\u6807\u60ac\u6d6e\u63d0\u793a<\/strong>\uff1a\u7528 <code>mousemove<\/code> \u76d1\u542c\u5750\u6807\uff0c\u663e\u793a\u6d6e\u52a8 tooltip<\/li>\n\n\n\n<li><strong>\u767e\u5206\u6bd4\u663e\u793a<\/strong>\uff1a\u5728 <code>fillText<\/code> \u4e2d\u663e\u793a\u5360\u6bd4<\/li>\n\n\n\n<li><strong>\u52a8\u753b\u6548\u679c<\/strong>\uff1a\u4f7f\u7528 <code>requestAnimationFrame<\/code> \u9010\u6b65\u7ed8\u5236\u6bcf\u5c42<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a \u7eaf Canvas \u4eff ECharts \u5b9e\u73b0\u91d1\u5b57\u5854\u56fe\u7684&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/%e4%bd%bf%e7%94%a8canvas%e4%bb%bfecharts%e5%ae%9e%e7%8e%b0%e9%87%91%e5%ad%97%e5%a1%94%e5%9b%be%e7%9a%84%e5%ae%9e%e4%be%8b%e4%bb%a3%e7%a0%81\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-206","post","type-post","status-publish","format-standard","hentry","category-1"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/206\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/206\/revisions\/207"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}