{"id":16098,"date":"2024-03-15T12:20:49","date_gmt":"2024-03-15T12:20:49","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/"},"modified":"2025-08-07T00:10:21","modified_gmt":"2025-08-07T00:10:21","slug":"how-to-achieve-the-circular-addition-of-data-in-echarts-series","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/","title":{"rendered":"How to achieve the circular addition of data in echarts…"},"content":{"rendered":"

To achieve the looping addition of data to Echarts series, you can use the setOption method of Echarts to accomplish this. The specific steps are as follows:<\/p>\n

    \n
  1. Create an array variable to store the data to be added.<\/li>\n
  2. Use a for loop to iterate through the data to be added, and add the data to an array variable.<\/li>\n
  3. After the loop finishes, update the echarts configuration by using the setOption method to set the array variable as the data attribute value of the series.<\/li>\n<\/ol>\n

    Here is an example code:<\/p>\n

    \/\/ \u5b9a\u4e49\u4e00\u4e2a\u7a7a\u6570\u7ec4\uff0c\u7528\u6765\u5b58\u50a8\u8981\u6dfb\u52a0\u7684\u6570\u636e<\/span>\r\nvar<\/span> dataToAdd = [];\r\n\r\n\/\/ \u4f7f\u7528for\u5faa\u73af\u904d\u5386\u8981\u6dfb\u52a0\u7684\u6570\u636e\uff0c\u5c06\u6570\u636e\u6dfb\u52a0\u5230\u6570\u7ec4\u4e2d<\/span>\r\nfor<\/span> (var<\/span> i = 0<\/span>; i < 10<\/span>; i++) {\r\n  dataToAdd.push<\/span>(Math<\/span>.random<\/span>() * 100<\/span>);\r\n}\r\n\r\n\/\/ \u4f7f\u7528setOption\u65b9\u6cd5\u5c06\u6570\u7ec4\u4f5c\u4e3aseries\u7684data\u5c5e\u6027\u503c\uff0c\u66f4\u65b0echarts\u7684\u914d\u7f6e<\/span>\r\nmyChart.setOption<\/span>({\r\n  series<\/span>: [\r\n    {\r\n      name<\/span>: '\u7cfb\u5217\u540d'<\/span>,\r\n      type<\/span>: 'line'<\/span>,\r\n      data<\/span>: dataToAdd\r\n    }\r\n  ]\r\n});\r\n<\/code><\/pre>\n
    In this example, we use a for loop to generate 10 random numbers, then add these numbers to the dataToAdd array. Finally, we use the setOption method to set the array as the data property value for the series, updating the configuration of Echarts and achieving the addition of data in a loop.<\/p>\n","protected":false},"excerpt":{"rendered":"
    To achieve the looping addition of data to Echarts series, you can use the setOption method of Echarts to accomplish this. The specific steps are as follows: Create an array variable to store the data to be added. Use a for loop to iterate through the data to be added, and add the data to […]<\/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":[453,1402,299,1404,1403],"class_list":["post-16098","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-development","tag-guide","tag-programming","tag-technology","tag-tutorial"],"yoast_head":"\nHow to achieve the circular addition of data in echarts... - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn about how to achieve the circular addition of data in echarts series?. 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-achieve-the-circular-addition-of-data-in-echarts-series\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to achieve the circular addition of data in echarts...\" \/>\n<meta property=\"og:description\" content=\"Learn about how to achieve the circular addition of data in echarts series?. Comprehensive guide with examples and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/\" \/>\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-15T12:20:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-07T00:10:21+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-achieve-the-circular-addition-of-data-in-echarts-series\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"How to achieve the circular addition of data in echarts…\",\"datePublished\":\"2024-03-15T12:20:49+00:00\",\"dateModified\":\"2025-08-07T00:10:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/\"},\"wordCount\":151,\"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-achieve-the-circular-addition-of-data-in-echarts-series\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/\",\"name\":\"How to achieve the circular addition of data in echarts... - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T12:20:49+00:00\",\"dateModified\":\"2025-08-07T00:10:21+00:00\",\"description\":\"Learn about how to achieve the circular addition of data in echarts series?. Comprehensive guide with examples and best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to achieve the circular addition of 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\/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":"How to achieve the circular addition of data in echarts... - Blog - Silicon Cloud","description":"Learn about how to achieve the circular addition of data in echarts series?. 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-achieve-the-circular-addition-of-data-in-echarts-series\/","og_locale":"en_US","og_type":"article","og_title":"How to achieve the circular addition of data in echarts...","og_description":"Learn about how to achieve the circular addition of data in echarts series?. Comprehensive guide with examples and best practices.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T12:20:49+00:00","article_modified_time":"2025-08-07T00:10:21+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-achieve-the-circular-addition-of-data-in-echarts-series\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"How to achieve the circular addition of data in echarts…","datePublished":"2024-03-15T12:20:49+00:00","dateModified":"2025-08-07T00:10:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/"},"wordCount":151,"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-achieve-the-circular-addition-of-data-in-echarts-series\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/","name":"How to achieve the circular addition of data in echarts... - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T12:20:49+00:00","dateModified":"2025-08-07T00:10:21+00:00","description":"Learn about how to achieve the circular addition of data in echarts series?. Comprehensive guide with examples and best practices.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-the-circular-addition-of-data-in-echarts-series\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to achieve the circular addition of 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\/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\/16098","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=16098"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/16098\/revisions"}],"predecessor-version":[{"id":159274,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/16098\/revisions\/159274"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=16098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=16098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=16098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}