{"id":27728,"date":"2024-03-16T09:06:53","date_gmt":"2024-03-16T09:06:53","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/"},"modified":"2024-03-22T11:44:20","modified_gmt":"2024-03-22T11:44:20","slug":"how-to-read-json-data-with-echarts","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/","title":{"rendered":"How to read JSON data with echarts?"},"content":{"rendered":"<p>To read JSON data, you first need to load the JSON data into JavaScript. Then, use the methods provided by ECharts to bind the data to the chart.<\/p>\n<p>Here is a simple example demonstrating how to read JSON data and bind it to ECharts.<\/p>\n<ol>\n<li>Create an HTML file, include the ECharts library, and add a DOM element to display the chart.<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>ECharts JSON\u6570\u636e\u8bfb\u53d6\u793a\u4f8b<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/echarts@5.2.1\/dist\/echarts.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chart\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"width: 600px; height: 400px;\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"data.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"script.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<ol>\n<li>&#8211; The data file named data.js<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">var<\/span> jsonData = [\r\n    {<span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'\u5317\u4eac'<\/span>, <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">100<\/span>},\r\n    {<span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'\u4e0a\u6d77'<\/span>, <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">200<\/span>},\r\n    {<span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'\u5e7f\u5dde'<\/span>, <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">150<\/span>},\r\n    <span class=\"hljs-comment\">\/\/ ... \u5176\u4ed6\u6570\u636e<\/span>\r\n];\r\n<\/code><\/pre>\n<ol>\n<li>javascript file named script.js<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u83b7\u53d6DOM\u5143\u7d20<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> chartDom = <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\u56fe\u8868<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> myChart = echarts.<span class=\"hljs-title function_\">init<\/span>(chartDom);\r\n\r\n<span class=\"hljs-comment\">\/\/ \u56fe\u8868\u914d\u7f6e<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> option = {\r\n    <span class=\"hljs-comment\">\/\/ \u56fe\u8868\u7c7b\u578b<\/span>\r\n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'bar'<\/span>,\r\n    <span class=\"hljs-comment\">\/\/ \u6570\u636e<\/span>\r\n    <span class=\"hljs-attr\">data<\/span>: jsonData,\r\n    <span class=\"hljs-comment\">\/\/ \u5176\u4ed6\u914d\u7f6e\u9879...<\/span>\r\n};\r\n\r\n<span class=\"hljs-comment\">\/\/ \u5c06\u914d\u7f6e\u9879\u8bbe\u7f6e\u7ed9\u56fe\u8868<\/span>\r\nmyChart.<span class=\"hljs-title function_\">setOption<\/span>(option);\r\n<\/code><\/pre>\n<p>To run the HTML file, you should be able to see a chart generated from JSON data.<\/p>\n<p>This is just a simple example which you can modify and expand according to your needs. For more information on how to use ECharts and its API, please refer to the official documentation of ECharts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To read JSON data, you first need to load the JSON data into JavaScript. Then, use the methods provided by ECharts to bind the data to the chart. Here is a simple example demonstrating how to read JSON data and bind it to ECharts. Create an HTML file, include the ECharts library, and add a [&hellip;]<\/p>\n","protected":false},"author":10,"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-27728","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 read JSON data with 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-read-json-data-with-echarts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to read JSON data with echarts?\" \/>\n<meta property=\"og:description\" content=\"To read JSON data, you first need to load the JSON data into JavaScript. Then, use the methods provided by ECharts to bind the data to the chart. Here is a simple example demonstrating how to read JSON data and bind it to ECharts. Create an HTML file, include the ECharts library, and add a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-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:06:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T11:44:20+00:00\" \/>\n<meta name=\"author\" content=\"Jackson Davis\" \/>\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=\"Jackson Davis\" \/>\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-read-json-data-with-echarts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/\"},\"author\":{\"name\":\"Jackson Davis\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\"},\"headline\":\"How to read JSON data with echarts?\",\"datePublished\":\"2024-03-16T09:06:53+00:00\",\"dateModified\":\"2024-03-22T11:44:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/\"},\"wordCount\":132,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/\",\"name\":\"How to read JSON data with echarts? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T09:06:53+00:00\",\"dateModified\":\"2024-03-22T11:44:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to read JSON data with 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\/55a10b8b0457c35884c25677889ad350\",\"name\":\"Jackson Davis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"caption\":\"Jackson Davis\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to read JSON data with 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-read-json-data-with-echarts\/","og_locale":"en_US","og_type":"article","og_title":"How to read JSON data with echarts?","og_description":"To read JSON data, you first need to load the JSON data into JavaScript. Then, use the methods provided by ECharts to bind the data to the chart. Here is a simple example demonstrating how to read JSON data and bind it to ECharts. Create an HTML file, include the ECharts library, and add a [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T09:06:53+00:00","article_modified_time":"2024-03-22T11:44:20+00:00","author":"Jackson Davis","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Jackson Davis","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/"},"author":{"name":"Jackson Davis","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350"},"headline":"How to read JSON data with echarts?","datePublished":"2024-03-16T09:06:53+00:00","dateModified":"2024-03-22T11:44:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/"},"wordCount":132,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/","name":"How to read JSON data with echarts? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T09:06:53+00:00","dateModified":"2024-03-22T11:44:20+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-read-json-data-with-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to read JSON data with 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\/55a10b8b0457c35884c25677889ad350","name":"Jackson Davis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","caption":"Jackson Davis"},"url":"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27728","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\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=27728"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27728\/revisions"}],"predecessor-version":[{"id":61980,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27728\/revisions\/61980"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=27728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=27728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=27728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}