{"id":14489,"date":"2021-09-08T11:09:53","date_gmt":"2021-09-08T11:09:53","guid":{"rendered":"https:\/\/freehost.page\/?p=14489"},"modified":"2021-09-08T11:09:53","modified_gmt":"2021-09-08T11:09:53","slug":"mot-vi-du-ve-echarts","status":"publish","type":"post","link":"https:\/\/kiencang.net\/mot-vi-du-ve-echarts\/","title":{"rendered":"M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u1ea3ng bi\u1ec3u ECharts \u01b0a th\u00edch c\u1ee7a t\u00f4i"},"content":{"rendered":"\n<p><a href=\"https:\/\/kiencang.net\/bang-bieu-echarts\/\" target=\"_blank\" rel=\"noreferrer noopener\">B\u1ea3ng bi\u1ec3u t\u1ea1o b\u1eb1ng th\u01b0 vi\u1ec7n JS ECharts r\u1ea5t \u0111\u1eb9p m\u1eaft<\/a>, b\u1ea3n th\u00e2n n\u00f3 c\u0169ng c\u00f3 t\u00ednh n\u0103ng responsive r\u1ed3i. Tuy nhi\u00ean ch\u00fang ta c\u1ea7n ch\u1ec9nh s\u1eeda c\u00e1c c\u00e0i \u0111\u1eb7t sao cho ph\u00f9 h\u1ee3p.<\/p>\n\n\n\n<p>M\u1ee5c \u0111\u00edch l\u00e0 \u0111\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c h\u1ee3p l\u00fd, thu\u1eadn m\u1eaft tr\u00ean c\u1ea3 giao di\u1ec7n di \u0111\u1ed9ng l\u1eabn m\u00e1y b\u00e0n. Vi\u1ec7c t\u00edch h\u1ee3p n\u00e0y l\u00e0 r\u1ea5t quan tr\u1ecdng \u0111\u1ec3 t\u1eadn d\u1ee5ng \u0111\u01b0\u1ee3c h\u00ecnh th\u1ee9c n\u1ed5i b\u1eadt c\u1ee7a ECharts.<\/p>\n\n\n\n<p>S\u1ef1 th\u1ef1c v\u1ea5n \u0111\u1ec1 th\u01b0\u1eddng n\u1eb1m \u1edf giao di\u1ec7n di \u0111\u1ed9ng, v\u00ec m\u00e0n h\u00ecnh l\u1edbn \u0111\u1ed3 th\u1ecb th\u01b0\u1eddng kh\u00f4ng g\u1eb7p v\u1ea5n \u0111\u1ec1 c\u1ea3n tr\u1edf n\u00e0o, nh\u01b0ng v\u1edbi m\u00e0n h\u00ecnh nh\u1ecf, ch\u00fang ta c\u1ea7n \u0111i\u1ec1u ch\u1ec9nh c\u1ea9n \u0111\u1ec3 n\u00f3 kh\u00f4ng b\u1ecb tr\u00e0n, che d\u1eef li\u1ec7u.<\/p>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 m\u1eabu \u01b0a th\u00edch c\u1ee7a t\u00f4i d\u01b0\u1edbi \u0111\u00e2y:<\/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:99%;\n                  }\n                                \n\n                   @font-face { \n                        font-family:\"fontMali\";\n                        src:url('fonts\/mali-light.woff2') format('woff2'), \/* tr\u00ecnh duy\u1ec7t m\u1edbi nh\u1ea5t *\/\n                            url('fonts\/mali-light.woff') format('woff'), \/* tr\u00ecnh duy\u1ec7t g\u1ea7n \u0111\u00e2y *\/\n                            url('fonts\/mali-light.ttf') format('ttf'), \/* Safari, Android, iOS, IE 10, 11 *\/\n                            url('fonts\/mali-light.otf') format('otf'),\n                            url('fonts\/mali-light.eot?#iefix') format('embedded-opentype'), \/* IE phi\u00ean b\u1ea3n c\u0169 *\/\n                            url('fonts\/mali-light.svg#svgFontName') format('svg'); \/* Legacy iOS *\/\n                        font-display:swap; }\n                    \n                    body, form input {\n                          font-family: \"fontMali\", Arial, Helvetica, sans-serif; }      \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        &lt;script&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:24,\n                                fontFamily:\"fontMali\"\n                              }\n                        },\n                        tooltip: {\n                            trigger: 'axis',\n                            axisPointer: {\n                                type: 'shadow'\n                            }\n                        },\n                        grid: {\n                            left: '1%',\n                            right: '1%',\n                            bottom: '0%',\n                            containLabel: true\n                        },\n                        xAxis: {\n                            type: 'value',\n                            boundaryGap: &#91;0, 0.01]\n                        },\n                        yAxis: {\n                            type: 'category',\n\n                            data: &#91;'Nguy\u1ec5n', 'L\u00ea', 'Tr\u1ea7n', 'B\u00f9i', '\u0110\u1eb7ng']\n                        },\n                        series: &#91;\n                            {\n                                name: '2012',\n                                type: 'bar',\n                                barWidth: '33%',\n                                data: &#91;1.2, 2.3, {\n            value: 3.2,\n            itemStyle: {\n                color: '#f4b41a'\n            }\n        }, 4.2, 6.7],\n                markPoint: {\n                data: &#91;\n                    {name: 'ti\u00eau \u0111i\u1ec3m', value: 3.2, xAxis: 3.2, yAxis: 2}\n                ]\n            }\n                            }\n                        ]\n                    };\n                \n                            window.addEventListener('resize',function(){\n                            myChart.resize();});        \n                \n        myChart.setOption(option);\n    &lt;\/script&gt;\n\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"395\" height=\"616\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/09\/bieu-do-di-dong.png\" alt=\"bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1ee3c th\u1ec3 hi\u1ec7n b\u1eb1ng ECharts\" class=\"wp-image-14685\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/09\/bieu-do-di-dong.png 395w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/09\/bieu-do-di-dong-192x300.png 192w\" sizes=\"(max-width: 395px) 100vw, 395px\" \/><\/figure><\/div>\n\n\n\n<p>N\u00f3 kh\u00e1 l\u00e0 \u1ed5n, khi c\u00e1c c\u1ed9t d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c nh\u00ecn r\u00f5, full m\u00e0n h\u00ecnh, c\u1ed9t d\u1eef li\u1ec7u c\u1ea7n quan t\u00e2m \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u n\u1ed5i b\u1eadt v\u1edbi m\u00e0u s\u1eafc kh\u00e1c, v\u00e0 c\u00f3 ch\u00fa th\u00edch gi\u00e1 tr\u1ecb. Tr\u1ee5c X d\u1eef li\u1ec7u c\u0169ng r\u00f5, kh\u00f4ng b\u1ecb s\u00e1t x\u00edt v\u00e0o nhau.<\/p>\n\n\n\n<p>T\u00f4i s\u1eed d\u1ee5ng c\u00e1c l\u1ef1a ch\u1ecdn sau:<\/p>\n\n\n\n<ul><li>Font mali b\u1ea1n l\u1ea5y \u1edf \u0111\u00e2y: <a href=\"https:\/\/fonts.google.com\/specimen\/Mali\" target=\"_blank\" rel=\"noreferrer noopener\">fonts.google.com\/specimen\/Mali<\/a><\/li><li>Khung \u0111\u1ed3 th\u1ecb g\u1ea7n nh\u01b0 full m\u00e0n h\u00ecnh v\u1edbi t\u00f9y ch\u1ecdn d\u01b0\u1edbi \u0111\u00e2y:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>#main {height:550px;\n       width:99%;\n      }<\/code><\/pre>\n\n\n\n<ul><li>\u0110\u1ed3 th\u1ecb c\u00f3 kh\u1ea3 n\u0103ng responsive v\u1edbi t\u00f9y ch\u1ecdn sau:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>window.addEventListener('resize',function(){myChart.resize();});<\/code><\/pre>\n\n\n\n<ul><li>T\u00f4i ch\u1ecdn font ch\u1eef t\u00f9y ch\u1ec9nh \u0111\u1ec3 \u0111\u1ed3 th\u1ecb th\u00eam ph\u1ea7n c\u00e1 t\u00ednh, font t\u00f9y ch\u1ec9nh r\u1ea5t h\u1ee3p v\u1edbi \u0111\u1ed3 th\u1ecb v\u00ec n\u00f3 kh\u00f4ng qu\u00e1 nhi\u1ec1u ch\u1eef:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n             font-family:\"fontMali\";\n             src:url('fonts\/mali-light.woff2') format('woff2'), \n                    url('fonts\/mali-light.woff') format('woff'), \n                    url('fonts\/mali-light.ttf') format('ttf'), \n                    url('fonts\/mali-light.otf') format('otf'),\n                    url('fonts\/mali-light.eot?#iefix') format('embedded-opentype'), \n                    url('fonts\/mali-light.svg#svgFontName') format('svg'); \n              font-display:swap; }<\/code><\/pre>\n\n\n\n<ul><li>S\u1eed d\u1ee5ng font ch\u1eef ti\u00eau \u0111\u1ec1 v\u1edbi k\u00edch c\u1ee1 v\u1eeba ph\u1ea3i, v\u00e0 k\u1ebft h\u1ee3p v\u1edbi font t\u00f9y ch\u1ec9nh:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>textStyle: {fontSize:24,\n            fontFamily:\"fontMali\"}<\/code><\/pre>\n\n\n\n<ul><li>C\u1ed9t n\u1eb1m ngang, t\u00f4i th\u1ea5y r\u1eb1ng n\u00f3 d\u1ec5 quan s\u00e1t h\u01a1n c\u1ed9t d\u1ecdc;<\/li><li>S\u1ed1 l\u01b0\u1ee3ng c\u1ed9t kh\u00f4ng qu\u00e1 nhi\u1ec1u, t\u00f4i gi\u1edbi h\u1ea1n 5 c\u1ed9t trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y;<\/li><li>C\u1ed9t d\u1eef li\u1ec7u c\u1ea7n l\u00e0m n\u1ed5i b\u1eadt \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u m\u00e0u s\u1eafc kh\u00e1c, n\u00f3 s\u1eed d\u1ee5ng c\u00e2u l\u1ec7nh:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>{\nvalue: 3.2,\n     itemStyle: {\n            color: '#f4b41a'\n            }\n}<\/code><\/pre>\n\n\n\n<ul><li>B\u1ea1n c\u1ea7n ch\u00fa \u00fd ch\u1ecdn m\u00e0u s\u1eafc sao cho h\u00e0i h\u00f2a, tr\u00e1nh t\u01b0\u01a1ng ph\u1ea3n qu\u00e1 m\u1ee9c v\u1edbi c\u1ed9t d\u1eef li\u1ec7u kh\u00e1c, c\u00e1i n\u00e0y c\u0169ng t\u00f9y th\u1ea9m m\u1ef9 m\u1ed7i ng\u01b0\u1eddi, v\u00e0 quan \u0111i\u1ec3m ri\u00eang, c\u00e1 nh\u00e2n t\u00f4i ch\u1ecdn m\u00e0u v\u00e0ng kh\u00f4ng qu\u00e1 \u0111\u1eadm;<\/li><li>\u0110\u1ed9 r\u1ed9ng c\u1ed9t \u0111\u01b0\u1ee3c \u0111i\u1ec1u ch\u1ec9nh b\u1eb1ng c\u00e2u l\u1ec7nh <code>barWidth: '33%'<\/code> T\u00f4i th\u00edch c\u1ed9t m\u1ea3nh h\u01a1n, c\u1ed9t d\u1ea7y s\u1ebd ng\u1ed9p tr\u00ean m\u00e0n h\u00ecnh nh\u1ecf, tuy nhi\u00ean b\u1ea1n c\u1ee9 \u0111i\u1ec1u ch\u1ec9nh c\u1ee5 th\u1ec3 tr\u01b0\u1eddng h\u1ee3p ri\u00eang c\u1ee7a m\u00ecnh sao cho th\u00edch h\u1ee3p;<\/li><li>T\u00f4i b\u1ed5 sung th\u00eam bong b\u00f3ng ch\u00fa th\u00edch cho c\u1ed9t d\u1eef li\u1ec7u c\u1ea7n ch\u00fa \u00fd b\u1eb1ng c\u00e2u l\u1ec7nh:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>markPoint:{\ndata: &#91;\n{name: 'ti\u00eau \u0111i\u1ec3m', value: 3.2, xAxis: 3.2, yAxis: 2}\n]\n}<\/code><\/pre>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e2u l\u1ec7nh \u0111\u00e1nh d\u1ea5u d\u1eef li\u1ec7u theo c\u00e1ch th\u1ee7 c\u00f4ng, \u1edf \u0111\u00f3, ch\u00fang ta ph\u1ea3i ch\u1ecdn c\u1ed9t c\u1ee5 th\u1ec3 \u1edf tr\u1ee5c y (b\u1eaft \u0111\u1ea7u \u0111\u1ebfm t\u1eeb 0 t\u1eeb d\u01b0\u1edbi l\u00ean, 2 c\u00f3 ngh\u0129a l\u00e0 c\u1ed9t th\u1ee9 3 t\u00ednh t\u1eeb d\u01b0\u1edbi l\u00ean), gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 c\u1ee7a bong b\u00f3ng so v\u1edbi tr\u1ee5c x;<\/p>\n\n\n\n<p>R\u1ea5t ti\u1ebfc l\u00e0 t\u00f4i v\u1eabn ch\u01b0a t\u00ecm c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh \u0111\u01b0\u1ee3c m\u00e0u c\u1ee7a bong b\u00f3ng sao cho n\u00f3 h\u1ee3p v\u1edbi m\u00e0u c\u1ee7a c\u1ed9t d\u1eef li\u1ec7u h\u01a1n.<\/p>\n\n\n\n<ul><li>V\u1ec1 l\u1ec1 v\u00e0 bao g\u1ed3m nh\u00e3n t\u00f4i s\u1eed d\u1ee5ng c\u00e2u l\u1ec7nh:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>grid: {left: '1%',\n       right: '1%',\n       bottom: '0%',\n       containLabel: true\n}<\/code><\/pre>\n\n\n\n<p>PS: file JS c\u1ee7a ECharts kh\u00f4ng n\u00ean \u0111\u1ec3 <code>defer<\/code> v\u00ec n\u00f3 s\u1ebd l\u00e0m b\u1ea3ng d\u1eef li\u1ec7u kh\u00f4ng hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Thi\u1ebft k\u1ebf b\u1ed5 sung<\/h2>\n\n\n\n<p>Trong ph\u1ea7n m\u00e3 d\u01b0\u1edbi \u0111\u00e2y, t\u00f4i b\u1ed5 sung th\u00eam m\u1ed9t c\u1ed9t d\u1eef li\u1ec7u, v\u00e0 b\u1ed1 tr\u00ed c\u0103n gi\u1eefa n\u00f3 c\u0169ng nh\u01b0 \u0111\u1ea3m b\u1ea3o k\u00edch c\u1ee1 \u1ed5n \u0111\u1ecbnh tr\u00ean nhi\u1ec1u c\u1ee1 m\u00e0n h\u00ecnh kh\u00e1c nhau.<\/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                    @font-face { \n                        font-family:\"fontMali\";\n                        src:url('fonts\/mali-light.woff2') format('woff2'), \/* tr\u00ecnh duy\u1ec7t m\u1edbi nh\u1ea5t *\/\n                            url('fonts\/mali-light.woff') format('woff'), \/* tr\u00ecnh duy\u1ec7t g\u1ea7n \u0111\u00e2y *\/\n                            url('fonts\/mali-light.ttf') format('ttf'), \/* Safari, Android, iOS, IE 10, 11 *\/\n                            url('fonts\/mali-light.otf') format('otf'),\n                            url('fonts\/mali-light.eot?#iefix') format('embedded-opentype'), \/* IE phi\u00ean b\u1ea3n c\u0169 *\/\n                            url('fonts\/mali-light.svg#svgFontName') format('svg'); \/* Legacy iOS *\/\n                        font-display:swap; }\n                    \n                    body, form input {\n                          font-family: \"fontMali\", Arial, Helvetica, sans-serif; } \n                    \n                    #main, #main2 {\n                            height:550px;\n                            width:99%;\n                            margin: 0 auto;\n                            margin-top:50px; }\n                    \n                    @media (min-width: 500px) {\n                            #main, #main2 {width:95%; } }     \n                      \n                    @media (min-width: 650px) {\n                            #main, #main2 {width:600px; } }\n                    \n                    #footer {margin-top:100px; }\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=\"main2\"&gt;&lt;\/div&gt;\n                &lt;script&gt;\n                            var chartDom = document.getElementById('main2');\n                            var myChart = echarts.init(chartDom);\n                            var option;\n\n                            option = {\n                                title: {\n                                    text: 'M\u1ee9c \u0111\u1ed9 ph\u1ed5 bi\u1ebfn c\u1ee7a h\u1ecd',\n                                    subtext: 'ch\u1ec9 l\u00e0 minh h\u1ecda, kh\u00f4ng ph\u1ea3i d\u1eef li\u1ec7u th\u1ef1c',\n                                        textStyle: {\n                                        fontSize:24,\n                                        fontFamily:\"fontMali\"\n                                      }\n                                },\n                                tooltip: {\n                                    trigger: 'axis',\n                                    axisPointer: {\n                                        type: 'shadow'\n                                    }\n                                },\n                                grid: {\n                                    left: '1%',\n                                    right: '1%',\n                                    bottom: '0%',\n                                    containLabel: true\n                                },\n                                xAxis: {\n                                    type: 'value',\n                                    boundaryGap: &#91;0, 0.01]\n                                },\n                                yAxis: {\n                                    type: 'category',\n\n                                    data: &#91;'Nguy\u1ec5n', 'Tr\u1ea7n', 'B\u00f9i']\n                                },\n                                    nameTextStyle: {\n                                      fontSize: 16\n                                    },\n                                series: &#91;\n                                    {\n                                        name: 'h\u1ecd',\n                                        type: 'bar',\n                                        barWidth: '33%',\n                                        data: &#91;1.9, {\n                    value: 3.7,\n                    itemStyle: {\n                        color: '#f4b41a'\n                    }\n                }, 5.2],\n                        markPoint: {\n                        data: &#91;\n                            {name: 'ti\u00eau \u0111i\u1ec3m', value: 3.7, xAxis: 3.7, yAxis: 1}\n                        ]\n                    }\n                                    }\n                                ]\n                            };\n\n                                    window.addEventListener('resize',function(){\n                                    myChart.resize();});        \n\n                            myChart.setOption(option);\n                &lt;\/script&gt; \n                \n                \n                &lt;div id=\"main\"&gt;&lt;\/div&gt;\n                &lt;script&gt;\n                            var chartDom = document.getElementById('main');\n                            var myChart = echarts.init(chartDom);\n                            var option;\n\n                            option = {\n                                title: {\n                                    text: 'M\u1ee9c \u0111\u1ed9 ph\u1ed5 bi\u1ebfn c\u1ee7a t\u00ean',\n                                    subtext: 'ch\u1ec9 l\u00e0 minh h\u1ecda, kh\u00f4ng ph\u1ea3i d\u1eef li\u1ec7u th\u1ef1c',\n                                        textStyle: {\n                                        fontSize:24,\n                                        fontFamily:\"fontMali\"\n                                      }\n                                },\n                                tooltip: {\n                                    trigger: 'axis',\n                                    axisPointer: {\n                                        type: 'shadow'\n                                    }\n                                },\n                                grid: {\n                                    left: '1%',\n                                    right: '1%',\n                                    bottom: '0%',\n                                    containLabel: true\n                                },\n                                xAxis: {\n                                    type: 'value',\n                                    boundaryGap: &#91;0, 0.01]\n                                },\n                                yAxis: {\n                                    type: 'category',\n\n                                    data: &#91;'Tu\u1ea5n', 'Minh', 'Ho\u00e0ng']\n                                },\n                                    nameTextStyle: {\n                                      fontSize: 16\n                                    },\n                                series: &#91;\n                                    {\n                                        name: 't\u00ean',\n                                        type: 'bar',\n                                        barWidth: '33%',\n                                        data: &#91;1.2, {\n                    value: 3.2,\n                    itemStyle: {\n                        color: '#039fbe'\n                    }\n                }, 4.2],\n                        markPoint: {\n                        data: &#91;\n                            {name: 'ti\u00eau \u0111i\u1ec3m', value: 3.2, xAxis: 3.2, yAxis: 1}\n                        ]\n                    }\n                                    }\n                                ]\n                            };\n\n                                    window.addEventListener('resize',function(){\n                                    myChart.resize();});        \n\n                            myChart.setOption(option);\n                &lt;\/script&gt;\n                \n                &lt;div id=\"footer\"&gt;&lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea3ng bi\u1ec3u t\u1ea1o b\u1eb1ng th\u01b0 vi\u1ec7n JS ECharts r\u1ea5t \u0111\u1eb9p m\u1eaft, b\u1ea3n th\u00e2n n\u00f3 c\u0169ng c\u00f3 t\u00ednh n\u0103ng responsive r\u1ed3i. Tuy nhi\u00ean ch\u00fang ta c\u1ea7n ch\u1ec9nh s\u1eeda c\u00e1c c\u00e0i \u0111\u1eb7t sao cho ph\u00f9 h\u1ee3p. M\u1ee5c \u0111\u00edch l\u00e0 \u0111\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c h\u1ee3p l\u00fd, thu\u1eadn m\u1eaft tr\u00ean c\u1ea3 giao di\u1ec7n di \u0111\u1ed9ng l\u1eabn m\u00e1y b\u00e0n. Vi\u1ec7c &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229,236],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u1ea3ng bi\u1ec3u ECharts \u01b0a th\u00edch c\u1ee7a t\u00f4i &#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\/mot-vi-du-ve-echarts\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u1ea3ng bi\u1ec3u ECharts \u01b0a th\u00edch c\u1ee7a t\u00f4i &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"B\u1ea3ng bi\u1ec3u t\u1ea1o b\u1eb1ng th\u01b0 vi\u1ec7n JS ECharts r\u1ea5t \u0111\u1eb9p m\u1eaft, b\u1ea3n th\u00e2n n\u00f3 c\u0169ng c\u00f3 t\u00ednh n\u0103ng responsive r\u1ed3i. Tuy nhi\u00ean ch\u00fang ta c\u1ea7n ch\u1ec9nh s\u1eeda c\u00e1c c\u00e0i \u0111\u1eb7t sao cho ph\u00f9 h\u1ee3p. M\u1ee5c \u0111\u00edch l\u00e0 \u0111\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c h\u1ee3p l\u00fd, thu\u1eadn m\u1eaft tr\u00ean c\u1ea3 giao di\u1ec7n di \u0111\u1ed9ng l\u1eabn m\u00e1y b\u00e0n. Vi\u1ec7c &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/mot-vi-du-ve-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-09-08T11:09:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/09\/bieu-do-di-dong.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":"M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u1ea3ng bi\u1ec3u ECharts \u01b0a th\u00edch c\u1ee7a t\u00f4i &#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\/mot-vi-du-ve-echarts\/","og_locale":"vi_VN","og_type":"article","og_title":"M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u1ea3ng bi\u1ec3u ECharts \u01b0a th\u00edch c\u1ee7a t\u00f4i &#8226; Ki\u1ebfn c\u00e0ng","og_description":"B\u1ea3ng bi\u1ec3u t\u1ea1o b\u1eb1ng th\u01b0 vi\u1ec7n JS ECharts r\u1ea5t \u0111\u1eb9p m\u1eaft, b\u1ea3n th\u00e2n n\u00f3 c\u0169ng c\u00f3 t\u00ednh n\u0103ng responsive r\u1ed3i. Tuy nhi\u00ean ch\u00fang ta c\u1ea7n ch\u1ec9nh s\u1eeda c\u00e1c c\u00e0i \u0111\u1eb7t sao cho ph\u00f9 h\u1ee3p. M\u1ee5c \u0111\u00edch l\u00e0 \u0111\u1ec3 t\u1ea1o b\u1ed1 c\u1ee5c h\u1ee3p l\u00fd, thu\u1eadn m\u1eaft tr\u00ean c\u1ea3 giao di\u1ec7n di \u0111\u1ed9ng l\u1eabn m\u00e1y b\u00e0n. Vi\u1ec7c &hellip;","og_url":"https:\/\/kiencang.net\/mot-vi-du-ve-echarts\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-09-08T11:09:53+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/09\/bieu-do-di-dong.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\/mot-vi-du-ve-echarts\/","url":"https:\/\/kiencang.net\/mot-vi-du-ve-echarts\/","name":"M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u1ea3ng bi\u1ec3u ECharts \u01b0a th\u00edch c\u1ee7a t\u00f4i &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-09-08T11:09:53+00:00","dateModified":"2021-09-08T11:09:53+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/mot-vi-du-ve-echarts\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/mot-vi-du-ve-echarts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/mot-vi-du-ve-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"M\u1ed9t v\u00ed d\u1ee5 v\u1ec1 b\u1ea3ng bi\u1ec3u ECharts \u01b0a th\u00edch c\u1ee7a t\u00f4i"}]},{"@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\/14489"}],"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=14489"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14489\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}