{"id":3528,"date":"2024-03-13T07:05:05","date_gmt":"2024-03-13T07:05:05","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/"},"modified":"2025-07-30T17:36:43","modified_gmt":"2025-07-30T17:36:43","slug":"how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/","title":{"rendered":"Responsive ECharts in Vue: Resize Guide"},"content":{"rendered":"

When using ECharts charts in Vue, you can dynamically adjust the size of the chart to make it responsive by listening to window size changes. The specific steps are as follows:<\/p>\n

    \n
  1. Import ECharts in Vue components and initialize the chart in the mounted hook.<\/li>\n<\/ol>\n
    import<\/span> echarts from<\/span> 'echarts'<\/span>\r\n\r\nexport<\/span> default<\/span> {\r\n  data<\/span>(<\/span>) {\r\n    return<\/span> {\r\n      chart<\/span>: null<\/span>\r\n    }\r\n  },\r\n  mounted<\/span>(<\/span>) {\r\n    this<\/span>.chart<\/span> = echarts.init<\/span>(this<\/span>.$refs<\/span>.chart<\/span>)\r\n    \/\/ \u521d\u59cb\u5316\u56fe\u8868<\/span>\r\n    this<\/span>.chart<\/span>.setOption<\/span>({...})\r\n    \r\n    \/\/ \u76d1\u542c\u7a97\u53e3\u5927\u5c0f\u53d8\u5316<\/span>\r\n    window<\/span>.addEventListener<\/span>('resize'<\/span>, this<\/span>.handleResize<\/span>)\r\n  },\r\n  methods<\/span>: {\r\n    handleResize<\/span>(<\/span>) {\r\n      this<\/span>.chart<\/span>.resize<\/span>()\r\n    }\r\n  },\r\n  beforeDestroy<\/span>(<\/span>) {\r\n    \/\/ \u5728\u7ec4\u4ef6\u9500\u6bc1\u524d\u79fb\u9664resize\u4e8b\u4ef6\u76d1\u542c<\/span>\r\n    window<\/span>.removeEventListener<\/span>('resize'<\/span>, this<\/span>.handleResize<\/span>)\r\n  }\r\n}\r\n<\/code><\/pre>\n
      \n
    1. Reference<\/li>\n<\/ol>\n
      <template<\/span>><\/span>\r\n  <div<\/span> ref<\/span>=\"chart\"<\/span> style<\/span>=\"width: 100%; height: 400px;\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/template<\/span>><\/span>\r\n<\/code><\/pre>\n
      In this way, the ECharts chart will automatically adjust its size to maintain its display effect when the window size changes.<\/p>\n","protected":false},"excerpt":{"rendered":"
      When using ECharts charts in Vue, you can dynamically adjust the size of the chart to make it responsive by listening to window size changes. The specific steps are as follows: Import ECharts in Vue components and initialize the chart in the mounted hook. import echarts from ‘echarts’ export default { data() { return { […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[1944,1941,324,1943,1942],"class_list":["post-3528","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-chart-adaptation","tag-echarts","tag-javascript","tag-responsive-design","tag-vue"],"yoast_head":"\nResponsive ECharts in Vue: Resize Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to make ECharts responsive in Vue. Dynamically adjust chart sizes using window resize listeners for optimal adaptation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive ECharts in Vue: Resize Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to make ECharts responsive in Vue. Dynamically adjust chart sizes using window resize listeners for optimal adaptation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-13T07:05:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-30T17:36:43+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"Responsive ECharts in Vue: Resize Guide\",\"datePublished\":\"2024-03-13T07:05:05+00:00\",\"dateModified\":\"2025-07-30T17:36:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/\"},\"wordCount\":72,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"Chart Adaptation\",\"ECharts\",\"JavaScript\",\"Responsive Design\",\"Vue\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/\",\"name\":\"Responsive ECharts in Vue: Resize Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-13T07:05:05+00:00\",\"dateModified\":\"2025-07-30T17:36:43+00:00\",\"description\":\"Learn how to make ECharts responsive in Vue. Dynamically adjust chart sizes using window resize listeners for optimal adaptation.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive ECharts in Vue: Resize Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive ECharts in Vue: Resize Guide - Blog - Silicon Cloud","description":"Learn how to make ECharts responsive in Vue. Dynamically adjust chart sizes using window resize listeners for optimal adaptation.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/","og_locale":"en_US","og_type":"article","og_title":"Responsive ECharts in Vue: Resize Guide","og_description":"Learn how to make ECharts responsive in Vue. Dynamically adjust chart sizes using window resize listeners for optimal adaptation.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-13T07:05:05+00:00","article_modified_time":"2025-07-30T17:36:43+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"Responsive ECharts in Vue: Resize Guide","datePublished":"2024-03-13T07:05:05+00:00","dateModified":"2025-07-30T17:36:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/"},"wordCount":72,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["Chart Adaptation","ECharts","JavaScript","Responsive Design","Vue"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/","name":"Responsive ECharts in Vue: Resize Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-13T07:05:05+00:00","dateModified":"2025-07-30T17:36:43+00:00","description":"Learn how to make ECharts responsive in Vue. Dynamically adjust chart sizes using window resize listeners for optimal adaptation.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-solve-the-issue-of-echarts-chart-adaptation-in-vue\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive ECharts in Vue: Resize Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/3528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=3528"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/3528\/revisions"}],"predecessor-version":[{"id":148180,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/3528\/revisions\/148180"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=3528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=3528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=3528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}