{"id":15200,"date":"2024-03-15T10:43:55","date_gmt":"2024-03-15T10:43:55","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/"},"modified":"2025-08-06T16:35:31","modified_gmt":"2025-08-06T16:35:31","slug":"how-to-loop-through-and-add-data-in-echarts","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/","title":{"rendered":"How to loop through and add data in ECharts?"},"content":{"rendered":"<p>To repeatedly add data to ECharts, you can use the setOption method provided by ECharts to update the data. You can call the setOption method in a loop to gradually add data.<\/p>\n<p>Here is an example code showing how to loop through data to add it to a bar chart:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u521d\u59cb\u5316\u56fe\u8868<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> myChart = echarts.<span class=\"hljs-title function_\">init<\/span>(<span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">'chart'<\/span>));\r\n\r\n<span class=\"hljs-comment\">\/\/ \u521d\u59cb\u5316\u6570\u636e<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> data = [<span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">20<\/span>, <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">50<\/span>];\r\n\r\n<span class=\"hljs-comment\">\/\/ \u8bbe\u7f6e\u521d\u59cb\u6570\u636e<\/span>\r\nmyChart.<span class=\"hljs-title function_\">setOption<\/span>({\r\n    <span class=\"hljs-attr\">xAxis<\/span>: {\r\n        <span class=\"hljs-attr\">data<\/span>: [<span class=\"hljs-string\">'A'<\/span>, <span class=\"hljs-string\">'B'<\/span>, <span class=\"hljs-string\">'C'<\/span>, <span class=\"hljs-string\">'D'<\/span>, <span class=\"hljs-string\">'E'<\/span>]\r\n    },\r\n    <span class=\"hljs-attr\">series<\/span>: [{\r\n        <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'bar'<\/span>,\r\n        <span class=\"hljs-attr\">data<\/span>: data\r\n    }]\r\n});\r\n\r\n<span class=\"hljs-comment\">\/\/ \u5faa\u73af\u6dfb\u52a0\u6570\u636e<\/span>\r\n<span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">var<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; <span class=\"hljs-number\">10<\/span>; i++) {\r\n    <span class=\"hljs-comment\">\/\/ \u6dfb\u52a0\u65b0\u6570\u636e<\/span>\r\n    data.<span class=\"hljs-title function_\">push<\/span>(i * <span class=\"hljs-number\">10<\/span>);\r\n\r\n    <span class=\"hljs-comment\">\/\/ \u66f4\u65b0\u56fe\u8868\u6570\u636e<\/span>\r\n    myChart.<span class=\"hljs-title function_\">setOption<\/span>({\r\n        <span class=\"hljs-attr\">xAxis<\/span>: {\r\n            <span class=\"hljs-attr\">data<\/span>: [<span class=\"hljs-string\">'A'<\/span>, <span class=\"hljs-string\">'B'<\/span>, <span class=\"hljs-string\">'C'<\/span>, <span class=\"hljs-string\">'D'<\/span>, <span class=\"hljs-string\">'E'<\/span>, <span class=\"hljs-string\">'F'<\/span>, <span class=\"hljs-string\">'G'<\/span>, <span class=\"hljs-string\">'H'<\/span>, <span class=\"hljs-string\">'I'<\/span>, <span class=\"hljs-string\">'J'<\/span>]\r\n        },\r\n        <span class=\"hljs-attr\">series<\/span>: [{\r\n            <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'bar'<\/span>,\r\n            <span class=\"hljs-attr\">data<\/span>: data\r\n        }]\r\n    });\r\n}\r\n<\/code><\/pre>\n<p>In this example, the initial data is set using the setOption method. Then, through a loop, a new data is added to the data array every time the loop runs, and the setOption method is called to update the chart data. This way, you can continuously add data to an ECharts chart through a loop.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To repeatedly add data to ECharts, you can use the setOption method provided by ECharts to update the data. You can call the setOption method in a loop to gradually add data. Here is an example code showing how to loop through data to add it to a bar chart: \/\/ \u521d\u59cb\u5316\u56fe\u8868 var myChart = [&hellip;]<\/p>\n","protected":false},"author":12,"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":[453,1402,299,1404,1403],"class_list":["post-15200","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-development","tag-guide","tag-programming","tag-technology","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to loop through and add data in ECharts? - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn about how to loop through and add data in echarts?. Comprehensive guide with examples and best practices.\" \/>\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-loop-through-and-add-data-in-echarts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to loop through and add data in ECharts?\" \/>\n<meta property=\"og:description\" content=\"Learn about how to loop through and add data in echarts?. Comprehensive guide with examples and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/\" \/>\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-15T10:43:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-06T16:35:31+00:00\" \/>\n<meta name=\"author\" content=\"Liam\" \/>\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=\"Liam\" \/>\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-loop-through-and-add-data-in-echarts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/\"},\"author\":{\"name\":\"Liam\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\"},\"headline\":\"How to loop through and add data in ECharts?\",\"datePublished\":\"2024-03-15T10:43:55+00:00\",\"dateModified\":\"2025-08-06T16:35:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/\"},\"wordCount\":114,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"Development\",\"guide\",\"programming\",\"technology\",\"tutorial\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/\",\"name\":\"How to loop through and add data in ECharts? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T10:43:55+00:00\",\"dateModified\":\"2025-08-06T16:35:31+00:00\",\"description\":\"Learn about how to loop through and add data in echarts?. Comprehensive guide with examples and best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to loop through and add data in ECharts?\"}]},{\"@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\/23786905eb7b377f45ddb01c17da7671\",\"name\":\"Liam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"caption\":\"Liam\"},\"sameAs\":[\"http:\/\/Wilson\"],\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to loop through and add data in ECharts? - Blog - Silicon Cloud","description":"Learn about how to loop through and add data in echarts?. Comprehensive guide with examples and best practices.","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-loop-through-and-add-data-in-echarts\/","og_locale":"en_US","og_type":"article","og_title":"How to loop through and add data in ECharts?","og_description":"Learn about how to loop through and add data in echarts?. Comprehensive guide with examples and best practices.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T10:43:55+00:00","article_modified_time":"2025-08-06T16:35:31+00:00","author":"Liam","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Liam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/"},"author":{"name":"Liam","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671"},"headline":"How to loop through and add data in ECharts?","datePublished":"2024-03-15T10:43:55+00:00","dateModified":"2025-08-06T16:35:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/"},"wordCount":114,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["Development","guide","programming","technology","tutorial"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/","name":"How to loop through and add data in ECharts? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T10:43:55+00:00","dateModified":"2025-08-06T16:35:31+00:00","description":"Learn about how to loop through and add data in echarts?. Comprehensive guide with examples and best practices.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-loop-through-and-add-data-in-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to loop through and add data in ECharts?"}]},{"@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\/23786905eb7b377f45ddb01c17da7671","name":"Liam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","caption":"Liam"},"sameAs":["http:\/\/Wilson"],"url":"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15200","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=15200"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15200\/revisions"}],"predecessor-version":[{"id":48656,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/15200\/revisions\/48656"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=15200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=15200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=15200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}