{"id":27734,"date":"2024-03-16T09:07:30","date_gmt":"2024-03-16T09:07:30","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/"},"modified":"2024-03-22T11:45:14","modified_gmt":"2024-03-22T11:45:14","slug":"how-to-achieve-asynchronous-data-fetching-in-echarts","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/","title":{"rendered":"How to achieve asynchronous data fetching in Echarts?"},"content":{"rendered":"

To achieve asynchronous data retrieval in ECharts, you can follow these steps:<\/p>\n

    \n
  1. Include the ECharts script file in an HTML document, for example:<\/li>\n<\/ol>\n
    <script<\/span> src<\/span>=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5.2.0\/dist\/echarts.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n<\/code><\/pre>\n
      \n
    1. Create a container for displaying charts, such as:<\/li>\n<\/ol>\n
      <div<\/span> id<\/span>=\"chartContainer\"<\/span> style<\/span>=\"width: 600px; height: 400px;\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/code><\/pre>\n
        \n
      1. In JavaScript files, use AJAX, Fetch, or other asynchronous request methods to retrieve data.<\/li>\n<\/ol>\n
        function<\/span> getData<\/span>(callback<\/span>) {\r\n  \/\/ \u53d1\u8d77\u5f02\u6b65\u8bf7\u6c42\u83b7\u53d6\u6570\u636e<\/span>\r\n  \/\/ \u4f8b\u5982\u4f7f\u7528 Fetch \u65b9\u6cd5\uff1a<\/span>\r\n  fetch<\/span>('data.json'<\/span>)\r\n    .then<\/span>(response<\/span> =><\/span> response.json<\/span>())\r\n    .then<\/span>(data<\/span> =><\/span> {\r\n      \/\/ \u8c03\u7528\u56de\u8c03\u51fd\u6570\u5c06\u83b7\u53d6\u7684\u6570\u636e\u4f20\u9012\u7ed9\u56fe\u8868\u6e32\u67d3\u51fd\u6570<\/span>\r\n      callback<\/span>(data);\r\n    });\r\n}\r\n<\/code><\/pre>\n
          \n
        1. After obtaining the data, use ECharts API to render the chart, for example:<\/li>\n<\/ol>\n
          \/\/ \u83b7\u53d6\u5bb9\u5668\u5143\u7d20<\/span>\r\nvar<\/span> chartContainer = document<\/span>.getElementById<\/span>('chartContainer'<\/span>);\r\n\r\n\/\/ \u521b\u5efa\u56fe\u8868\u5b9e\u4f8b<\/span>\r\nvar<\/span> chart = echarts.init<\/span>(chartContainer);\r\n\r\n\/\/ \u521b\u5efa\u56fe\u8868\u914d\u7f6e\u5bf9\u8c61<\/span>\r\nvar<\/span> option = {\r\n  \/\/ \u914d\u7f6e\u9879...<\/span>\r\n};\r\n\r\n\/\/ \u6e32\u67d3\u56fe\u8868<\/span>\r\nfunction<\/span> renderChart<\/span>(data<\/span>) {\r\n  \/\/ \u5728\u914d\u7f6e\u9879\u4e2d\u4f7f\u7528\u83b7\u53d6\u5230\u7684\u6570\u636e<\/span>\r\n  option.series<\/span>[0<\/span>].data<\/span> = data;\r\n\r\n  \/\/ \u4f7f\u7528\u521a\u6307\u5b9a\u7684\u914d\u7f6e\u9879\u548c\u6570\u636e\u663e\u793a\u56fe\u8868<\/span>\r\n  chart.setOption<\/span>(option);\r\n}\r\n\r\n\/\/ \u8c03\u7528\u83b7\u53d6\u6570\u636e\u7684\u51fd\u6570\uff0c\u5e76\u4f20\u9012\u6e32\u67d3\u56fe\u8868\u7684\u56de\u8c03\u51fd\u6570<\/span>\r\ngetData<\/span>(renderChart);\r\n<\/code><\/pre>\n
          Following these steps will allow you to achieve asynchronous data fetching and chart rendering in ECharts. Please modify the way the data is retrieved and the data processing logic according to the actual situation.<\/p>\n","protected":false},"excerpt":{"rendered":"
          To achieve asynchronous data retrieval in ECharts, you can follow these steps: Include the ECharts script file in an HTML document, for example: <script src=”https:\/\/cdn.jsdelivr.net\/npm\/echarts@5.2.0\/dist\/echarts.min.js”><\/script> Create a container for displaying charts, such as: <div id=”chartContainer” style=”width: 600px; height: 400px;”><\/div> In JavaScript files, use AJAX, Fetch, or other asynchronous request methods to retrieve data. function getData(callback) […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-27734","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to achieve asynchronous data fetching in Echarts? - Blog - Silicon Cloud<\/title>\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-asynchronous-data-fetching-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 achieve asynchronous data fetching in Echarts?\" \/>\n<meta property=\"og:description\" content=\"To achieve asynchronous data retrieval in ECharts, you can follow these steps: Include the ECharts script file in an HTML document, for example: <script src="https:\/\/cdn.jsdelivr.net\/npm\/echarts@5.2.0\/dist\/echarts.min.js"><\/script> Create a container for displaying charts, such as: <div id="chartContainer" style="width: 600px; height: 400px;"><\/div> In JavaScript files, use AJAX, Fetch, or other asynchronous request methods to retrieve data. function getData(callback) […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-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-16T09:07:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T11:45:14+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin Taylor\" \/>\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=\"Benjamin Taylor\" \/>\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-asynchronous-data-fetching-in-echarts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/\"},\"author\":{\"name\":\"Benjamin Taylor\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\"},\"headline\":\"How to achieve asynchronous data fetching in Echarts?\",\"datePublished\":\"2024-03-16T09:07:30+00:00\",\"dateModified\":\"2024-03-22T11:45:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/\"},\"wordCount\":100,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/\",\"name\":\"How to achieve asynchronous data fetching in Echarts? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T09:07:30+00:00\",\"dateModified\":\"2024-03-22T11:45:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to achieve asynchronous data fetching 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\/ac801fe9549a25960ce48aa2e0a691c9\",\"name\":\"Benjamin Taylor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"caption\":\"Benjamin Taylor\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to achieve asynchronous data fetching in Echarts? - Blog - Silicon Cloud","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-asynchronous-data-fetching-in-echarts\/","og_locale":"en_US","og_type":"article","og_title":"How to achieve asynchronous data fetching in Echarts?","og_description":"To achieve asynchronous data retrieval in ECharts, you can follow these steps: Include the ECharts script file in an HTML document, for example: <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5.2.0\/dist\/echarts.min.js\"><\/script> Create a container for displaying charts, such as: <div id=\"chartContainer\" style=\"width: 600px; height: 400px;\"><\/div> In JavaScript files, use AJAX, Fetch, or other asynchronous request methods to retrieve data. function getData(callback) […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T09:07:30+00:00","article_modified_time":"2024-03-22T11:45:14+00:00","author":"Benjamin Taylor","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Benjamin Taylor","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/"},"author":{"name":"Benjamin Taylor","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9"},"headline":"How to achieve asynchronous data fetching in Echarts?","datePublished":"2024-03-16T09:07:30+00:00","dateModified":"2024-03-22T11:45:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/"},"wordCount":100,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/","name":"How to achieve asynchronous data fetching in Echarts? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T09:07:30+00:00","dateModified":"2024-03-22T11:45:14+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-asynchronous-data-fetching-in-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to achieve asynchronous data fetching 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\/ac801fe9549a25960ce48aa2e0a691c9","name":"Benjamin Taylor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","caption":"Benjamin Taylor"},"url":"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27734","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=27734"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27734\/revisions"}],"predecessor-version":[{"id":61987,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27734\/revisions\/61987"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=27734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=27734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=27734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}