{"id":14286,"date":"2021-08-27T13:27:11","date_gmt":"2021-08-27T13:27:11","guid":{"rendered":"https:\/\/freehost.page\/?p=14286"},"modified":"2021-08-27T13:27:11","modified_gmt":"2021-08-27T13:27:11","slug":"bieu-do-tron-co-ban-echart","status":"publish","type":"post","link":"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/","title":{"rendered":"T\u1ea1o bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n \u2013 h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 3)"},"content":{"rendered":"\n<p>T\u00f4i v\u1eabn th\u01b0\u1eddng \u01b0u ti\u00ean <a href=\"https:\/\/kiencang.net\/hoc-echarts-qua-vi-du-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">bi\u1ec3u \u0111\u1ed3 c\u1ed9t<\/a> nhi\u1ec1u nh\u1ea5t, c\u01a1 m\u00e0 bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u0169ng hay khi m\u00e0 ch\u00fang ta ch\u1ec9 c\u00f3 v\u00e0i d\u1eef li\u1ec7u \u0111\u01b0a v\u00e0o ho\u1eb7c th\u00edch s\u1ef1 m\u1ec1m m\u1ea1i c\u1ee7a n\u00f3.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d64b76e1f\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d64b76e1f\"  type=\"checkbox\" id=\"item-6577d64b76e1f\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/#A_Bieu_do_tron_don_gian\" title=\"A. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u0111\u01a1n gi\u1ea3n\">A. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u0111\u01a1n gi\u1ea3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/#B_Bieu_do_tron_rong_giua_voi_chu_thich_duoc_nhan_manh\" title=\"B. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n r\u1ed7ng gi\u1eefa v\u1edbi ch\u00fa th\u00edch \u0111\u01b0\u1ee3c nh\u1ea5n m\u1ea1nh\">B. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n r\u1ed7ng gi\u1eefa v\u1edbi ch\u00fa th\u00edch \u0111\u01b0\u1ee3c nh\u1ea5n m\u1ea1nh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/#C_Bieu_do_tron_hinh_re_quat_voi_kich_co_item_thay_doi_theo_gia_tri\" title=\"C. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n h\u00ecnh r\u1ebb qu\u1ea1t v\u1edbi k\u00edch c\u1ee1 item thay \u0111\u1ed5i theo gi\u00e1 tr\u1ecb\">C. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n h\u00ecnh r\u1ebb qu\u1ea1t v\u1edbi k\u00edch c\u1ee1 item thay \u0111\u1ed5i theo gi\u00e1 tr\u1ecb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/#D_Bieu_do_tron_co_anh_nen_va_kem_hieu_ung_khi_click_vao_tung_phan\" title=\"D. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u00f3 \u1ea3nh n\u1ec1n v\u00e0 k\u00e8m hi\u1ec7u \u1ee9ng khi click v\u00e0o t\u1eebng ph\u1ea7n\">D. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u00f3 \u1ea3nh n\u1ec1n v\u00e0 k\u00e8m hi\u1ec7u \u1ee9ng khi click v\u00e0o t\u1eebng ph\u1ea7n<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_Bieu_do_tron_don_gian\"><\/span>A. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u0111\u01a1n gi\u1ea3n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"856\" height=\"684\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-co-ban.png\" alt=\"bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n\" class=\"wp-image-14287\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-co-ban.png 856w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-co-ban-300x240.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-co-ban-768x614.png 768w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/figure><\/div>\n\n\n\n<p>M\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    title: {\n        text: 'M\u1ed9t ng\u00e0y c\u1ee7a t\u00f4i',\n        subtext: 'n\u1ebfu t\u00f4i \u1edf nh\u00e0 m\u1ed9t m\u00ecnh',\n        left: 'center',\n               textStyle: {\n               fontSize: 20,\n               fontFamily: \"Arial\"\n               }        \n    },\n    tooltip: { \/\/ k\u00edch ho\u1ea1t hi\u1ec7u \u1ee9ng tool tip khi hover chu\u1ed9t\n        trigger: 'item'\n    },\n    legend: {\n        orient: 'vertical',\n        left: 'left',\n    },\n    series: &#91;\n        {\n            name: 'sinh ho\u1ea1t',\n            type: 'pie',\n            radius: '50%',\n            data: &#91;\n                {value: 1048, name: 'luy\u1ec7n code'},\n                {value: 735, name: 'ngh\u0129 v\u1ea9n v\u01a1'},\n                {value: 580, name: 'l\u1ea1c v\u00e0o FB v\u00e0 Youtube'},\n                {value: 484, name: 'xem phim'},\n                {value: 300, name: 'nghe nh\u1ea1c'}\n            ],\n            emphasis: {\n                itemStyle: {\n                    shadowBlur: 10,\n                    shadowOffsetX: 0,\n                    shadowColor: 'rgba(0, 0, 0, 1)'\n                }\n            }\n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>M\u1ed9t s\u1ed1 c\u00e2u l\u1ec7nh m\u1edbi m\u00e0 ch\u00fang ta th\u1ea5y:<\/p>\n\n\n\n<ul><li><code>left: 'center'<\/code> d\u00f9ng \u0111\u1ec3 c\u0103n gi\u1eefa;<\/li><li><code>orient: 'vertical'<\/code> b\u00ecnh th\u01b0\u1eddng c\u00e1i <code>legend<\/code> s\u1ebd x\u1ebfp t\u1eeb tr\u00e1i qua ph\u1ea3i, \u0111\u1ec3 nh\u01b0 th\u1ebf n\u00e0y n\u00f3 s\u1ebd x\u1ebfp theo tr\u1ee5c \u0111\u1ee9ng;<\/li><li><code>type: 'pie'<\/code>: d\u00f9ng \u0111\u1ec3 ch\u1ec9 bi\u1ec3u \u0111\u1ed3 tr\u00f2n;<\/li><li><code>radius: '50%'<\/code> \u0111\u00f9ng \u0111\u1ec3 ch\u1ec9 k\u00edch c\u1ee1 t\u01b0\u01a1ng \u0111\u1ed1i;<\/li><li>ph\u1ea7n cu\u1ed1i ch\u1ed7 <code>emphasis<\/code> d\u00f9ng \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng blur khi hover v\u00e0o item, n\u00f3 c\u00f3 c\u00e1c ch\u1ecdn l\u1ef1a v\u1ec1 m\u1ee9c \u0111\u1ed9 loang c\u1ee7a m\u00e0u, \u0111\u1ed9 l\u1ec7ch v\u00e0 m\u00e0u blur;<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"B_Bieu_do_tron_rong_giua_voi_chu_thich_duoc_nhan_manh\"><\/span>B. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n r\u1ed7ng gi\u1eefa v\u1edbi ch\u00fa th\u00edch \u0111\u01b0\u1ee3c nh\u1ea5n m\u1ea1nh<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"662\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-rong-giua.png\" alt=\"bi\u1ec3u \u0111\u1ed3 tr\u00f2n r\u1ed7ng gi\u1eefa\" class=\"wp-image-14288\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-rong-giua.png 629w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-rong-giua-285x300.png 285w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/figure><\/div>\n\n\n\n<p>M\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    tooltip: {  \/\/ k\u00edch ho\u1ea1t tool tip\n        trigger: 'item'\n    },\n    legend: {  \/\/ c\u0103n l\u1ec1 v\u1ecb tr\u00ed cho legend\n        top: '5%', \/\/ l\u1ec1 tr\u00ean 5%\n        left: 'center' \/\/ c\u0103n gi\u1eefa, anh ch\u1ecb em bi\u1ebft CSS ch\u1eafc kh\u00f4ng l\u1ea1\n    },\n    series: &#91;\n        {\n            name: 'Ngu\u1ed3n truy c\u1eadp website', \/\/ nh\u00e3n d\u00e1n d\u1eef li\u1ec7u\n            type: 'pie', \/\/ ki\u1ec3u tr\u00f2n\n            radius: &#91;'40%', '70%'], \/\/ k\u00edch c\u1ee1 t\u01b0\u01a1ng \u0111\u1ed1i, gi\u00e1 tr\u1ecb \u0111\u1ea7u l\u00e0 h\u00ecnh tr\u00f2n nh\u1ecf, gi\u00e1 tr\u1ecb sau l\u00e0 h\u00ecnh tr\u00f2n l\u1edbn\n            avoidLabelOverlap: false,\n            itemStyle: { \/\/ t\u00f9y ch\u1ec9nh item\n                borderRadius: 10, \/\/ m\u1ee9c bo tr\u00f2n c\u1ee7a item\n                borderColor: '#fff', \/\/ m\u00e0u c\u1ee7a item\n                borderWidth: 3, \/\/ \u0111\u1ed9 r\u1ed9ng c\u1ee7a vi\u1ec1n\n            },\n            label: {\n                show: false,\n                position: 'center' \/\/ nh\u00e3n s\u1ebd xu\u1ea5t hi\u1ec7n \u1edf gi\u1eefa h\u00ecnh tr\u00f2n\n            },\n            emphasis: {\n                label: {\n                    show: true,\n                    fontSize: '30', \/\/ quy \u0111\u1ecbnh k\u00edch c\u1ee1 font ch\u1eef\n                    fontWeight: 'bold', \/\/ b\u00f4i \u0111\u1eadm ch\u1eef\n                    fontFamily: \"Arial\", \/\/ ch\u1ecdn lo\u1ea1i font hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c ti\u1ebfng Vi\u1ec7t                    \n                }\n            },\n            labelLine: {\n                show: false, \/\/ \u0111\u1ec3 ch\u00fa th\u00edch kh\u00f4ng \u1edf d\u1ea1ng m\u1eb7c \u0111\u1ecbnh n\u1eefa (\u1edf b\u00ean ngo\u00e0i \u0111\u01b0\u1eddng tr\u00f2n v\u00e0 c\u00f3 m\u1ed9t \u0111\u01b0\u1eddng n\u1ed1i \u0111\u1ebfn)\n            },\n            data: &#91; \/\/ d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o\n                {value: 1048, name: 'Qua t\u00ecm ki\u1ebfm'},\n                {value: 735, name: 'Qua m\u1ea1ng x\u00e3 h\u1ed9i'},\n                {value: 580, name: 'Tr\u1ea3 ti\u1ec1n'},\n                {value: 484, name: 'Gi\u1edbi thi\u1ec7u'},\n                {value: 300, name: 'Tr\u1ef1c ti\u1ebfp'}\n            ],\n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>C\u00e1c gi\u1ea3i th\u00edch \u00fd ngh\u0129a t\u00f4i \u0111\u1ec3 ngay trong m\u00e3.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"C_Bieu_do_tron_hinh_re_quat_voi_kich_co_item_thay_doi_theo_gia_tri\"><\/span>C. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n h\u00ecnh r\u1ebb qu\u1ea1t v\u1edbi k\u00edch c\u1ee1 item thay \u0111\u1ed5i theo gi\u00e1 tr\u1ecb<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"877\" height=\"771\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-re-quat.png\" alt=\"bi\u1ec3u \u0111\u1ed3 tr\u00f2n h\u00ecnh r\u1ebb qu\u1ea1t\" class=\"wp-image-14290\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-re-quat.png 877w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-re-quat-300x264.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-re-quat-768x675.png 768w\" sizes=\"(max-width: 877px) 100vw, 877px\" \/><\/figure><\/div>\n\n\n\n<p>M\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    legend: {\n        top: 'bottom', \/\/ t\u1ee9c l\u00e0 \u0111\u1ec3 olegend \u1edf cu\u1ed1i bi\u1ec3u \u0111\u1ed3\n    },\n    toolbox: { \/\/ hi\u1ec3n th\u1ecb ti\u1ec7n \u00edch g\u00f3c ngo\u00e0i, ph\u00eda tr\u00ean, b\u00ean ph\u1ea3i\n        show: true,\n        feature: {\n            mark: {show: true},\n            dataView: {show: true, readOnly: false}, \/\/ hi\u1ec3n th\u1ecb data\n            restore: {show: true},\n            saveAsImage: {show: true} \/\/ cho ph\u00e9p t\u1ea3i bi\u1ec3u \u0111\u1ed3 d\u1ea1ng \u1ea3nh\n        }\n    },\n        tooltip: { \/\/ k\u00edch ho\u1ea1t hi\u1ec7u \u1ee9ng tool tip khi hover chu\u1ed9t\n        trigger: 'item'\n    },\n    series: &#91;\n        {\n            name: 'Theo khu v\u1ef1c', \/\/ nh\u00e3n d\u00e1n c\u1ee7a d\u1eef li\u1ec7u\n            type: 'pie', \/\/ ki\u1ec3u tr\u00f2n\n            radius: &#91;5, 250], \/\/ x\u00e1c \u0111\u1ecbnh k\u00edch c\u1ee1 v\u00f2ng tr\u00f2n nh\u1ecf v\u00e0 l\u1edbn, gi\u00e1 tr\u1ecb tuy\u1ec7t \u0111\u1ed1i\n            center: &#91;'50%', '50%'], \/\/ c\u0103n v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i\n            roseType: 'area', \/\/ hi\u1ec7u \u1ee9ng to nh\u1ecf t\u00f9y theo \u0111\u1ed9 l\u1edbn c\u1ee7a item\n            itemStyle: {\n                borderRadius: 5 \/\/ m\u1ee9c \u0111\u1ed9 cong c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n\n            },\n            data: &#91; \/\/ d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o\n                {value: 40, name: 'rose 1'},\n                {value: 38, name: 'rose 2'},\n                {value: 32, name: 'rose 3'},\n                {value: 30, name: 'rose 4'},\n                {value: 28, name: 'rose 5'},\n            ],\n            \n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>C\u00e1c ch\u00fa th\u00edch c\u0169ng \u0111\u01b0\u1ee3c t\u00f4i \u0111\u1ec3 trong m\u00e3 m\u1eabu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"D_Bieu_do_tron_co_anh_nen_va_kem_hieu_ung_khi_click_vao_tung_phan\"><\/span>D. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u00f3 \u1ea3nh n\u1ec1n v\u00e0 k\u00e8m hi\u1ec7u \u1ee9ng khi click v\u00e0o t\u1eebng ph\u1ea7n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"923\" height=\"735\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-anh-nen.png\" alt=\"bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u00f3 h\u00ecnh n\u1ec1n\" class=\"wp-image-14294\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-anh-nen.png 923w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-anh-nen-300x239.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-anh-nen-768x612.png 768w\" sizes=\"(max-width: 923px) 100vw, 923px\" \/><\/figure><\/div>\n\n\n\n<p>M\u00e3 m\u1eabu (b\u1ea1n truy c\u1eadp link n\u00e0y \u0111\u1ec3 <a href=\"https:\/\/echarts.apache.org\/examples\/en\/editor.html?c=pie-pattern\" target=\"_blank\" rel=\"noreferrer noopener\">l\u1ea5y m\u00e3 \u1ea3nh base 64 c\u1ee7a n\u00f3 \u0111\u1eb7t \u1edf ngay \u0111\u1ea7u<\/a> \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c h\u00ecnh nh\u01b0 tr\u00ean, ho\u1eb7c s\u1eed d\u1ee5ng m\u00e3 b\u00ean d\u01b0\u1edbi v\u1edbi h\u00ecnh n\u1ec1n \u0111\u01a1n gi\u1ea3n h\u01a1n v\u00e0 m\u00e3 c\u0169ng nh\u1eb9 h\u01a1n):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var piePatternSrc = 'data:image\/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8\/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5QgbDRUvqYnz0AAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w\/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa\/AAAABnRFWHRUaXRsZQCo7tInAAAC90lEQVQ4jW2TT2hcVRjFf\/fd++bNZCYzyXTGmZSkGmiopcVSTamFgpTqQqtoN1L\/QDctBcFNVxXX4krdSDfiwoVKCy6CEBfFUoMuqihE0ymNwTqZSTuZzP8\/b97c9+ZdF7aS2n5wVt\/5zseBczDG8H8cBHUFZr+D\/KP22yGMMWyfn\/aJN\/NH599P7D84Gwz7gS4Xl2u\/\/vJV66a+MnPqyLGY132mduNmMSiMPj3cNt0HBJamxbGp55++Onf2XbxOGeM2sC1Jv9qjdbfSe2z3VCKWjOOt3GB54ftv3Z\/1SbX9u8xEzkwfOsLW0gJ+eQ0iUYS0cXKPkz98PNG\/dZ1e6Q7RZJr0VP6VdnJ9\/wMCRjrCu32bQaUIlsGIARZD\/OoybqkMYYjx+oRjMcKRIYwyoQCu7RXx9AynJ3bteLK+XsBvewgjMTYIEaKccXCrCEsglEJol2ajFwYjNtSiEJGdLyYv7Xnt1AlmpmnfLTIobaK3GoztnEQ3t+j+voo0KYRUYIWEvqbT6H39cs2sqViW+cyeQye0nWBwfQmhbMYns8i985j2BvFsHm+jRqOwRahSjFkhpU6jONj0LwAo4ijd6NH98Sq+NwApQRSxnBUwIGMOxh3htjXScqnQu1Xu6JfONU0ZQFyeIJ6fy\/6Rm0zOjiyDpcS\/Xi2BkJJQSurFCvWiy0gMW2EYns1HuCOSrD27YqrCGMPibuv1VDR9CWWDLZDSQlgCS0n00GOzUsdOjZM\/sE+Pyn+2nWCYbTU6P1AIj\/8XpIUn7A9TJnpBG0UgDLZSCDlC21pHUyqSyMSJ7chi+l2U8dn8q6bLv3mT1v0MvPq3\/149cD8IAo2jAX9Iq9\/5xJL+WzEnROge3dIq\/XaVoNnE84JrqzB4qAtf7hKnEyJy3g2DL94ojT4G+GZGfJQet88PlYWDodPT690OL7xdM6uPbNhzEL8n7ACJHIx9Nm1fXDyQM5fnkoXPMzx1n\/vQMSDuIQZMABkgBUQvTnH0nSi57fx\/AEUEqDlNzSKCAAAAAElFTkSuQmCC';\nvar bgPatternSrc = 'data:image\/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO8t8G7HgAGpwJaiAT7DQAAAABJRU5ErkJggg==';\nvar piePatternImg = new Image();\npiePatternImg.src = piePatternSrc; \/\/ \u0111\u01b0a \u1ea3nh n\u1ec1n v\u00e0o h\u00ecnh tr\u00f2n\nvar bgPatternImg = new Image();\nbgPatternImg.src = bgPatternSrc; \/\/ \u0111\u01b0a \u1ea3nh n\u1ec1n v\u00e0o bg\n\nvar itemStyle = {\n    normal: {\n        opacity: 0.69, \/\/ ch\u1ec9 m\u1ee9c \u0111\u1ed9 trong su\u1ed1t c\u1ee7a \u1ea3nh n\u1ec1n\n        color: {\n            image: piePatternImg,\n            repeat: 'repeat'\n        },\n        borderWidth: 3, \/\/ ch\u1ecdn k\u00edch c\u1ee1 c\u1ee7a \u0111\u01b0\u1eddng vi\u1ec1n\n        borderColor: '#135894' \/\/ ch\u1ecdn m\u00e0u cho \u0111\u01b0\u1eddng vi\u1ec1n\n    }\n};\noption = {\n    backgroundColor: {\n        image: bgPatternImg,\n        repeat: 'repeat'\n    },\n    title: {\n        text: 'Bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u1ea3nh n\u1ec1n',\n        textStyle: {\n            color: '#335894', \/\/ m\u00e0u v\u0103n b\u1ea3n\n            fontFamily: 'arial', \/\/ ch\u1ecdn font ch\u1eef\n        }\n    },\n    tooltip: {},\n    series: &#91;{\n        name: 'pie',\n        type: 'pie',\n        selectedMode: 'single', \/\/ t\u1ea1o hi\u1ec7u \u1ee9ng khi click v\u00e0o th\u00ec n\u00f3 t\u00e1ch ra kh\u1ecfi h\u00ecnh tr\u00f2n\n        selectedOffset: 30, \/\/ quy \u0111\u1ecbnh \u0111\u1ed9 l\u1edbn v\u1ec1 m\u1ee9c \u0111\u1ed9 t\u00e1ch\n        clockwise: true,\n        label: {\n            fontSize: 28, \/\/ l\u1ef1a ch\u1ecdn k\u00edch c\u1ee1 cho nh\u00e3n\n            color: '#235894' \/\/ l\u1ef1a ch\u1ecdn m\u00e0u s\u1eafc cho nh\u00e3n\n        },\n        labelLine: {\n            lineStyle: {\n                color: '#235894' \/\/ ch\u1ecdn m\u00e0u s\u1eafc cho \u0111\u01b0\u1eddng n\u1ed1i \u0111\u1ebfn ch\u00fa th\u00edch\n            }\n        },\n        data: &#91;\n            {value: 1048, name: 'AAA'}, \/\/ c\u00e1i \u0111\u01b0\u1ee3c \u0111\u1eb7t \u0111\u1ea7u ti\u00ean s\u1ebd xu\u1ea5t hi\u1ec7n \u1edf g\u00f3c tr\u00ean b\u00ean tay ph\u1ea3i\n            {value: 735, name: 'BBB'}, \/\/ r\u1ed3i c\u1ee9 th\u1ec3 theo chi\u1ec1u kim \u0111\u1ed3ng h\u1ed3\n            {value: 580, name: 'CCC'}, \/\/ \u0111\u1ebfn c\u00e1i th\u1ee9 ba r\u1ed3i th\u1ee9 t\u01b0, v\u00e2n v\u00e2n\n            {value: 484, name: 'DDD'},\n            {value: 300, name: 'EEE'}\n        ],\n        itemStyle: itemStyle\n    }]\n};<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch n\u1eb1m trong m\u00e3.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00f4i v\u1eabn th\u01b0\u1eddng \u01b0u ti\u00ean bi\u1ec3u \u0111\u1ed3 c\u1ed9t nhi\u1ec1u nh\u1ea5t, c\u01a1 m\u00e0 bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u0169ng hay khi m\u00e0 ch\u00fang ta ch\u1ec9 c\u00f3 v\u00e0i d\u1eef li\u1ec7u \u0111\u01b0a v\u00e0o ho\u1eb7c th\u00edch s\u1ef1 m\u1ec1m m\u1ea1i c\u1ee7a n\u00f3. A. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u0111\u01a1n gi\u1ea3n M\u00e3 m\u1eabu: M\u1ed9t s\u1ed1 c\u00e2u l\u1ec7nh m\u1edbi m\u00e0 ch\u00fang ta th\u1ea5y: left: &#8216;center&#8217; d\u00f9ng &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[236],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>T\u1ea1o bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n \u2013 h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng<\/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:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1ea1o bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n \u2013 h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"T\u00f4i v\u1eabn th\u01b0\u1eddng \u01b0u ti\u00ean bi\u1ec3u \u0111\u1ed3 c\u1ed9t nhi\u1ec1u nh\u1ea5t, c\u01a1 m\u00e0 bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u0169ng hay khi m\u00e0 ch\u00fang ta ch\u1ec9 c\u00f3 v\u00e0i d\u1eef li\u1ec7u \u0111\u01b0a v\u00e0o ho\u1eb7c th\u00edch s\u1ef1 m\u1ec1m m\u1ea1i c\u1ee7a n\u00f3. A. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u0111\u01a1n gi\u1ea3n M\u00e3 m\u1eabu: M\u1ed9t s\u1ed1 c\u00e2u l\u1ec7nh m\u1edbi m\u00e0 ch\u00fang ta th\u1ea5y: left: &#039;center&#039; d\u00f9ng &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-27T13:27:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-co-ban.png\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u1ea1o bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n \u2013 h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng","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:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1ea1o bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n \u2013 h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng","og_description":"T\u00f4i v\u1eabn th\u01b0\u1eddng \u01b0u ti\u00ean bi\u1ec3u \u0111\u1ed3 c\u1ed9t nhi\u1ec1u nh\u1ea5t, c\u01a1 m\u00e0 bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u0169ng hay khi m\u00e0 ch\u00fang ta ch\u1ec9 c\u00f3 v\u00e0i d\u1eef li\u1ec7u \u0111\u01b0a v\u00e0o ho\u1eb7c th\u00edch s\u1ef1 m\u1ec1m m\u1ea1i c\u1ee7a n\u00f3. A. Bi\u1ec3u \u0111\u1ed3 tr\u00f2n \u0111\u01a1n gi\u1ea3n M\u00e3 m\u1eabu: M\u1ed9t s\u1ed1 c\u00e2u l\u1ec7nh m\u1edbi m\u00e0 ch\u00fang ta th\u1ea5y: left: 'center' d\u00f9ng &hellip;","og_url":"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-08-27T13:27:11+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-tron-co-ban.png"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"6 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/","url":"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/","name":"T\u1ea1o bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n \u2013 h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 3) &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-08-27T13:27:11+00:00","dateModified":"2021-08-27T13:27:11+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u1ea1o bi\u1ec3u \u0111\u1ed3 tr\u00f2n c\u01a1 b\u1ea3n \u2013 h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 3)"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14286"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=14286"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14286\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}