{"id":227,"date":"2025-01-09T10:22:00","date_gmt":"2025-01-09T02:22:00","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=227"},"modified":"2026-06-05T10:26:26","modified_gmt":"2026-06-05T02:26:26","slug":"vue3%e4%b8%ad%e4%bd%bf%e7%94%a8echarts","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2025\/01\/09\/vue3%e4%b8%ad%e4%bd%bf%e7%94%a8echarts\/","title":{"rendered":"Vue3\u4e2d\u4f7f\u7528ECharts"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">ECharts\u6587\u6863\uff1a<a href=\"https:\/\/echarts.apache.org\/handbook\/zh\/basics\/import\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/echarts.apache.org\/handbook\/zh\/basics\/import<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">NPM \u5b89\u88c5 ECharts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f60\u53ef\u4ee5\u4f7f\u7528\u5982\u4e0b\u547d\u4ee4\u901a\u8fc7 npm \u5b89\u88c5 ECharts<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install echarts --save<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u5f15\u5165 ECharts<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code><em>import<\/em> * <em>as<\/em> echarts <em>from<\/em> 'echarts';\n\n\/\/ \u57fa\u4e8e\u51c6\u5907\u597d\u7684dom\uff0c\u521d\u59cb\u5316echarts\u5b9e\u4f8b\n<em>var<\/em> myChart = echarts.init(document.getElementById('main'));\n\/\/ \u7ed8\u5236\u56fe\u8868\nmyChart.setOption({\n  title: {\n    text: 'ECharts \u5165\u95e8\u793a\u4f8b'\n  },\n  tooltip: {},\n  xAxis: {\n    data: &#91;'\u886c\u886b', '\u7f8a\u6bdb\u886b', '\u96ea\u7eba\u886b', '\u88e4\u5b50', '\u9ad8\u8ddf\u978b', '\u889c\u5b50']\n  },\n  yAxis: {},\n  series: &#91;\n    {\n      name: '\u9500\u91cf',\n      type: 'bar',\n      data: &#91;5, 20, 36, 10, 10, 20]\n    }\n  ]\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vue3\u4e2d\u4f7f\u7528<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\n  &lt;div class=\"screen-block\">\n    &lt;Title>\u9500\u552e\u7edf\u8ba1&lt;\/Title>\n    &lt;div ref=\"chartRef\" style=\"width: 100%; height: 90%\">&lt;\/div>\n  &lt;\/div>\n&lt;\/template>\n\n&lt;script setup lang=\"ts\">\nimport { shallowRef, onMounted } from \"vue\";\nimport type { ECharts, EChartsCoreOption } from \"echarts\";\nimport * as echarts from \"echarts\";\nimport Title from \"..\/Title.vue\";\n\n\/\/ 1.\u6839\u636eDOM\u521d\u59cb\u5316echarts\u5b9e\u4f8b\nconst chartRef = shallowRef&lt;HTMLElement | null>(null);\nconst chart = shallowRef&lt;ECharts | null>(null);\n\nonMounted(() => {\n  chart.value = echarts.init(chartRef.value);\n  renderChart();\n});\n\n\/\/ 2.\u6784\u5efaoption\u914d\u7f6e\u5bf9\u8c61\nconst renderChart = () => {\n  const option: EChartsCoreOption = {\n    \/\/ title: {\n    \/\/   text: \"\u9500\u552e\u7edf\u8ba1\",\n    \/\/   textStyle: {\n    \/\/     color: \"#fff\",\n    \/\/   }\n    \/\/ },\n    tooltip: {\n      trigger: \"axis\",\n      axisPointer: {\n        type: \"line\",\n        z: 0,\n        lineStyle: {\n          color: \"#2d3443\",\n        },\n      },\n    },\n    \/\/ legend: {\n    \/\/   data: &#91;\n    \/\/     {\n    \/\/       name: \"\u9500\u552e\u989d\",\n    \/\/       icon: \"circle\",\n    \/\/       textStyle: {\n    \/\/         color: \"#fff\",\n    \/\/       },\n    \/\/     },\n    \/\/   ],\n    \/\/ },\n    \/\/x\u8f74\n    xAxis: {\n      splitLine: { show: false }, \/\/ \u662f\u5426\u663e\u793a\u7f51\u683c\u7ebf\n      axisLine: { show: true }, \/\/ \u662f\u5426\u663e\u793a\u8f74\u7ebf\n      type: \"value\", \/\/ \u4f5c\u4e3a\u6570\u636e\u5c55\u793a\n      \/\/ max: function (value: any) {\n      \/\/   return parseInt(value.max * 1.2 + \"\");\n      \/\/ },\n    },\n    \/\/y\u8f74\n    yAxis: {\n      type: \"category\",\n      data: &#91;\"\u5546\u5bb61\", \"\u5546\u5bb62\", \"\u5546\u5bb63\", \"\u5546\u5bb64\", \"\u5546\u5bb65\", \"\u5546\u5bb66\"],\n      inverse: true, \/\/ y\u8f74\u53cd\u5411\n      axisLine: { show: true }, \/\/ \u662f\u5426\u663e\u793a\u8f74\u7ebf\n      axisTick: { show: false }, \/\/ \u662f\u5426\u663e\u793a\u523b\u5ea6\n      axisLabel: {\n        color: \"#fff\",\n      },\n    },\n    grid: {\n      top: \"3%\",\n      right: \"4%\",\n      bottom: \"3%\",\n      left: \"3%\",\n      containLabel: true,\n    },\n    series: &#91;\n      {\n        type: \"bar\",\n        label: {\n          show: true,\n          position: \"right\",\n        },\n        data: &#91;5, 20, 36, 10, 10, 20],\n        barWidth: 22,\n        roundCap: true,\n        showBackground: true,\n        backgroundStyle: {\n          color: \"rgba(220, 220, 220, 0.3)\",\n        },\n        itemStyle: {\n          borderWidth: 0,\n          borderRadius: &#91;0, 10, 10, 0],\n          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, &#91;\n            {\n              offset: 0,\n              color: \"#00fffb\",\n            },\n            {\n              offset: 1,\n              color: \"#0061ce\",\n            },\n          ]),\n        }\n      }\n      \/\/ {\n      \/\/   type: \"bar\",\n      \/\/   name: \"\u9500\u552e\u989d\",\n      \/\/   data: &#91;5, 20, 36, 10, 10, 20],\n      \/\/   showBackground: true,\n      \/\/   backgroundStyle: {\n      \/\/     color: \"rgba(220, 220, 220, 0.3)\",\n      \/\/   },\n      \/\/   itemStyle: {\n      \/\/     color: \"#f00\", \/\/ \u67f1\u72b6\u56fe\u989c\u8272\n      \/\/     barBorderRadius: 5, \/\/ \u67f1\u72b6\u56fe\u5706\u89d2\n      \/\/     shadowColor: \"rgba(0, 0, 0, 0.5)\", \/\/ \u9634\u5f71\u989c\u8272\n      \/\/     shadowBlur: 10, \/\/ \u6a21\u7cca\u5ea6\n      \/\/   },\n      \/\/   barWidth: 10, \/\/ \u67f1\u72b6\u56fe\u5bbd\u5ea6\n      \/\/   label: {\n      \/\/     show: true,\n      \/\/     position: \"right\",\n      \/\/     textStyle: {\n      \/\/       color: \"#fff\",\n      \/\/     },\n      \/\/   },\n      \/\/ },\n    ],\n  };\n\n  \/\/ 3.echarts\u5b9e\u4f8b\u8c03\u7528setOption\u65b9\u6cd5\uff0c\u4f20\u5165option\u5bf9\u8c61\n  chart.value!.setOption(option);\n};\n&lt;\/script>\n\n&lt;style lang=\"scss\" scoped>\n.screen-block {\n  width: 100%;\n  height: 460px;\n  background-color: var(--ds-block-bg);\n  padding: 16px;\n  margin-top: 20px;\n}\n&lt;\/style>\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"393\" height=\"392\" src=\"https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-32.png\" alt=\"\" class=\"wp-image-228\" srcset=\"https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-32.png 393w, https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-32-300x300.png 300w, https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-32-150x150.png 150w\" sizes=\"auto, (max-width: 393px) 100vw, 393px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>ECharts\u6587\u6863\uff1ahttps:\/\/echarts..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,13,11],"tags":[],"class_list":["post-227","post","type-post","status-publish","format-standard","hentry","category-echarts","category-vue","category-front"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"<a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/echarts\/\" rel=\"category tag\">ECharts<\/a> <a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/vue\/\" rel=\"category tag\">Vue<\/a> <a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/\" rel=\"category tag\">\u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":1,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":229,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/227\/revisions\/229"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}