{"id":9839,"date":"2024-03-14T10:14:15","date_gmt":"2024-03-14T10:14:15","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/"},"modified":"2024-03-20T16:28:03","modified_gmt":"2024-03-20T16:28:03","slug":"how-to-get-backend-data-in-echarts","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/","title":{"rendered":"How to get backend data in Echarts?"},"content":{"rendered":"<p>When using ECharts to retrieve backend data, typically data is first fetched from the backend using Ajax requests and then passed to ECharts for rendering. Below is a basic example code:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u4f7f\u7528Ajax\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e<\/span>\r\n$.<span class=\"hljs-title function_\">ajax<\/span>({\r\n    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'your_backend_url'<\/span>,\r\n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'GET'<\/span>,\r\n    <span class=\"hljs-attr\">dataType<\/span>: <span class=\"hljs-string\">'json'<\/span>,\r\n    <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">data<\/span>) {\r\n        <span class=\"hljs-comment\">\/\/ \u6570\u636e\u83b7\u53d6\u6210\u529f\u540e\uff0c\u8fdb\u884cECharts\u7684\u521d\u59cb\u5316\u548c\u6e32\u67d3<\/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\">'main'<\/span>));\r\n        \r\n        <span class=\"hljs-keyword\">var<\/span> option = {\r\n            <span class=\"hljs-attr\">xAxis<\/span>: {\r\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'category'<\/span>,\r\n                <span class=\"hljs-attr\">data<\/span>: data.<span class=\"hljs-property\">xAxisData<\/span>\r\n            },\r\n            <span class=\"hljs-attr\">yAxis<\/span>: {\r\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'value'<\/span>\r\n            },\r\n            <span class=\"hljs-attr\">series<\/span>: [{\r\n                <span class=\"hljs-attr\">data<\/span>: data.<span class=\"hljs-property\">seriesData<\/span>,\r\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'bar'<\/span>\r\n            }]\r\n        };\r\n\r\n        myChart.<span class=\"hljs-title function_\">setOption<\/span>(option);\r\n    },\r\n    <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">error<\/span>) {\r\n        <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">\"Error: \"<\/span>, error);\r\n    }\r\n});\r\n<\/code><\/pre>\n<p>In the example above, we retrieve data from the backend through an Ajax request. After successfully obtaining the data, we initialize the chart using the echarts.init() method from ECharts, then set the data and configurations, and finally render it by calling the setOption() method. In practical applications, depending on the data structure returned from the backend and the type of chart to be displayed, we can adjust the configurations and data settings accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When using ECharts to retrieve backend data, typically data is first fetched from the backend using Ajax requests and then passed to ECharts for rendering. Below is a basic example code: \/\/ \u4f7f\u7528Ajax\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e $.ajax({ url: &#8216;your_backend_url&#8217;, type: &#8216;GET&#8217;, dataType: &#8216;json&#8217;, success: function (data) { \/\/ \u6570\u636e\u83b7\u53d6\u6210\u529f\u540e\uff0c\u8fdb\u884cECharts\u7684\u521d\u59cb\u5316\u548c\u6e32\u67d3 var myChart = echarts.init(document.getElementById(&#8216;main&#8217;)); var option = { xAxis: [&hellip;]<\/p>\n","protected":false},"author":5,"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-9839","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"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 get backend data 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-get-backend-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 get backend data in Echarts?\" \/>\n<meta property=\"og:description\" content=\"When using ECharts to retrieve backend data, typically data is first fetched from the backend using Ajax requests and then passed to ECharts for rendering. Below is a basic example code: \/\/ \u4f7f\u7528Ajax\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e $.ajax({ url: &#039;your_backend_url&#039;, type: &#039;GET&#039;, dataType: &#039;json&#039;, success: function (data) { \/\/ \u6570\u636e\u83b7\u53d6\u6210\u529f\u540e\uff0c\u8fdb\u884cECharts\u7684\u521d\u59cb\u5316\u548c\u6e32\u67d3 var myChart = echarts.init(document.getElementById(&#039;main&#039;)); var option = { xAxis: [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-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-14T10:14:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-20T16:28:03+00:00\" \/>\n<meta name=\"author\" content=\"Emily Johnson\" \/>\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=\"Emily Johnson\" \/>\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-get-backend-data-in-echarts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/\"},\"author\":{\"name\":\"Emily Johnson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\"},\"headline\":\"How to get backend data in Echarts?\",\"datePublished\":\"2024-03-14T10:14:15+00:00\",\"dateModified\":\"2024-03-20T16:28:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/\"},\"wordCount\":112,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/\",\"name\":\"How to get backend data in Echarts? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T10:14:15+00:00\",\"dateModified\":\"2024-03-20T16:28:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to get backend 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\/3b041b19cffc258705478ecfab895378\",\"name\":\"Emily Johnson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"caption\":\"Emily Johnson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to get backend data 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-get-backend-data-in-echarts\/","og_locale":"en_US","og_type":"article","og_title":"How to get backend data in Echarts?","og_description":"When using ECharts to retrieve backend data, typically data is first fetched from the backend using Ajax requests and then passed to ECharts for rendering. Below is a basic example code: \/\/ \u4f7f\u7528Ajax\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e $.ajax({ url: 'your_backend_url', type: 'GET', dataType: 'json', success: function (data) { \/\/ \u6570\u636e\u83b7\u53d6\u6210\u529f\u540e\uff0c\u8fdb\u884cECharts\u7684\u521d\u59cb\u5316\u548c\u6e32\u67d3 var myChart = echarts.init(document.getElementById('main')); var option = { xAxis: [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T10:14:15+00:00","article_modified_time":"2024-03-20T16:28:03+00:00","author":"Emily Johnson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Emily Johnson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/"},"author":{"name":"Emily Johnson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378"},"headline":"How to get backend data in Echarts?","datePublished":"2024-03-14T10:14:15+00:00","dateModified":"2024-03-20T16:28:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/"},"wordCount":112,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/","name":"How to get backend data in Echarts? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T10:14:15+00:00","dateModified":"2024-03-20T16:28:03+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-get-backend-data-in-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to get backend 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\/3b041b19cffc258705478ecfab895378","name":"Emily Johnson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","caption":"Emily Johnson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/9839","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=9839"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/9839\/revisions"}],"predecessor-version":[{"id":43035,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/9839\/revisions\/43035"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=9839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=9839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=9839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}