{"id":27749,"date":"2024-03-16T09:09:06","date_gmt":"2024-03-16T09:09:06","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/"},"modified":"2024-03-22T11:47:22","modified_gmt":"2024-03-22T11:47:22","slug":"how-to-dynamically-load-database-data-in-echarts","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/","title":{"rendered":"How to dynamically load database data in Echarts?"},"content":{"rendered":"

In order to dynamically load database data into echarts, you need to use a server-side scripting language (such as PHP, Python, etc.) to connect and manipulate the database, and then pass the data to echarts for dynamic loading.<\/p>\n

Here is an example code using PHP and MySQL database to dynamically load data into Echarts.<\/p>\n

    \n
  1. Firstly, import the Echarts library file and a DOM container in your HTML file.<\/li>\n<\/ol>\n
    <!DOCTYPE html<\/span>><\/span>\r\n<html<\/span>><\/span>\r\n<head<\/span>><\/span>\r\n  <title<\/span>><\/span>\u52a8\u6001\u52a0\u8f7d\u6570\u636e\u5230ECharts<\/title<\/span>><\/span>\r\n  <script<\/span> src<\/span>=\"https:\/\/cdn.staticfile.org\/echarts\/4.9.0\/echarts.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n<\/head<\/span>><\/span>\r\n<body<\/span>><\/span>\r\n  <div<\/span> id<\/span>=\"chart\"<\/span> style<\/span>=\"width: 600px; height: 400px;\"<\/span>><\/span><\/div<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
      \n
    1. Create a PHP file (e.g. data.php) to connect to the database and retrieve data.<\/li>\n<\/ol>\n
      <?php<\/span>\r\n\/\/ \u8fde\u63a5\u6570\u636e\u5e93<\/span>\r\n$servername<\/span> = \"localhost\"<\/span>;\r\n$username<\/span> = \"root\"<\/span>;\r\n$password<\/span> = \"password\"<\/span>;\r\n$dbname<\/span> = \"database_name\"<\/span>;\r\n\r\n$conn<\/span> = new<\/span> mysqli<\/span>($servername<\/span>, $username<\/span>, $password<\/span>, $dbname<\/span>);\r\n\r\n\/\/ \u68c0\u67e5\u8fde\u63a5\u662f\u5426\u6210\u529f<\/span>\r\nif<\/span> ($conn<\/span>->connect_error) {\r\n  die<\/span>(\"\u8fde\u63a5\u5931\u8d25: \"<\/span> . $conn<\/span>->connect_error);\r\n}\r\n\r\n\/\/ \u67e5\u8be2\u6570\u636e<\/span>\r\n$sql<\/span> = \"SELECT * FROM table_name\"<\/span>;\r\n$result<\/span> = $conn<\/span>->query<\/span>($sql<\/span>);\r\n\r\n\/\/ \u5c06\u6570\u636e\u8f6c\u6362\u4e3aJSON\u683c\u5f0f<\/span>\r\n$data<\/span> = array<\/span>();\r\nif<\/span> ($result<\/span>->num_rows > 0<\/span>) {\r\n  while<\/span>($row<\/span> = $result<\/span>->fetch_assoc<\/span>()) {\r\n    $data<\/span>[] = $row<\/span>;\r\n  }\r\n}\r\n\r\n\/\/ \u5173\u95ed\u8fde\u63a5<\/span>\r\n$conn<\/span>->close<\/span>();\r\n\r\n\/\/ \u5c06JSON\u6570\u636e\u8fd4\u56de\u7ed9\u524d\u7aef<\/span>\r\nheader<\/span>('Content-Type: application\/json'<\/span>);\r\necho<\/span> json_encode<\/span>($data<\/span>);\r\n?><\/span>\r\n<\/code><\/pre>\n
        \n
      1. Add a JavaScript script to your HTML file to use Echarts to load data.<\/li>\n<\/ol>\n
        <!DOCTYPE html<\/span>><\/span>\r\n<html<\/span>><\/span>\r\n<head<\/span>><\/span>\r\n  <title<\/span>><\/span>\u52a8\u6001\u52a0\u8f7d\u6570\u636e\u5230ECharts<\/title<\/span>><\/span>\r\n  <script<\/span> src<\/span>=\"https:\/\/cdn.staticfile.org\/echarts\/4.9.0\/echarts.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n<\/head<\/span>><\/span>\r\n<body<\/span>><\/span>\r\n  <div<\/span> id<\/span>=\"chart\"<\/span> style<\/span>=\"width: 600px; height: 400px;\"<\/span>><\/span><\/div<\/span>><\/span>\r\n\r\n  <script<\/span>><\/span>\r\n    \/\/ \u4f7f\u7528ajax\u8bf7\u6c42\u6570\u636e<\/span>\r\n    var<\/span> xhr = new<\/span> XMLHttpRequest<\/span>();\r\n    xhr.onreadystatechange<\/span> = function<\/span>(<\/span>) {\r\n      if<\/span> (xhr.readyState<\/span> === 4<\/span> && xhr.status<\/span> === 200<\/span>) {\r\n        var<\/span> data = JSON<\/span>.parse<\/span>(xhr.responseText<\/span>);\r\n        renderChart<\/span>(data);\r\n      }\r\n    };\r\n    xhr.open<\/span>('GET'<\/span>, 'data.php'<\/span>, true<\/span>);\r\n    xhr.send<\/span>();\r\n\r\n    \/\/ \u4f7f\u7528echarts\u6e32\u67d3\u56fe\u8868<\/span>\r\n    function<\/span> renderChart<\/span>(data<\/span>) {\r\n      var<\/span> chart = echarts.init<\/span>(document<\/span>.getElementById<\/span>('chart'<\/span>));\r\n\r\n      var<\/span> option = {\r\n        xAxis<\/span>: {\r\n          type<\/span>: 'category'<\/span>,\r\n          data<\/span>: data.map<\/span>(function<\/span>(item<\/span>) {\r\n            return<\/span> item.xAxis<\/span>;\r\n          })\r\n        },\r\n        yAxis<\/span>: {\r\n          type<\/span>: 'value'<\/span>\r\n        },\r\n        series<\/span>: [{\r\n          data<\/span>: data.map<\/span>(function<\/span>(item<\/span>) {\r\n            return<\/span> item.yAxis<\/span>;\r\n          }),\r\n          type<\/span>: 'line'<\/span>\r\n        }]\r\n      };\r\n\r\n      chart.setOption<\/span>(option);\r\n    }\r\n  <\/span><\/script<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
        The above example demonstrates connecting and querying a database using PHP and MySQL, then returning the query results to the frontend in JSON format. The frontend uses JavaScript to request the data via Ajax and render the charts using echarts. You will need to modify the database connection information and query statements in the code according to your actual situation.<\/p>\n","protected":false},"excerpt":{"rendered":"
        In order to dynamically load database data into echarts, you need to use a server-side scripting language (such as PHP, Python, etc.) to connect and manipulate the database, and then pass the data to echarts for dynamic loading. Here is an example code using PHP and MySQL database to dynamically load data into Echarts. Firstly, […]<\/p>\n","protected":false},"author":7,"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-27749","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to dynamically load database 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-dynamically-load-database-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 dynamically load database data in Echarts?\" \/>\n<meta property=\"og:description\" content=\"In order to dynamically load database data into echarts, you need to use a server-side scripting language (such as PHP, Python, etc.) to connect and manipulate the database, and then pass the data to echarts for dynamic loading. Here is an example code using PHP and MySQL database to dynamically load data into Echarts. Firstly, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-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-16T09:09:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T11:47:22+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=\"2 minutes\" \/>\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-dynamically-load-database-data-in-echarts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"How to dynamically load database data in Echarts?\",\"datePublished\":\"2024-03-16T09:09:06+00:00\",\"dateModified\":\"2024-03-22T11:47:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/\"},\"wordCount\":166,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/\",\"name\":\"How to dynamically load database data in Echarts? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T09:09:06+00:00\",\"dateModified\":\"2024-03-22T11:47:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to dynamically load database 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 dynamically load database 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-dynamically-load-database-data-in-echarts\/","og_locale":"en_US","og_type":"article","og_title":"How to dynamically load database data in Echarts?","og_description":"In order to dynamically load database data into echarts, you need to use a server-side scripting language (such as PHP, Python, etc.) to connect and manipulate the database, and then pass the data to echarts for dynamic loading. Here is an example code using PHP and MySQL database to dynamically load data into Echarts. Firstly, […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T09:09:06+00:00","article_modified_time":"2024-03-22T11:47:22+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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"How to dynamically load database data in Echarts?","datePublished":"2024-03-16T09:09:06+00:00","dateModified":"2024-03-22T11:47:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/"},"wordCount":166,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/","name":"How to dynamically load database data in Echarts? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T09:09:06+00:00","dateModified":"2024-03-22T11:47:22+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-dynamically-load-database-data-in-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to dynamically load database 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\/27749","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=27749"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27749\/revisions"}],"predecessor-version":[{"id":62003,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/27749\/revisions\/62003"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=27749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=27749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=27749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}