{"id":17675,"date":"2024-03-15T15:28:51","date_gmt":"2024-03-15T15:28:51","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/"},"modified":"2024-03-21T11:28:20","modified_gmt":"2024-03-21T11:28:20","slug":"how-to-encapsulate-echarts-in-react","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/","title":{"rendered":"How to encapsulate Echarts in React?"},"content":{"rendered":"

There are multiple methods to encapsulate Echarts in React, with one common way being:<\/p>\n

    \n
  1. First, install the Echarts library.<\/li>\n<\/ol>\n
    npm install echarts --save\r\n<\/code><\/pre>\n
      \n
    1. JavaScript module named EchartsComponent.js<\/li>\n<\/ol>\n
      import<\/span> React<\/span>, { useEffect, useRef } from<\/span> 'react'<\/span>;\r\nimport<\/span> echarts from<\/span> 'echarts'<\/span>;\r\n\r\nconst<\/span> EchartsComponent<\/span> = ({ options }<\/span>) => {\r\n  const<\/span> chartRef = useRef<\/span>(null<\/span>);\r\n\r\n  useEffect<\/span>(() =><\/span> {\r\n    const<\/span> chart = echarts.init<\/span>(chartRef.current<\/span>);\r\n    chart.setOption<\/span>(options);\r\n\r\n    return<\/span> () =><\/span> {\r\n      chart.dispose<\/span>();\r\n    };\r\n  }, [options]);\r\n\r\n  return<\/span> <div<\/span> ref<\/span>={chartRef}<\/span> style<\/span>={{<\/span> width:<\/span> '100<\/span>%', height:<\/span> '300px<\/span>' }} \/><\/span><\/span>;\r\n};\r\n\r\nexport<\/span> default<\/span> EchartsComponent<\/span>;\r\n<\/code><\/pre>\n
        \n
      1. An Echarts component<\/li>\n<\/ol>\n
        import<\/span> React<\/span> from<\/span> 'react'<\/span>;\r\nimport<\/span> EchartsComponent<\/span> from<\/span> '.\/EchartsComponent'<\/span>;\r\n\r\nconst<\/span> ParentComponent<\/span> = (<\/span>) => {\r\n  const<\/span> options = {\r\n    \/\/ Echarts\u914d\u7f6e\u9879<\/span>\r\n    \/\/ ...<\/span>\r\n  };\r\n\r\n  return<\/span> (\r\n    <div<\/span>><\/span>\r\n      <h1<\/span>><\/span>\u4f7f\u7528Echarts\u7684\u7236\u7ec4\u4ef6<\/h1<\/span>><\/span>\r\n      <EchartsComponent<\/span> options<\/span>={options}<\/span> \/><\/span>\r\n    <\/div<\/span>><\/span><\/span>\r\n  );\r\n};\r\n\r\nexport<\/span> default<\/span> ParentComponent<\/span>;\r\n<\/code><\/pre>\n
        In the example above, the EchartsComponent receives an options parameter to configure the chart options of Echarts. A DOM reference is created using useRef, and useEffect is used to initialize the Echarts instance and set the options when the component mounts and when the options change. The Echarts instance is cleaned up when the component unmounts using a function in the return statement.<\/p>\n
        In this way, we can encapsulate Echarts in React and render different charts by passing different options through the component’s props.<\/p>\n","protected":false},"excerpt":{"rendered":"
        There are multiple methods to encapsulate Echarts in React, with one common way being: First, install the Echarts library. npm install echarts –save JavaScript module named EchartsComponent.js import React, { useEffect, useRef } from ‘react’; import echarts from ‘echarts’; const EchartsComponent = ({ options }) => { const chartRef = useRef(null); useEffect(() => { const […]<\/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-17675","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to encapsulate Echarts in React? - 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-encapsulate-echarts-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to encapsulate Echarts in React?\" \/>\n<meta property=\"og:description\" content=\"There are multiple methods to encapsulate Echarts in React, with one common way being: First, install the Echarts library. npm install echarts --save JavaScript module named EchartsComponent.js import React, { useEffect, useRef } from 'react'; import echarts from 'echarts'; const EchartsComponent = ({ options }) => { const chartRef = useRef(null); useEffect(() => { const […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/\" \/>\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-15T15:28:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:28: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-encapsulate-echarts-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/\"},\"author\":{\"name\":\"Jackson Davis\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\"},\"headline\":\"How to encapsulate Echarts in React?\",\"datePublished\":\"2024-03-15T15:28:51+00:00\",\"dateModified\":\"2024-03-21T11:28:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/\"},\"wordCount\":118,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/\",\"name\":\"How to encapsulate Echarts in React? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:28:51+00:00\",\"dateModified\":\"2024-03-21T11:28:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to encapsulate Echarts in React?\"}]},{\"@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 encapsulate Echarts in React? - 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-encapsulate-echarts-in-react\/","og_locale":"en_US","og_type":"article","og_title":"How to encapsulate Echarts in React?","og_description":"There are multiple methods to encapsulate Echarts in React, with one common way being: First, install the Echarts library. npm install echarts --save JavaScript module named EchartsComponent.js import React, { useEffect, useRef } from 'react'; import echarts from 'echarts'; const EchartsComponent = ({ options }) => { const chartRef = useRef(null); useEffect(() => { const […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:28:51+00:00","article_modified_time":"2024-03-21T11:28: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-encapsulate-echarts-in-react\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/"},"author":{"name":"Jackson Davis","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350"},"headline":"How to encapsulate Echarts in React?","datePublished":"2024-03-15T15:28:51+00:00","dateModified":"2024-03-21T11:28:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/"},"wordCount":118,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/","name":"How to encapsulate Echarts in React? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:28:51+00:00","dateModified":"2024-03-21T11:28:20+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-echarts-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to encapsulate Echarts in React?"}]},{"@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\/17675","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=17675"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17675\/revisions"}],"predecessor-version":[{"id":51301,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17675\/revisions\/51301"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}