{"id":16103,"date":"2024-03-15T12:21:06","date_gmt":"2024-03-15T12:21:06","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/"},"modified":"2025-08-07T00:12:41","modified_gmt":"2025-08-07T00:12:41","slug":"how-to-achieve-click-list-linkage-pie-chart-in-echarts","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/","title":{"rendered":"How to achieve click list linkage pie chart in Echarts?"},"content":{"rendered":"<p>To achieve the linking between a list and a pie chart, you must first prepare the data for both the list and the pie chart. Next, using Echarts&#8217; event listening mechanism, retrieve the selected item&#8217;s data from the list&#8217;s click event, update the pie chart&#8217;s data, and finally, re-render the pie chart.<\/p>\n<p>Here is a simple example code:<\/p>\n<p>HTML section:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"list\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">data-value<\/span>=<span class=\"hljs-string\">\"30\"<\/span>&gt;<\/span>\u9009\u98791<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">data-value<\/span>=<span class=\"hljs-string\">\"50\"<\/span>&gt;<\/span>\u9009\u98792<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">data-value<\/span>=<span class=\"hljs-string\">\"20\"<\/span>&gt;<\/span>\u9009\u98793<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/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: 400px; height: 400px;\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>JavaScript section:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u521d\u59cb\u5316\u997c\u56fe\u7684\u6570\u636e<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> pieData = [\r\n  { <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'\u9009\u98791'<\/span> },\r\n  { <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">50<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'\u9009\u98792'<\/span> },\r\n  { <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">20<\/span>, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'\u9009\u98793'<\/span> }\r\n];\r\n\r\n<span class=\"hljs-comment\">\/\/ \u521d\u59cb\u5316\u997c\u56fe\u7684\u914d\u7f6e<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> pieOptions = {\r\n  <span class=\"hljs-attr\">series<\/span>: [\r\n    {\r\n      <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'pie'<\/span>,\r\n      <span class=\"hljs-attr\">data<\/span>: pieData\r\n    }\r\n  ]\r\n};\r\n\r\n<span class=\"hljs-comment\">\/\/ \u7ed1\u5b9a\u5217\u8868\u7684\u70b9\u51fb\u4e8b\u4ef6<\/span>\r\n<span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">'list'<\/span>).<span class=\"hljs-title function_\">addEventListener<\/span>(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">e<\/span>) {\r\n  <span class=\"hljs-keyword\">var<\/span> li = e.<span class=\"hljs-property\">target<\/span>;\r\n  <span class=\"hljs-keyword\">if<\/span> (li.<span class=\"hljs-property\">tagName<\/span> === <span class=\"hljs-string\">'LI'<\/span>) {\r\n    <span class=\"hljs-keyword\">var<\/span> value = li.<span class=\"hljs-title function_\">getAttribute<\/span>(<span class=\"hljs-string\">'data-value'<\/span>);\r\n    <span class=\"hljs-comment\">\/\/ \u66f4\u65b0\u997c\u56fe\u7684\u6570\u636e<\/span>\r\n    pieData = [\r\n      { <span class=\"hljs-attr\">value<\/span>: value, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'\u9009\u98791'<\/span> },\r\n      { <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">100<\/span> - value, <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'\u5176\u4ed6\u9009\u9879'<\/span> }\r\n    ];\r\n    <span class=\"hljs-comment\">\/\/ \u91cd\u65b0\u6e32\u67d3\u997c\u56fe<\/span>\r\n    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\">'chart'<\/span>)).<span class=\"hljs-title function_\">setOption<\/span>(pieOptions);\r\n  }\r\n});\r\n<\/code><\/pre>\n<p>In the code above, stores the corresponding value by adding a custom attribute data-value to each option in the list. In the click event of the list, gets the value of the clicked option, then updates the data in the pie chart according to that value, and finally, re-renders the pie chart.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To achieve the linking between a list and a pie chart, you must first prepare the data for both the list and the pie chart. Next, using Echarts&#8217; event listening mechanism, retrieve the selected item&#8217;s data from the list&#8217;s click event, update the pie chart&#8217;s data, and finally, re-render the pie chart. Here is a [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[453,1402,299,1404,1403],"class_list":["post-16103","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-development","tag-guide","tag-programming","tag-technology","tag-tutorial"],"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 achieve click list linkage pie chart in Echarts? - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn about how to achieve click list linkage pie chart in echarts?. Comprehensive guide with examples and best practices.\" \/>\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-click-list-linkage-pie-chart-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 click list linkage pie chart in Echarts?\" \/>\n<meta property=\"og:description\" content=\"Learn about how to achieve click list linkage pie chart in echarts?. Comprehensive guide with examples and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-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-15T12:21:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-07T00:12:41+00:00\" \/>\n<meta name=\"author\" content=\"Ava Mitchell\" \/>\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=\"Ava Mitchell\" \/>\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-click-list-linkage-pie-chart-in-echarts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/\"},\"author\":{\"name\":\"Ava Mitchell\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\"},\"headline\":\"How to achieve click list linkage pie chart in Echarts?\",\"datePublished\":\"2024-03-15T12:21:06+00:00\",\"dateModified\":\"2025-08-07T00:12:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/\"},\"wordCount\":127,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"Development\",\"guide\",\"programming\",\"technology\",\"tutorial\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/\",\"name\":\"How to achieve click list linkage pie chart in Echarts? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T12:21:06+00:00\",\"dateModified\":\"2025-08-07T00:12:41+00:00\",\"description\":\"Learn about how to achieve click list linkage pie chart in echarts?. Comprehensive guide with examples and best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to achieve click list linkage pie chart 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\/a3e2658c2cb9fb2be95ae0a8861f4a64\",\"name\":\"Ava Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"caption\":\"Ava Mitchell\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to achieve click list linkage pie chart in Echarts? - Blog - Silicon Cloud","description":"Learn about how to achieve click list linkage pie chart in echarts?. Comprehensive guide with examples and best practices.","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-click-list-linkage-pie-chart-in-echarts\/","og_locale":"en_US","og_type":"article","og_title":"How to achieve click list linkage pie chart in Echarts?","og_description":"Learn about how to achieve click list linkage pie chart in echarts?. Comprehensive guide with examples and best practices.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T12:21:06+00:00","article_modified_time":"2025-08-07T00:12:41+00:00","author":"Ava Mitchell","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Ava Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/"},"author":{"name":"Ava Mitchell","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64"},"headline":"How to achieve click list linkage pie chart in Echarts?","datePublished":"2024-03-15T12:21:06+00:00","dateModified":"2025-08-07T00:12:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/"},"wordCount":127,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["Development","guide","programming","technology","tutorial"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/","name":"How to achieve click list linkage pie chart in Echarts? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T12:21:06+00:00","dateModified":"2025-08-07T00:12:41+00:00","description":"Learn about how to achieve click list linkage pie chart in echarts?. Comprehensive guide with examples and best practices.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-click-list-linkage-pie-chart-in-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to achieve click list linkage pie chart 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\/a3e2658c2cb9fb2be95ae0a8861f4a64","name":"Ava Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","caption":"Ava Mitchell"},"url":"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/16103","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=16103"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/16103\/revisions"}],"predecessor-version":[{"id":49652,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/16103\/revisions\/49652"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=16103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=16103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=16103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}