{"id":514,"date":"2025-12-05T19:28:00","date_gmt":"2025-12-05T11:28:00","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=514"},"modified":"2025-12-05T19:28:00","modified_gmt":"2025-12-05T11:28:00","slug":"vue3%e7%bb%98%e5%88%b6%e5%a4%9a%e7%b3%bb%e5%88%97%e6%9f%b1%e7%8a%b6%e5%9b%be%e4%b8%8e%e6%9b%b2%e7%ba%bf%e5%9b%be%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/vue3%e7%bb%98%e5%88%b6%e5%a4%9a%e7%b3%bb%e5%88%97%e6%9f%b1%e7%8a%b6%e5%9b%be%e4%b8%8e%e6%9b%b2%e7%ba%bf%e5%9b%be%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81\/","title":{"rendered":"Vue3\u7ed8\u5236\u591a\u7cfb\u5217\u67f1\u72b6\u56fe\u4e0e\u66f2\u7ebf\u56fe\u7684\u793a\u4f8b\u4ee3\u7801"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60 Vue 3 + ECharts<\/strong> \u5b9e\u73b0 \u591a\u7cfb\u5217\u67f1\u72b6\u56fe\uff08Bar\uff09+ \u66f2\u7ebf\u56fe\uff08Line\uff09<\/strong> \u7684\u5b8c\u6574\u793a\u4f8b\u4ee3\u7801\uff0c\u76f4\u63a5\u53ef\u7528\uff0c\u9002\u5408\u524d\u7aef\u9879\u76ee\u4e2d\u5feb\u901f\u96c6\u6210\u3002<\/p>\n\n\n\n

\n\n\n\n

\u2705 Vue3 \u7ed8\u5236\u591a\u7cfb\u5217\u67f1\u72b6\u56fe\u4e0e\u66f2\u7ebf\u56fe\uff08Bar + Line\uff09\u793a\u4f8b\u4ee3\u7801<\/h1>\n\n\n\n

\u4f7f\u7528 ECharts 5<\/strong> + Vue 3 Composition API<\/strong><\/p>\n\n\n\n

\n\n\n\n

\ud83d\udccc 1. \u5b89\u88c5 ECharts<\/h2>\n\n\n
\nnpm install echarts\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
\ud83d\udccc 2. \u521b\u5efa\u7ec4\u4ef6\uff08BarLineChart.vue\uff09<\/h2>\n\n\n\n
\u4e0b\u9762\u4ee3\u7801\u7ed3\u6784\u6e05\u6670\u3001\u53ef\u76f4\u63a5\u8fd0\u884c\uff0c\u542b\u54cd\u5e94\u5f0f\u5927\u5c0f\u3001\u60ac\u505c\u63d0\u793a\u3001\u5750\u6807\u8f74\u3001\u53cc\u8f74\u5904\u7406\u7b49\u3002<\/p>\n\n\n
\n&lt;template>\n  &lt;div ref="chartRef" style="width:100%; height:400px;">&lt;\/div>\n&lt;\/template>\n\n&lt;script setup lang="ts">\nimport * as echarts from "echarts";\nimport { ref, onMounted, onBeforeUnmount } from "vue";\n\nconst chartRef = ref&lt;HTMLElement | null>(null);\nlet chartInstance: echarts.ECharts | null = null;\n\nonMounted(() => {\n  if (!chartRef.value) return;\n\n  chartInstance = echarts.init(chartRef.value);\n\n  const option = {\n    title: {\n      text: "\u591a\u7cfb\u5217\u67f1\u72b6\u56fe + \u66f2\u7ebf\u56fe",\n      left: "center"\n    },\n    tooltip: {\n      trigger: "axis"\n    },\n    legend: {\n      top: "5%",\n      data: ["\u9500\u552e\u989d", "\u5229\u6da6", "\u589e\u957f\u7387"]\n    },\n    xAxis: {\n      type: "category",\n      data: ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708"],\n    },\n    yAxis: [\n      {\n        type: "value",\n        name: "\u91d1\u989d\uff08\u4e07\u5143\uff09"\n      },\n      {\n        type: "value",\n        name: "\u589e\u957f\u7387\uff08%\uff09",\n        position: "right",\n        axisLine: {\n          show: true\n        }\n      }\n    ],\n    series: [\n      \/\/ \u67f1\u72b6\u56fe\u7cfb\u52171\n      {\n        name: "\u9500\u552e\u989d",\n        type: "bar",\n        data: [120, 200, 150, 80, 70, 110],\n        barWidth: 30\n      },\n      \/\/ \u67f1\u72b6\u56fe\u7cfb\u52172\n      {\n        name: "\u5229\u6da6",\n        type: "bar",\n        data: [20, 40, 25, 18, 15, 28],\n        barWidth: 30\n      },\n      \/\/ \u6298\u7ebf\u56fe\u7cfb\u5217\uff08\u53f3\u4fa7 Y \u8f74\uff09\n      {\n        name: "\u589e\u957f\u7387",\n        type: "line",\n        yAxisIndex: 1,\n        data: [2, 5, 3, 1, 0.5, 2.5],\n        smooth: true\n      }\n    ]\n  };\n\n  chartInstance.setOption(option);\n\n  \/\/ \u76d1\u542c\u7a97\u53e3\u53d8\u5316\u81ea\u52a8\u7f29\u653e\n  window.addEventListener("resize", resizeChart);\n});\n\nconst resizeChart = () => {\n  chartInstance?.resize();\n};\n\nonBeforeUnmount(() => {\n  window.removeEventListener("resize", resizeChart);\n  chartInstance?.dispose();\n});\n&lt;\/script>\n\n&lt;style scoped>\n\/* \u53ef\u6839\u636e\u9700\u6c42\u8bbe\u7f6e\u7ec4\u4ef6\u6837\u5f0f *\/\n&lt;\/style>\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
\ud83c\udfaf \u4ee3\u7801\u4eae\u70b9\u89e3\u6790<\/h1>\n\n\n\n
\u2714 \u540c\u65f6\u652f\u6301\u67f1\u72b6\u56fe + \u6298\u7ebf\u56fe<\/h3>\n\n\n\n
type: \"bar\"<\/code> \u548c type: \"line\"<\/code> \u6df7\u5408\u4f7f\u7528\u3002<\/p>\n\n\n\n
\u2714 \u53cc Y \u8f74<\/h3>\n\n\n\n
\u9002\u7528\u4e8e\u91d1\u989d\u4e0e\u767e\u5206\u6bd4\u7b49\u4e0d\u540c\u91cf\u7eb2\uff1a<\/p>\n\n\n
\nyAxis: [\n  {...}, \/\/ \u91d1\u989d\n  {...}  \/\/ \u589e\u957f\u7387\n]\n\n<\/pre><\/div>\n\n\n
\u2714 \u54cd\u5e94\u5f0f\u81ea\u9002\u5e94\u5927\u5c0f<\/h3>\n\n\n
\nwindow.addEventListener("resize", resizeChart);\n\n<\/pre><\/div>\n\n\n
\u2714 \u5e73\u6ed1\u6298\u7ebf\u56fe<\/h3>\n\n\n
\nsmooth: true\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
\ud83d\udccc \u5982\u4f55\u5728\u9875\u9762\u4e2d\u4f7f\u7528\uff1f<\/h1>\n\n\n
\n&lt;template>\n  &lt;BarLineChart\/>\n&lt;\/template>\n\n&lt;script setup>\nimport BarLineChart from ".\/components\/BarLineChart.vue";\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
\u4f60\u60f3\u8981\u54ea\u4e2a\u7248\u672c\uff1f<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e0b\u9762\u7ed9\u4f60 Vue 3 + ECharts \u5b9e\u73b0 \u591a\u7cfb\u5217\u67f1\u72b6\u56fe\uff08Bar\uff09+ \u66f2\u7ebf\u56fe… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-514","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/514","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=514"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/514\/revisions"}],"predecessor-version":[{"id":515,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/514\/revisions\/515"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}