{"id":14211,"date":"2021-08-26T15:59:05","date_gmt":"2021-08-26T15:59:05","guid":{"rendered":"https:\/\/freehost.page\/?p=14211"},"modified":"2021-08-26T15:59:05","modified_gmt":"2021-08-26T15:59:05","slug":"bang-bieu-echarts","status":"publish","type":"post","link":"https:\/\/kiencang.net\/bang-bieu-echarts\/","title":{"rendered":"L\u00e0m b\u1ea3ng bi\u1ec3u th\u1ed1ng k\u00ea \u0111\u1eb9p h\u01a1n tr\u00ean web v\u1edbi th\u01b0 vi\u1ec7n JS ECharts"},"content":{"rendered":"\n<p>\u0110\u00e2y l\u00e0 <a href=\"https:\/\/echarts.apache.org\/en\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">th\u01b0 vi\u1ec7n JS c\u1ee7a Baidu<\/a> gi\u00fap ch\u00fang ta t\u1ea1o c\u00e1c b\u1ea3ng bi\u1ec3u \u0111\u1eb9p v\u00e0 r\u1ea5t sinh \u0111\u1ed9ng tr\u00ean web. \u0110\u1ee1 ph\u1ea3i l\u00e0m b\u1ea3ng tr\u00ean Excel r\u1ed3i ch\u1ee5p \u1ea3nh l\u1ea1i. M\u1ed9t \u0111i\u1ec1u r\u1ea5t quan tr\u1ecdng kh\u00e1c l\u00e0 c\u00e1c b\u1ea3ng bi\u1ec3u nh\u01b0 th\u1ebf n\u00e0y gi\u00fap ch\u00fang ta xu\u1ea5t ra \u0111\u01b0\u1ee3c c\u00e1c b\u1ea3ng \u0111\u1ed9ng t\u00f9y v\u00e0o d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o ng\u01b0\u1eddi d\u00f9ng nh\u1eadp, \u0111i\u1ec1u m\u00e0 \u1ea3nh c\u1ed1 \u0111\u1ecbnh kh\u00f4ng th\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c.<\/p>\n\n\n\n<p>\u0110\u1ea7u ti\u00ean trong th\u1ebb <code>&lt;head&gt;<\/code> c\u1ee7a HTML b\u1ea1n \u0111\u01b0a file JS c\u1ee7a ECharts v\u00e0o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;head&gt;\n        &lt;title&gt;TODO supply a title&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/echarts\/5.1.2\/echarts.min.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>C\u00f3 2 l\u1ef1a ch\u1ecdn. M\u1ed9t l\u00e0 file JS \u0111\u00f3 l\u01b0u tr\u00ean host c\u1ee7a b\u1ea1n, hai l\u00e0 b\u1ea1n d\u00f9ng CDN. V\u00ed d\u1ee5 tr\u00ean t\u00f4i d\u00f9ng \u0111\u01b0\u1eddng link CDN \u0111\u01b0\u1ee3c Cloudflare l\u01b0u s\u1eb5n tr\u00ean host c\u1ee7a h\u1ecd, \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 gi\u00fap t\u1ed1c \u0111\u1ed9 t\u1ea3i nhanh h\u01a1n v\u00e0 ch\u1eafc ch\u1eafn ti\u1ebft ki\u1ec7m b\u0103ng th\u00f4ng cho b\u1ea1n.<\/p>\n\n\n\n<p>Ti\u1ebfp theo trong th\u1ebb <code>&lt;body&gt;<\/code>, ch\u00fang ta t\u1ea1o m\u1ed9t <code>div<\/code> c\u00f3 id l\u00e0 main, c\u00f3 th\u00f4ng s\u1ed1 chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao cho n\u00f3 (b\u1ea1n d\u0129 nhi\u00ean c\u0169ng c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh th\u00f4ng s\u1ed1 n\u00e0y qua file CSS ngo\u00e0i ho\u1eb7c qua CSS \u0111\u1eb7t trong th\u1ebb head):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;    \n      &lt;div id=\"main\" style=\"width:600px; height:550px;\"&gt;&lt;\/div&gt;\n\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p>Div n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb bi\u1ec3u \u0111\u1ed3 c\u1ee7a ch\u00fang ta.<\/p>\n\n\n\n<p>Gi\u1edd l\u00e0 ph\u1ea7n quan tr\u1ecdng nh\u1ea5t, vi\u1ebft c\u00e1c \u0111o\u1ea1n m\u00e3 JS \u0111\u1ec3 t\u1ea1o ra b\u1ea3ng bi\u1ec3u. L\u00fac \u0111\u1ea7u b\u1ea1n c\u00f3 th\u1ec3 v\u00e0o m\u1eabu c\u1ee7a ECharts v\u00e0 copy m\u00e3 m\u1eabu v\u1ec1 \u0111\u1ec3 xem, c\u00f3 r\u1ea5t nhi\u1ec1u m\u1eabu \u0111\u1eb9p \u1edf \u0111\u00e2y: <a href=\"https:\/\/echarts.apache.org\/examples\/en\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">echarts.apache.org\/examples\/en\/index.html<\/a><\/p>\n\n\n\n<p>B\u1ea1n ch\u1ecdn m\u1eabu mu\u1ed1n th\u1eed r\u1ed3i click v\u00e0o Full code. Copy to\u00e0n b\u1ed9 m\u00e3 \u0111\u00f3 r\u1ed3i \u0111\u01b0a v\u00e0o trong th\u1ebb <code>&lt;script&gt;<\/code> v\u00e0 ngay b\u00ean d\u01b0\u1edbi div c\u00f3 id main \u1edf tr\u00ean.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"main\" style=\"width:600px; height:550px;\"&gt;&lt;\/div&gt;\n\n     &lt;script type=\"text\/javascript\"&gt;\n\n                    var chartDom = document.getElementById('main');\n                    var myChart = echarts.init(chartDom);\n                    var option;\n\n                    option = {\n                        dataset: {\n                            source: &#91;\n                                &#91;'score', 'amount', 'product'],\n                                &#91;89.3, 58212, 'Matcha Latte'],\n                                &#91;57.1, 78254, 'Milk Tea'],\n                                &#91;74.4, 41032, 'Cheese Cocoa'],\n                                &#91;50.1, 12755, 'Cheese Brownie'],\n                                &#91;89.7, 20145, 'Matcha Cocoa'],\n                                &#91;68.1, 79146, 'Tea'],\n                                &#91;19.6, 91852, 'Orange Juice'],\n                                &#91;10.6, 101852, 'Lemon Juice'],\n                                &#91;32.7, 20112, 'Walnut Brownie']\n                            ]\n                        },\n                        grid: {containLabel: true},\n                        xAxis: {name: 'amount'},\n                        yAxis: {type: 'category'},\n                        visualMap: {\n                            orient: 'horizontal',\n                            left: 'center',\n                            min: 10,\n                            max: 100,\n                            text: &#91;'High Score', 'Low Score'],\n                            \/\/ Map the score column to color\n                            dimension: 0,\n                            inRange: {\n                                color: &#91;'#65B581', '#FFCE34', '#FD665F']\n                            }\n                        },\n                        series: &#91;\n                            {\n                                type: 'bar',\n                                encode: {\n                                    \/\/ Map the \"amount\" column to X axis.\n                                    x: 'amount',\n                                    \/\/ Map the \"product\" column to Y axis\n                                    y: 'product'\n                                }\n                            }\n                        ]\n                    };\n\n                    option &amp;&amp; myChart.setOption(option);\n       \n    &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>N\u1ebfu th\u1ea5y m\u00e3 ch\u01b0a ch\u1ea1y th\u00ec b\u1ea1n b\u1ecf d\u00f2ng <code>import * as echarts from 'echarts';<\/code> \u0111i \u1edf ngay tr\u00ean \u0111\u1ea7u trong m\u00e3 m\u1eabu l\u00e0 OK.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u1ea5y t\u00f9y ch\u1ecdn c\u01a1 b\u1ea3n<\/h2>\n\n\n\n<p><strong>1. B\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 \u0111\u1ed5i t\u00ean id c\u1ee7a div sang t\u00ean kh\u00e1c, v\u00ed d\u1ee5 bieudo2<\/strong><\/p>\n\n\n\n<p>Khi \u0111\u00f3 b\u1ea1n c\u0169ng ph\u1ea3i \u0111\u1ed5i t\u00ean \u1edf ph\u1ea7n n\u00e0y theo d\u1ea1ng t\u01b0\u01a1ng \u1ee9ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var chartDom = document.getElementById('bieudo2');<\/code><\/pre>\n\n\n\n<p><strong>2. \u0110\u1ec3 c\u00f3 b\u1ea3ng responsive, t\u1ee9c l\u00e0 co gi\u00e3n tr\u00ean nhi\u1ec1u m\u00e0n h\u00ecnh c\u00f3 chi\u1ec1u r\u1ed9ng kh\u00e1c nhau b\u1ea1n c\u1ea7n l\u00e0m hai \u0111i\u1ec1u sau<\/strong><\/p>\n\n\n\n<ul><li>\u1ede ch\u1ed7 <code>width<\/code>, thay v\u00ec \u0111\u1ec3 c\u1ed1 \u0111\u1ecbnh chi\u1ec1u r\u1ed9ng b\u1ea1n chuy\u1ec3n sang d\u1ea1ng <code>%<\/code>, v\u00ed d\u1ee5:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"bieudo2\" style=\"width:90%; height:550px; \"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<ul><li>Ti\u1ebfp \u0111\u1ebfn ngay tr\u00ean ph\u1ea7n <code>option &amp;&amp; myChart.setOption(option);<\/code> b\u1ea1n th\u00eam d\u00f2ng sau:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>window.addEventListener('resize',function(){\nmyChart.resize();}) <\/code><\/pre>\n\n\n\n<p><strong>3. T\u00f9y ch\u1ecdn v\u1ec1 font ch\u1eef v\u00e0 k\u00edch c\u1ee1 ch\u1eef<\/strong><\/p>\n\n\n\n<p>C\u00e1c bi\u1ec3u \u0111\u1ed3 m\u1eabu c\u1ee7a EChart c\u00f3 th\u1ec3 kh\u00f4ng hi\u1ec3n th\u1ecb ti\u1ebfng Vi\u1ec7t t\u1ed1t (m\u1ed9t s\u1ed1 d\u1ea5u nh\u01b0 \u1ed3, \u1ee9, \u1ec1, v\u00e2n v\u00e2n kh\u00f4ng hi\u1ec3n th\u1ecb \u1ed5n). Khi \u0111\u00f3 b\u1ea1n c\u1ea7n ch\u1ee7 \u0111\u1ed9ng l\u1ef1a ch\u1ecdn font ph\u00f9 h\u1ee3p.<\/p>\n\n\n\n<p><a href=\"https:\/\/echarts.apache.org\/en\/option.html#title\" target=\"_blank\" rel=\"noreferrer noopener\"> C\u00e1c t\u00f9y ch\u1ecdn c\u1ee7a EChart chi ti\u1ebft<\/a> b\u1ea1n tham kh\u1ea3o t\u1eeb t\u00e0i li\u1ec7u ch\u00ednh th\u1ee9c c\u1ee7a h\u1ecd \u1edf \u0111\u00e2y. <\/p>\n\n\n\n<p>Trong m\u1ee5c n\u00e0y t\u00f4i ch\u1ec9 n\u00f3i v\u1ec1 m\u1ed9t t\u00f9y ch\u1ecdn r\u1ea5t nh\u1ecf th\u00f4i. V\u00ed d\u1ee5 m\u00e3 m\u1eabu c\u1ee7a t\u00f4i th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var chartDom = document.getElementById('main');\n         var myChart = echarts.init(chartDom);\n                    var option;\n\n                    option = {\n                        title: {\n                            text: 'Ti\u00eau \u0111\u1ec1 c\u1ee7a bi\u1ec3u \u0111\u1ed3',\n                            subtext: 'ph\u1ee5 \u0111\u1ec1 c\u1ee7a bi\u1ec3u \u0111\u1ed3',\n                        },\n                        tooltip: {\n                            trigger: 'axis',\n                            axisPointer: {\n                                type: 'shadow'\n                            }\n                        },\n                        legend: {\n                            data: &#91;'2011', '2012']\n                        },\n                        grid: {\n                            left: '3%',\n                            right: '4%',\n                            bottom: '3%',\n                            containLabel: true\n                        },\n                        xAxis: {\n                            type: 'value',\n                            boundaryGap: &#91;0, 0.01]\n                        },\n                        yAxis: {\n                            type: 'category',\n                            data: &#91;'A', 'B', 'C', 'D', 'E', 'F']\n                        },\n                        series: &#91;\n                            {\n                                name: '2011',\n                                type: 'bar',\n                                data: &#91;18203, 23489, 29034, 104970, 131744, 630230]\n                            },\n                            {\n                                name: '2012',\n                                type: 'bar',\n                                data: &#91;19325, 23438, 31000, 121594, 134141, 681807]\n                            }\n                        ]\n                    };\n                \n           window.addEventListener('resize',function(){\n           myChart.resize();})        \n                \nmyChart.setOption(option);<\/code><\/pre>\n\n\n\n<p>\u0110\u1ec3 hi\u1ec3n th\u1ecb font kh\u00f4ng l\u1ed7i ch\u00fang ta b\u1ed5 sung \u0111o\u1ea1n d\u01b0\u1edbi \u0111\u00e2y v\u00e0o ngay sau ph\u1ea7n subtext:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>textStyle: {\n            fontSize: 30,\n            fontFamily: \"Arial\"\n}<\/code><\/pre>\n\n\n\n<p>K\u1ebft h\u1ee3p th\u00ec n\u00f3 tr\u00f4ng nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>title: {\n           text: 'Ti\u00eau \u0111\u1ec1 c\u1ee7a bi\u1ec3u \u0111\u1ed3',\n           subtext: 'ph\u1ee5 \u0111\u1ec1 c\u1ee7a bi\u1ec3u \u0111\u1ed3',\n               textStyle: {\n               fontSize: 30,\n               fontFamily: \"Arial\"\n               }\n       },<\/code><\/pre>\n\n\n\n<p>Full \u0111o\u1ea1n m\u00e3 v\u1eeba \u0111\u00e1p \u1ee9ng di \u0111\u1ed9ng, v\u1eeba t\u00f9y ch\u1ec9nh font theo \u00fd th\u00edch:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;V\u00ed d\u1ee5 v\u1ec1 Echarts&lt;\/title&gt;\n        &lt;meta charset=\"UTF-8\"&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n        &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/echarts\/5.1.2\/echarts.min.js\"&gt;&lt;\/script&gt;\n        &lt;style&gt;\n            #main{\n                    height:550px;\n                    width:80%;\n                  }\n        &lt;\/style&gt;    \n    &lt;\/head&gt;\n\n     &lt;body&gt;\n    &lt;!-- preparing a DOM with width and height for ECharts --&gt;    \n    &lt;div id=\"main\"&gt;&lt;\/div&gt;\n\n        &lt;script type=\"text\/javascript\"&gt;\n                    var chartDom = document.getElementById('main');\n                    var myChart = echarts.init(chartDom);\n                    var option;\n\n                    option = {\n                        title: {\n                            text: 'Ti\u00eau \u0111\u1ec1 c\u1ee7a bi\u1ec3u \u0111\u1ed3',\n                            subtext: 'ph\u1ee5 \u0111\u1ec1 c\u1ee7a bi\u1ec3u \u0111\u1ed3',\n                                textStyle: {\n                                fontSize: 30,\n                                fontFamily: \"Arial\"\n                              }\n                        },\n                        tooltip: {\n                            trigger: 'axis',\n                            axisPointer: {\n                                type: 'shadow'\n                            }\n                        },\n                        legend: {\n                            data: &#91;'2011', '2012']\n                        },\n                        grid: {\n                            left: '3%',\n                            right: '4%',\n                            bottom: '3%',\n                            containLabel: true\n                        },\n                        xAxis: {\n                            type: 'value',\n                            boundaryGap: &#91;0, 0.01]\n                        },\n                        yAxis: {\n                            type: 'category',\n                            data: &#91;'A', 'B', 'C', 'D', 'E', 'F']\n                        },\n                        series: &#91;\n                            {\n                                name: '2011',\n                                type: 'bar',\n                                data: &#91;18203, 23489, 29034, 104970, 131744, 630230]\n                            },\n                            {\n                                name: '2012',\n                                type: 'bar',\n                                data: &#91;19325, 23438, 31000, 121594, 134141, 681807]\n                            }\n                        ]\n                    };\n                \n                            window.addEventListener('resize',function(){\n                            myChart.resize();})        \n                \n        myChart.setOption(option);\n       \n    &lt;\/script&gt;\n\n    &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u0110\u00e2y l\u00e0 th\u01b0 vi\u1ec7n JS c\u1ee7a Baidu gi\u00fap ch\u00fang ta t\u1ea1o c\u00e1c b\u1ea3ng bi\u1ec3u \u0111\u1eb9p v\u00e0 r\u1ea5t sinh \u0111\u1ed9ng tr\u00ean web. \u0110\u1ee1 ph\u1ea3i l\u00e0m b\u1ea3ng tr\u00ean Excel r\u1ed3i ch\u1ee5p \u1ea3nh l\u1ea1i. M\u1ed9t \u0111i\u1ec1u r\u1ea5t quan tr\u1ecdng kh\u00e1c l\u00e0 c\u00e1c b\u1ea3ng bi\u1ec3u nh\u01b0 th\u1ebf n\u00e0y gi\u00fap ch\u00fang ta xu\u1ea5t ra \u0111\u01b0\u1ee3c c\u00e1c b\u1ea3ng \u0111\u1ed9ng t\u00f9y v\u00e0o &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>L\u00e0m b\u1ea3ng bi\u1ec3u th\u1ed1ng k\u00ea \u0111\u1eb9p h\u01a1n tr\u00ean web v\u1edbi th\u01b0 vi\u1ec7n JS ECharts &#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\/bang-bieu-echarts\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"L\u00e0m b\u1ea3ng bi\u1ec3u th\u1ed1ng k\u00ea \u0111\u1eb9p h\u01a1n tr\u00ean web v\u1edbi th\u01b0 vi\u1ec7n JS ECharts &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"\u0110\u00e2y l\u00e0 th\u01b0 vi\u1ec7n JS c\u1ee7a Baidu gi\u00fap ch\u00fang ta t\u1ea1o c\u00e1c b\u1ea3ng bi\u1ec3u \u0111\u1eb9p v\u00e0 r\u1ea5t sinh \u0111\u1ed9ng tr\u00ean web. \u0110\u1ee1 ph\u1ea3i l\u00e0m b\u1ea3ng tr\u00ean Excel r\u1ed3i ch\u1ee5p \u1ea3nh l\u1ea1i. M\u1ed9t \u0111i\u1ec1u r\u1ea5t quan tr\u1ecdng kh\u00e1c l\u00e0 c\u00e1c b\u1ea3ng bi\u1ec3u nh\u01b0 th\u1ebf n\u00e0y gi\u00fap ch\u00fang ta xu\u1ea5t ra \u0111\u01b0\u1ee3c c\u00e1c b\u1ea3ng \u0111\u1ed9ng t\u00f9y v\u00e0o &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/bang-bieu-echarts\/\" \/>\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-26T15:59:05+00:00\" \/>\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=\"5 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"L\u00e0m b\u1ea3ng bi\u1ec3u th\u1ed1ng k\u00ea \u0111\u1eb9p h\u01a1n tr\u00ean web v\u1edbi th\u01b0 vi\u1ec7n JS ECharts &#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\/bang-bieu-echarts\/","og_locale":"vi_VN","og_type":"article","og_title":"L\u00e0m b\u1ea3ng bi\u1ec3u th\u1ed1ng k\u00ea \u0111\u1eb9p h\u01a1n tr\u00ean web v\u1edbi th\u01b0 vi\u1ec7n JS ECharts &#8226; Ki\u1ebfn c\u00e0ng","og_description":"\u0110\u00e2y l\u00e0 th\u01b0 vi\u1ec7n JS c\u1ee7a Baidu gi\u00fap ch\u00fang ta t\u1ea1o c\u00e1c b\u1ea3ng bi\u1ec3u \u0111\u1eb9p v\u00e0 r\u1ea5t sinh \u0111\u1ed9ng tr\u00ean web. \u0110\u1ee1 ph\u1ea3i l\u00e0m b\u1ea3ng tr\u00ean Excel r\u1ed3i ch\u1ee5p \u1ea3nh l\u1ea1i. M\u1ed9t \u0111i\u1ec1u r\u1ea5t quan tr\u1ecdng kh\u00e1c l\u00e0 c\u00e1c b\u1ea3ng bi\u1ec3u nh\u01b0 th\u1ebf n\u00e0y gi\u00fap ch\u00fang ta xu\u1ea5t ra \u0111\u01b0\u1ee3c c\u00e1c b\u1ea3ng \u0111\u1ed9ng t\u00f9y v\u00e0o &hellip;","og_url":"https:\/\/kiencang.net\/bang-bieu-echarts\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-08-26T15:59:05+00:00","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":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/bang-bieu-echarts\/","url":"https:\/\/kiencang.net\/bang-bieu-echarts\/","name":"L\u00e0m b\u1ea3ng bi\u1ec3u th\u1ed1ng k\u00ea \u0111\u1eb9p h\u01a1n tr\u00ean web v\u1edbi th\u01b0 vi\u1ec7n JS ECharts &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-08-26T15:59:05+00:00","dateModified":"2021-08-26T15:59:05+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/bang-bieu-echarts\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/bang-bieu-echarts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/bang-bieu-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"L\u00e0m b\u1ea3ng bi\u1ec3u th\u1ed1ng k\u00ea \u0111\u1eb9p h\u01a1n tr\u00ean web v\u1edbi th\u01b0 vi\u1ec7n JS ECharts"}]},{"@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\/14211"}],"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=14211"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14211\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}