{"id":653,"date":"2024-10-17T04:13:12","date_gmt":"2024-10-17T04:13:12","guid":{"rendered":"https:\/\/www.go-chart.com\/tw\/?p=653"},"modified":"2024-10-17T04:15:14","modified_gmt":"2024-10-17T04:15:14","slug":"tutorial-creating-100-stacked-line-charts-with-echarts","status":"publish","type":"post","link":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/","title":{"rendered":"Tutorial: Creating 100% Stacked Line Charts with ECharts"},"content":{"rendered":"<h2>Overview<\/h2>\n<p>A <a href=\"https:\/\/online.visual-paradigm.com\/charts\/templates\/100-stacked-line-charts\/\"><strong>100% Stacked Line Chart<\/strong><\/a> is a great way to visualize relative proportions of different categories over time. Unlike standard line charts, which show absolute values, a 100% stacked line chart displays the percentage contribution of each category, making it easier to compare trends across multiple groups.<\/p>\n<p>A <strong>100% Stacked Line Chart<\/strong> is particularly useful in various scenarios where you want to visualize the relative proportions of different categories over a specific period. Here are some key situations when to use this type of chart:<\/p>\n<ol>\n<li><strong>Market Share Analysis<\/strong>:\n<ul>\n<li>To show how different brands or products compete in terms of market share over time. This allows for easy comparison of how each entity&#8217;s share changes relative to the total market.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Sales Distribution<\/strong>:\n<ul>\n<li>When analyzing the sales distribution of multiple products across different regions or time periods, helping stakeholders understand which products are gaining or losing traction.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Survey Results<\/strong>:\n<ul>\n<li>To display survey responses or preferences across different demographics or time frames, showing how opinions shift over time.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Resource Allocation<\/strong>:\n<ul>\n<li>In project management, to visualize how resources (time, budget, personnel) are allocated among different tasks or projects over a timeline.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Performance Metrics<\/strong>:\n<ul>\n<li>For tracking key performance indicators (KPIs) across various departments or teams, illustrating how each contributes to the overall performance.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Education and Training<\/strong>:\n<ul>\n<li>To present student performance across various subjects or courses over time, highlighting shifts in strengths and weaknesses.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Social Trends<\/strong>:\n<ul>\n<li>To visualize changes in social media engagement, public opinion, or other trends over time, providing insights into how different segments of the population are evolving.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>Benefits of Using a 100% Stacked Line Chart<\/h3>\n<ul>\n<li><strong>Relative Comparison<\/strong>: Easily compare the contributions of different categories without getting bogged down in absolute numbers.<\/li>\n<li><strong>Visual Clarity<\/strong>: Provides a clear visual representation of trends and changes, making it easier to communicate insights.<\/li>\n<li><strong>Focus on Proportions<\/strong>: Emphasizes how categories interact with one another, which is valuable for strategic decision-making.<\/li>\n<\/ul>\n<h2>Example Scenario<\/h2>\n<p>Let&#8217;s say we&#8217;re analyzing the market share of three smartphone brands (Brand A, Brand B, and Brand C) over five years (2019 to 2023). This will allow us to see how each brand&#8217;s market share changes over time, relative to the total market.<\/p>\n<h2>Key Concepts<\/h2>\n<ol>\n<li><strong>Data Representation<\/strong>: Each line will represent a brand&#8217;s market share as a percentage of the total market for each year.<\/li>\n<li><strong>Normalization<\/strong>: The total for each year will sum to 100%, allowing for easy comparison.<\/li>\n<li><strong>Visual Clarity<\/strong>: Using different colors for each brand helps distinguish the lines.<\/li>\n<\/ol>\n<h2>Sample Data<\/h2>\n<p>Here\u2019s the market share data for our example:<\/p>\n<table>\n<thead>\n<tr>\n<th>Year<\/th>\n<th>Brand A<\/th>\n<th>Brand B<\/th>\n<th>Brand C<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>2019<\/td>\n<td>40%<\/td>\n<td>35%<\/td>\n<td>25%<\/td>\n<\/tr>\n<tr>\n<td>2020<\/td>\n<td>30%<\/td>\n<td>40%<\/td>\n<td>30%<\/td>\n<\/tr>\n<tr>\n<td>2021<\/td>\n<td>25%<\/td>\n<td>30%<\/td>\n<td>45%<\/td>\n<\/tr>\n<tr>\n<td>2022<\/td>\n<td>35%<\/td>\n<td>25%<\/td>\n<td>40%<\/td>\n<\/tr>\n<tr>\n<td>2023<\/td>\n<td>45%<\/td>\n<td>30%<\/td>\n<td>25%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Visualize <strong>100% Stacked Line Chart with Visual Paradigm Online<\/strong><\/h2>\n<p id=\"UswoOuK\"><img fetchpriority=\"high\" decoding=\"async\" width=\"606\" height=\"416\" class=\"alignnone size-full wp-image-655 \" src=\"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png\" alt=\"\" srcset=\"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png 606w, https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8-300x206.png 300w\" sizes=\"(max-width: 606px) 100vw, 606px\" \/><\/p>\n<p>Use a 100% Stacked Line Chart when you want to convey how parts contribute to the whole over time, allowing for clear comparisons and insights across multiple categories or groups.<\/p>\n<h2>\ud83c\udf1f <strong>Unlock Your Creativity with Visual Paradigm Online!<\/strong> \ud83c\udf1f<\/h2>\n<p>Are you tired of clunky diagramming tools that limit your creativity? Say hello to <a href=\"http:\/\/online.visual-paradigm.com\"><strong>Visual Paradigm Online<\/strong><\/a>\u2014the ultimate solution for all your diagramming, charting, and creative visual design needs!<\/p>\n<h3>Why Choose Visual Paradigm Online?<\/h3>\n<ul>\n<li><strong>User-Friendly Interface<\/strong>: Create stunning visuals effortlessly with our intuitive drag-and-drop functionality. No design experience? No problem!<\/li>\n<li><strong>Diverse Diagramming Options<\/strong>: From UML and flowcharts to mind maps and org charts, our extensive library of templates and symbols has you covered.<\/li>\n<li><strong>Real-Time Collaboration<\/strong>: Work seamlessly with your team, no matter where they are. Share your designs and get instant feedback in real time.<\/li>\n<li><strong>Cloud-Based Flexibility<\/strong>: Access your projects anytime, anywhere. All you need is an internet connection to bring your ideas to life!<\/li>\n<li><strong>Creative Visual Design Tools<\/strong>: Enhance your diagrams with customizable colors, shapes, and styles. Make your visuals pop and convey your message effectively!<\/li>\n<\/ul>\n<h3>Perfect for Everyone!<\/h3>\n<p>Whether you\u2019re a student, business professional, or creative designer, Visual Paradigm Online is tailored to meet your needs. Transform your ideas into impactful visuals with ease!<\/p>\n<h3>Get Started Today!<\/h3>\n<p>Join thousands of satisfied users and elevate your diagramming game. Try Visual Paradigm Online for free and discover the power of visual communication!<\/p>\n<p>\ud83d\udc49 <strong><a href=\"https:\/\/www.visual-paradigm.com\" target=\"_blank\" rel=\"noopener\">Start Your Free Trial Now!<\/a><\/strong><\/p>\n<p>Unleash your creativity and make your ideas shine with Visual Paradigm Online! \ud83c\udf08\u2728<\/p>\n<div class=\"template-top-title\">\n<div class=\"top-title\">\n<h2>100% Stacked Line Charts Templates<\/h2>\n<\/div>\n<\/div>\n<div id=\"templates\" class=\"centered\">\n<div class=\"related-templates-masonry-wrapper\">\n<div class=\"infoart-templates-item\">\n<p><a href=\"https:\/\/online.visual-paradigm.com\/charts\/templates\/100-stacked-line-charts\/vegetable-oil-consumption-100%25-stacked-line-chart\/\"><img decoding=\"async\" class=\"related-templates-masonry-content lozad\" title=\"Vegetable Oil Consumption 100% Stacked Line Chart\" src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/79b03f0d-09f5-4b12-81d4-254af2ea5073\/100-stacked-line-charts-design\/vegetable-oil-consumption-100%25-stacked-line-chart.png?s=360\" alt=\"Vegetable Oil Consumption 100% Stacked Line Chart\" data-src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/79b03f0d-09f5-4b12-81d4-254af2ea5073\/100-stacked-line-charts-design\/vegetable-oil-consumption-100%25-stacked-line-chart.png?s=360\" data-loaded=\"true\" \/><\/a><\/p>\n<div class=\"template-caption-front\" title=\"Vegetable Oil Consumption 100% Stacked Line Chart\"><a href=\"https:\/\/online.visual-paradigm.com\/app\/diagrams\/#infoart:proj=0&amp;type=100StackedLineCharts&amp;gallery=\/repository\/79b03f0d-09f5-4b12-81d4-254af2ea5073.xml&amp;name=Vegetable%20Oil%20Consumption%20100%25%20Stacked%20Line%20Chart\" target=\"_blank\" rel=\"noopener\"><span class=\"caption-box\">Vegetable Oil Consumption 100% Stacked Line Chart<\/span><\/a><\/div>\n<div class=\"template-button-set\"><\/div>\n<\/div>\n<div class=\"infoart-templates-item\">\n<p><a href=\"https:\/\/online.visual-paradigm.com\/charts\/templates\/100-stacked-line-charts\/revenue-of-social-media-100%25-stacked-line-chart\/\"><img decoding=\"async\" class=\"related-templates-masonry-content lozad\" title=\"Revenue Of Social Media 100% Stacked Line Chart\" src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/81ed43b2-7a6e-4beb-852f-a396216e36b1\/100-stacked-line-charts-design\/revenue-of-social-media-100%25-stacked-line-chart.png?s=360\" alt=\"Revenue Of Social Media 100% Stacked Line Chart\" data-src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/81ed43b2-7a6e-4beb-852f-a396216e36b1\/100-stacked-line-charts-design\/revenue-of-social-media-100%25-stacked-line-chart.png?s=360\" data-loaded=\"true\" \/><\/a><\/p>\n<div class=\"template-caption-front\" title=\"Revenue Of Social Media 100% Stacked Line Chart\"><a href=\"https:\/\/online.visual-paradigm.com\/app\/diagrams\/#infoart:proj=0&amp;type=100StackedLineCharts&amp;gallery=\/repository\/81ed43b2-7a6e-4beb-852f-a396216e36b1.xml&amp;name=Revenue%20Of%20Social%20Media%20100%25%20Stacked%20Line%20Chart\" target=\"_blank\" rel=\"noopener\"><span class=\"caption-box\">Revenue Of Social Media 100% Stacked Line Chart<\/span><\/a><\/div>\n<div class=\"template-button-set\"><\/div>\n<\/div>\n<div class=\"infoart-templates-item\">\n<p><a href=\"https:\/\/online.visual-paradigm.com\/charts\/templates\/100-stacked-line-charts\/social-media-revenue-100%25-stacked-line-chart\/\"><img decoding=\"async\" class=\"related-templates-masonry-content lozad\" title=\"Social Media Revenue 100% Stacked Line Chart\" src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/56b57f8a-05b4-4ece-be26-dbd13ceaebf0\/100-stacked-line-charts-design\/social-media-revenue-100%25-stacked-line-chart.png?s=360\" alt=\"Social Media Revenue 100% Stacked Line Chart\" data-src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/56b57f8a-05b4-4ece-be26-dbd13ceaebf0\/100-stacked-line-charts-design\/social-media-revenue-100%25-stacked-line-chart.png?s=360\" data-loaded=\"true\" \/><\/a><\/p>\n<div class=\"template-caption-front\" title=\"Social Media Revenue 100% Stacked Line Chart\"><a href=\"https:\/\/online.visual-paradigm.com\/app\/diagrams\/#infoart:proj=0&amp;type=100StackedLineCharts&amp;gallery=\/repository\/56b57f8a-05b4-4ece-be26-dbd13ceaebf0.xml&amp;name=Social%20Media%20Revenue%20100%25%20Stacked%20Line%20Chart\" target=\"_blank\" rel=\"noopener\"><span class=\"caption-box\">Social Media Revenue 100% Stacked Line Chart<\/span><\/a><\/div>\n<div class=\"template-button-set\"><\/div>\n<\/div>\n<div class=\"infoart-templates-item\">\n<p><a href=\"https:\/\/online.visual-paradigm.com\/charts\/templates\/100-stacked-line-charts\/national-recycling-rate-100%25-stacked-line-chart\/\"><img decoding=\"async\" class=\"related-templates-masonry-content lozad\" title=\"National Recycling Rate 100% Stacked Line Chart\" src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/f97c3eb8-6a81-46fc-9fa2-f48d0fe72118\/100-stacked-line-charts-design\/national-recycling-rate-100%25-stacked-line-chart.png?s=360\" alt=\"National Recycling Rate 100% Stacked Line Chart\" data-src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/f97c3eb8-6a81-46fc-9fa2-f48d0fe72118\/100-stacked-line-charts-design\/national-recycling-rate-100%25-stacked-line-chart.png?s=360\" data-loaded=\"true\" \/><\/a><\/p>\n<div class=\"template-caption-front\" title=\"National Recycling Rate 100% Stacked Line Chart\"><a href=\"https:\/\/online.visual-paradigm.com\/app\/diagrams\/#infoart:proj=0&amp;type=100StackedLineCharts&amp;gallery=\/repository\/f97c3eb8-6a81-46fc-9fa2-f48d0fe72118.xml&amp;name=National%20Recycling%20Rate%20100%25%20Stacked%20Line%20Chart\" target=\"_blank\" rel=\"noopener\"><span class=\"caption-box\">National Recycling Rate 100% Stacked Line Chart<\/span><\/a><\/div>\n<div class=\"template-button-set\"><\/div>\n<\/div>\n<div class=\"infoart-templates-item\">\n<p><a href=\"https:\/\/online.visual-paradigm.com\/charts\/templates\/100-stacked-line-charts\/percentage-of-world-gdp-100%25-stacked-line-chart\/\"><img decoding=\"async\" class=\"related-templates-masonry-content lozad\" title=\"Percentage Of World GDP 100% Stacked Line Chart\" src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/e9c55278-e6b7-42cf-be12-f36bdc49de33\/100-stacked-line-charts-design\/percentage-of-world-gdp-100%25-stacked-line-chart.png?s=360\" alt=\"Percentage Of World GDP 100% Stacked Line Chart\" data-src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/e9c55278-e6b7-42cf-be12-f36bdc49de33\/100-stacked-line-charts-design\/percentage-of-world-gdp-100%25-stacked-line-chart.png?s=360\" data-loaded=\"true\" \/><\/a><\/p>\n<div class=\"template-caption-front\" title=\"Percentage Of World GDP 100% Stacked Line Chart\"><a href=\"https:\/\/online.visual-paradigm.com\/app\/diagrams\/#infoart:proj=0&amp;type=100StackedLineCharts&amp;gallery=\/repository\/e9c55278-e6b7-42cf-be12-f36bdc49de33.xml&amp;name=Percentage%20Of%20World%20GDP%20100%25%20Stacked%20Line%20Chart\" target=\"_blank\" rel=\"noopener\"><span class=\"caption-box\">Percentage Of World GDP 100% Stacked Line Chart<\/span><\/a><\/div>\n<div class=\"template-button-set\"><\/div>\n<\/div>\n<div class=\"infoart-templates-item\">\n<p><a href=\"https:\/\/online.visual-paradigm.com\/charts\/templates\/100-stacked-line-charts\/test-scores-of-students-100%25-stacked-line-chart\/\"><img decoding=\"async\" class=\"related-templates-masonry-content lozad\" title=\"Test Scores Of Students 100% Stacked Line Chart\" src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/132b7766-622f-4308-ab51-85710169a965\/100-stacked-line-charts-design\/test-scores-of-students-100%25-stacked-line-chart.png?s=360\" alt=\"Test Scores Of Students 100% Stacked Line Chart\" data-src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/132b7766-622f-4308-ab51-85710169a965\/100-stacked-line-charts-design\/test-scores-of-students-100%25-stacked-line-chart.png?s=360\" data-loaded=\"true\" \/><\/a><\/p>\n<div class=\"template-caption-front\" title=\"Test Scores Of Students 100% Stacked Line Chart\"><a href=\"https:\/\/online.visual-paradigm.com\/app\/diagrams\/#infoart:proj=0&amp;type=100StackedLineCharts&amp;gallery=\/repository\/132b7766-622f-4308-ab51-85710169a965.xml&amp;name=Test%20Scores%20Of%20Students%20100%25%20Stacked%20Line%20Chart\" target=\"_blank\" rel=\"noopener\"><span class=\"caption-box\">Test Scores Of Students 100% Stacked Line Chart<\/span><\/a><\/div>\n<div class=\"template-button-set\"><\/div>\n<\/div>\n<div class=\"infoart-templates-item\">\n<p><a href=\"https:\/\/online.visual-paradigm.com\/charts\/templates\/100-stacked-line-charts\/100%25-stacked-line-chart\/\"><img decoding=\"async\" class=\"related-templates-masonry-content lozad\" title=\"100% Stacked Line Chart\" src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/cc4be788-edeb-4384-8f21-981dc74fc222\/100-stacked-line-charts-design\/100%25-stacked-line-chart.png?s=360\" alt=\"100% Stacked Line Chart\" data-src=\"https:\/\/online.visual-paradigm.com\/repository\/images\/cc4be788-edeb-4384-8f21-981dc74fc222\/100-stacked-line-charts-design\/100%25-stacked-line-chart.png?s=360\" data-loaded=\"true\" \/><\/a><\/p>\n<div class=\"template-caption-front\" title=\"100% Stacked Line Chart\"><a href=\"https:\/\/online.visual-paradigm.com\/app\/diagrams\/#infoart:proj=0&amp;type=100StackedLineCharts&amp;gallery=\/repository\/cc4be788-edeb-4384-8f21-981dc74fc222.xml&amp;name=100%25%20Stacked%20Line%20Chart\" target=\"_blank\" rel=\"noopener\"><span class=\"caption-box\">100% Stacked Line Chart<\/span><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Overview A 100% Stacked Line Chart is a great way to visualize relative proportions of different categories over time. Unlike standard line charts, which show absolute values, a 100% stacked line chart displays the percentage contribution of each category, making it easier to compare trends across multiple groups. A 100% Stacked Line Chart is particularly useful in various scenarios where you want to visualize the relative proportions of different categories over a specific period. Here are some key situations when to use this type of chart: Market Share Analysis: To show how different brands or products compete in terms of market share over time. This allows for easy comparison of how each entity&#8217;s share changes relative to the total market. Sales Distribution: When analyzing the sales distribution of multiple products across different regions or time periods, helping stakeholders understand which products are gaining or losing traction. Survey Results: To display survey respon<\/p>\n","protected":false},"author":7,"featured_media":656,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"fifu_image_url":"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png","fifu_image_alt":"","footnotes":""},"categories":[26],"tags":[],"class_list":["post-653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chart"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: Creating 100% Stacked Line Charts with ECharts - Go Chart \u7e41\u9ad4\u4e2d\u6587<\/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.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/\" \/>\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Creating 100% Stacked Line Charts with ECharts - Go Chart \u7e41\u9ad4\u4e2d\u6587\" \/>\n<meta property=\"og:description\" content=\"Overview A 100% Stacked Line Chart is a great way to visualize relative proportions of different categories over time. Unlike standard line charts, which show absolute values, a 100% stacked line chart displays the percentage contribution of each category, making it easier to compare trends across multiple groups. A 100% Stacked Line Chart is particularly useful in various scenarios where you want to visualize the relative proportions of different categories over a specific period. Here are some key situations when to use this type of chart: Market Share Analysis: To show how different brands or products compete in terms of market share over time. This allows for easy comparison of how each entity&#8217;s share changes relative to the total market. Sales Distribution: When analyzing the sales distribution of multiple products across different regions or time periods, helping stakeholders understand which products are gaining or losing traction. Survey Results: To display survey respon\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/\" \/>\n<meta property=\"og:site_name\" content=\"Go Chart \u7e41\u9ad4\u4e2d\u6587\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-17T04:13:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-17T04:15:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005:\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 \u5206\u9418\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/\",\"url\":\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/\",\"name\":\"Tutorial: Creating 100% Stacked Line Charts with ECharts - Go Chart \u7e41\u9ad4\u4e2d\u6587\",\"isPartOf\":{\"@id\":\"https:\/\/www.go-chart.com\/tw\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png\",\"datePublished\":\"2024-10-17T04:13:12+00:00\",\"dateModified\":\"2024-10-17T04:15:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.go-chart.com\/tw\/#\/schema\/person\/1e9b2b56fdabb602f7bca1314c85ba85\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#primaryimage\",\"url\":\"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png\",\"contentUrl\":\"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png\",\"width\":\"606\",\"height\":\"416\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.go-chart.com\/tw\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: Creating 100% Stacked Line Charts with ECharts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.go-chart.com\/tw\/#website\",\"url\":\"https:\/\/www.go-chart.com\/tw\/\",\"name\":\"Go Chart \u7e41\u9ad4\u4e2d\u6587\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.go-chart.com\/tw\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.go-chart.com\/tw\/#\/schema\/person\/1e9b2b56fdabb602f7bca1314c85ba85\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/www.go-chart.com\/tw\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/48025789fc0776739935e63d9f629084?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/48025789fc0776739935e63d9f629084?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.go-chart.com\/tw\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Creating 100% Stacked Line Charts with ECharts - Go Chart \u7e41\u9ad4\u4e2d\u6587","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.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/","og_locale":"zh_TW","og_type":"article","og_title":"Tutorial: Creating 100% Stacked Line Charts with ECharts - Go Chart \u7e41\u9ad4\u4e2d\u6587","og_description":"Overview A 100% Stacked Line Chart is a great way to visualize relative proportions of different categories over time. Unlike standard line charts, which show absolute values, a 100% stacked line chart displays the percentage contribution of each category, making it easier to compare trends across multiple groups. A 100% Stacked Line Chart is particularly useful in various scenarios where you want to visualize the relative proportions of different categories over a specific period. Here are some key situations when to use this type of chart: Market Share Analysis: To show how different brands or products compete in terms of market share over time. This allows for easy comparison of how each entity&#8217;s share changes relative to the total market. Sales Distribution: When analyzing the sales distribution of multiple products across different regions or time periods, helping stakeholders understand which products are gaining or losing traction. Survey Results: To display survey respon","og_url":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/","og_site_name":"Go Chart \u7e41\u9ad4\u4e2d\u6587","article_published_time":"2024-10-17T04:13:12+00:00","article_modified_time":"2024-10-17T04:15:14+00:00","og_image":[{"url":"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png","type":"","width":"","height":""}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png","twitter_misc":{"\u4f5c\u8005:":"curtis","\u9810\u4f30\u95b1\u8b80\u6642\u9593":"6 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/","url":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/","name":"Tutorial: Creating 100% Stacked Line Charts with ECharts - Go Chart \u7e41\u9ad4\u4e2d\u6587","isPartOf":{"@id":"https:\/\/www.go-chart.com\/tw\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#primaryimage"},"image":{"@id":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png","datePublished":"2024-10-17T04:13:12+00:00","dateModified":"2024-10-17T04:15:14+00:00","author":{"@id":"https:\/\/www.go-chart.com\/tw\/#\/schema\/person\/1e9b2b56fdabb602f7bca1314c85ba85"},"breadcrumb":{"@id":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#primaryimage","url":"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png","contentUrl":"https:\/\/www.go-chart.com\/tw\/wp-content\/uploads\/sites\/2\/2024\/10\/img_67108eccd63c8.png","width":"606","height":"416"},{"@type":"BreadcrumbList","@id":"https:\/\/www.go-chart.com\/tw\/tutorial-creating-100-stacked-line-charts-with-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.go-chart.com\/tw\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Creating 100% Stacked Line Charts with ECharts"}]},{"@type":"WebSite","@id":"https:\/\/www.go-chart.com\/tw\/#website","url":"https:\/\/www.go-chart.com\/tw\/","name":"Go Chart \u7e41\u9ad4\u4e2d\u6587","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.go-chart.com\/tw\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"},{"@type":"Person","@id":"https:\/\/www.go-chart.com\/tw\/#\/schema\/person\/1e9b2b56fdabb602f7bca1314c85ba85","name":"curtis","image":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/www.go-chart.com\/tw\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/48025789fc0776739935e63d9f629084?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/48025789fc0776739935e63d9f629084?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.go-chart.com\/tw\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/posts\/653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/comments?post=653"}],"version-history":[{"count":3,"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/posts\/653\/revisions"}],"predecessor-version":[{"id":658,"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/posts\/653\/revisions\/658"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/media\/656"}],"wp:attachment":[{"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/media?parent=653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/categories?post=653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.go-chart.com\/tw\/wp-json\/wp\/v2\/tags?post=653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}