{"id":2047,"date":"2026-07-27T02:53:11","date_gmt":"2026-07-27T02:53:11","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/docs\/uncategorized\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/"},"modified":"2026-07-27T02:53:11","modified_gmt":"2026-07-27T02:53:11","slug":"pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/","title":{"rendered":"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh: H\u00ecnh d\u1ea1ng t\u00f9y ch\u1ec9nh v\u00e0 c\u00e1c thanh \u0111\u1ed3 h\u1ecda vector"},"content":{"rendered":"

Khi tr\u00ecnh b\u00e0y c\u00e1c ch\u1ec9 s\u1ed1 ph\u00e2n lo\u1ea1i c\u00f3 l\u1ee3i t\u1eeb s\u1ef1 li\u00ean k\u1ebft tr\u1ef1c quan ngay l\u1eadp t\u1ee9c, th\u00ecBi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh<\/strong> mang \u0111\u1ebfn m\u1ed9t l\u1ef1a ch\u1ecdn s\u00e1ng t\u1ea1o v\u00e0 h\u1ea5p d\u1eabn thay th\u1ebf cho c\u00e1c thanh h\u00ecnh ch\u1eef nh\u1eadt ti\u00eau chu\u1ea9n. B\u1eb1ng c\u00e1ch thay th\u1ebf c\u00e1c kh\u1ed1i m\u00e0u \u0111\u1ea7y b\u1eb1ng bi\u1ec3u t\u01b0\u1ee3ng vector t\u00f9y ch\u1ec9nh, c\u00e1c \u0111\u01b0\u1eddng d\u1eabn SVG ho\u1eb7c c\u00e1c m\u1eabu bi\u1ec3u t\u01b0\u1ee3ng l\u1eb7p l\u1ea1i, bi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh bi\u1ebfn c\u00e1c b\u1ea3n t\u00f3m t\u1eaft d\u1eef li\u1ec7u th\u00f4ng th\u01b0\u1eddng th\u00e0nhc\u00e1c infographic m\u00f4 t\u1ea3 tr\u1ef1c quan<\/em>\u2014v\u00ed d\u1ee5 nh\u01b0 bi\u1ec3u t\u01b0\u1ee3ng con ng\u01b0\u1eddi cho th\u1ed1ng k\u00ea d\u00e2n s\u1ed1, h\u00ecnh d\u1ea1ng ph\u01b0\u01a1ng ti\u1ec7n cho c\u00e1c ch\u1ec9 s\u1ed1 giao th\u00f4ng, ho\u1eb7c bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i c\u00e2y cho s\u1ed1 l\u01b0\u1ee3ng thu ho\u1ea1ch.<\/p>\n

C\u01a1 ch\u1ebf c\u1ee7a bi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh<\/h2>\n

Trong Apache ECharts, bi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh s\u1eed d\u1ee5ngtype: 'pictorialBar'<\/code>. Ch\u00fang ho\u1ea1t \u0111\u1ed9ng tr\u00ean tr\u1ee5c danh m\u1ee5c v\u00e0 tr\u1ee5c gi\u00e1 tr\u1ecb ti\u00eau chu\u1ea9n gi\u1ed1ng nh\u01b0 bi\u1ec3u \u0111\u1ed3 c\u1ed9t th\u00f4ng th\u01b0\u1eddng, nh\u01b0ng thay th\u1ebf c\u00e1c thanh h\u00ecnh ch\u1eef nh\u1eadt b\u1eb1ng c\u00e1c \u0111\u1ed3 h\u1ecda t\u00f9y ch\u1ec9nh \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1edfi thu\u1ed9c t\u00ednhsymbol<\/code> (v\u00ed d\u1ee5 nh\u01b0 c\u00e1c h\u00ecnh d\u1ea1ng ti\u00eau chu\u1ea9n, URL h\u00ecnh \u1ea3nh ho\u1eb7c chu\u1ed7i \u0111\u01b0\u1eddng d\u1eabn SVG).<\/p>\n

1. C\u00e0i \u0111\u1eb7t c\u01a1 b\u1ea3n<\/h3>\n

\u0110\u1ec3 x\u00e2y d\u1ef1ng bi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh \u0111a chu\u1ed7i, h\u00e3y thi\u1ebft l\u1eadp tr\u1ee5c danh m\u1ee5c v\u00e0 tr\u1ee5c s\u1ed1, x\u00e1c \u0111\u1ecbnhtype: 'pictorialBar'<\/code>tr\u00ean c\u00e1c chu\u1ed7i, v\u00e0 t\u00f9y ch\u1ec9nh c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng \u0111i\u1ec3m ri\u00eang l\u1ebb tr\u1ef1c ti\u1ebfp trong m\u1ea3ngdata<\/code>m\u1ea3ng:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n  title: {\r\n    text: \"Thu ho\u1ea1ch t\u1ea1i ch\u1ee3 n\u00f4ng d\u00e2n\",\r\n    left: 'center'\r\n  },\r\n  legend: {\r\n    data: ['M\u00f9a xu\u00e2n', 'M\u00f9a h\u00e8'],\r\n    top: '8%'\r\n  },\r\n  tooltip: {\r\n    trigger: 'axis',\r\n    axisPointer: {\r\n      type: 'shadow'\r\n    }\r\n  },\r\n  grid: {\r\n    containLabel: true,\r\n    top: '18%',\r\n    left: 20\r\n  },\r\n  yAxis: {\r\n    data: ['T\u00e1o', 'Cam', 'Chu\u1ed1i', 'Nho', 'D\u00e2u t\u00e2y'],\r\n    inverse: true,\r\n    axisLine: { show: false },\r\n    axisTick: { show: false },\r\n    axisLabel: {\r\n      margin: 30,\r\n      fontSize: 14\r\n    }\r\n  },\r\n  xAxis: {\r\n    splitLine: { show: false },\r\n    axisLabel: { show: false },\r\n    axisTick: { show: false },\r\n    axisLine: { show: false }\r\n  },\r\n  series: [\r\n    {\r\n      name: 'M\u00f9a xu\u00e2n',\r\n      type: 'pictorialBar',\r\n      symbolRepeat: true,\r\n      symbolSize: ['80%', '60%'],\r\n      barCategoryGap: '40%',\r\n      data: [\r\n        { value: 320, symbol: 'circle' },\r\n        { value: 180, symbol: 'rect' },\r\n        { value: 410, symbol: 'diamond' },\r\n        { value: 95, symbol: 'triangle' },\r\n        { value: 240, symbol: 'roundRect' }\r\n      ]\r\n    },\r\n    {\r\n      name: 'M\u00f9a h\u00e8',\r\n      type: 'pictorialBar',\r\n      barGap: '10%',\r\n      symbolRepeat: true,\r\n      symbolSize: ['80%', '60%'],\r\n      data: [\r\n        { value: 290, symbol: 'circle' },\r\n        { value: 210, symbol: 'rect' },\r\n        { value: 520, symbol: 'diamond' },\r\n        { value: 130, symbol: 'triangle' },\r\n        { value: 310, symbol: 'roundRect' }\r\n      ]\r\n    }\r\n  ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c k\u1ef9 thu\u1eadt c\u1ea5u tr\u00fac n\u00e2ng cao<\/h2>\n
Bi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh c\u00f3 th\u1ec3 l\u1eb7p l\u1ea1i bi\u1ec3u t\u01b0\u1ee3ng theo th\u1ee9 t\u1ef1 \u0111\u1ec3 x\u00e2y d\u1ef1ng c\u00e1c \u0111\u1ebfm infographic d\u1ef1a tr\u00ean \u0111\u01a1n v\u1ecb, ho\u1eb7c s\u1eed d\u1ee5ng c\u00e1c \u0111\u01b0\u1eddng c\u1eaft \u0111\u1ec3 t\u1ea1o ra c\u00e1c bi\u1ec3u \u0111\u1ed3 tr\u1ef1c quan theo m\u1ee9c \u0111\u1ed9 l\u1ea5p \u0111\u1ea7y.<\/p>\n
1. M\u1eabu \u0111\u1ebfm \u0111\u01a1n v\u1ecb chu\u1ed7i \u0111\u01a1n<\/h3>\n
K\u00edch ho\u1ea1tsymbolRepeat: true<\/code>tr\u00ean m\u1ed9t tr\u1ee5c gi\u00e1 tr\u1ecb \u0111\u01a1n \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c ch\u1ed3ng bi\u1ec3u t\u01b0\u1ee3ng theo \u0111\u01a1n v\u1ecb ngang:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    tooltip: {\r\n        trigger: 'tr\u1ee5c'\r\n    },\r\n    tr\u1ee5cX: {\r\n        lo\u1ea1i: 'gi\u00e1 tr\u1ecb',\r\n        max: 10,\r\n        \u0111\u01b0\u1eddng chia: { hi\u1ec3n th\u1ecb: false }\r\n    },\r\n    tr\u1ee5cY: {\r\n        lo\u1ea1i: 'th\u1ec3 lo\u1ea1i',\r\n        d\u1eef li\u1ec7u: ['\u0110\u1ed9i Alpha', '\u0110\u1ed9i Beta', '\u0110\u1ed9i Gamma'],\r\n        \u0111\u01b0\u1eddng tr\u1ee5c: { hi\u1ec3n th\u1ecb: false },\r\n        d\u1ea5u chia: { hi\u1ec3n th\u1ecb: false }\r\n    },\r\n    chu\u1ed7i: [\r\n        {\r\n            lo\u1ea1i: 'c\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng',\r\n            bi\u1ec3u t\u01b0\u1ee3ng: 'h\u00ecnh ch\u1eef nh\u1eadt tr\u00f2n',\r\n            l\u1eb7p bi\u1ec3u t\u01b0\u1ee3ng: true,\r\n            k\u00edch th\u01b0\u1edbc bi\u1ec3u t\u01b0\u1ee3ng: [12, 30],\r\n            kho\u1ea3ng c\u00e1ch bi\u1ec3u t\u01b0\u1ee3ng: 4,\r\n            d\u1eef li\u1ec7u: [8, 5, 9],\r\n            ki\u1ec3u m\u1ee5c: {\r\n                m\u00e0u: '#91cc75'\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Tinh ch\u1ec9nh b\u1ed1 c\u1ee5c v\u00e0 h\u00ecnh d\u1ea1ng SVG t\u00f9y ch\u1ec9nh<\/h2>\n
S\u1eed d\u1ee5ng chu\u1ed7i \u0111\u01b0\u1eddng d\u1eabn SVG vector t\u00f9y ch\u1ec9nh cho ph\u00e9p b\u1ea1n hi\u1ec3n th\u1ecb c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c t\u00f9y ch\u1ec9nh tr\u1ef1c ti\u1ebfp b\u00ean trong chu\u1ed7i bi\u1ec3u \u0111\u1ed3 c\u1ee7a b\u1ea1n.<\/p>\n
1. \u0110\u01b0\u1eddng d\u1eabn vector t\u00f9y ch\u1ec9nh v\u00e0 l\u1edbp ch\u1ed3ng n\u1ec1n<\/h3>\n
Cung c\u1ea5p m\u1ed9t chu\u1ed7i \u0111\u01b0\u1eddng d\u1eabn SVG t\u00f9y ch\u1ec9nh cho bi\u1ec3u t\u01b0\u1ee3ng<\/code> v\u00e0 \u0111\u1eb7t m\u1ed9t \u0111\u1ed3 h\u1ecda n\u1ec1n \u0111\u1ea7y \u0111\u1ee7 \u1edf ph\u00eda d\u01b0\u1edbi \u0111\u1ec3 x\u00e2y d\u1ef1ng \u0111\u1ed3ng h\u1ed3 ti\u1ebfn \u0111\u1ed9:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
const pathBattery = 'path:\/\/M16 4h-2V2a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z';\r\n\r\noption = {\r\n    ti\u00eau \u0111\u1ec1: {\r\n        text: 'M\u1ee9c pin thi\u1ebft b\u1ecb',\r\n        left: 'center'\r\n    },\r\n    c\u00f4ng c\u1ee5 g\u1ee3i \u00fd: {\r\n        trigger: 'tr\u1ee5c',\r\n        tr\u1ecf tr\u1ee5c: { lo\u1ea1i: 'kh\u00f4ng' }\r\n    },\r\n    l\u01b0\u1edbi: {\r\n        top: '20%',\r\n        bottom: '15%',\r\n        left: '10%',\r\n        right: '10%'\r\n    },\r\n    tr\u1ee5cX: {\r\n        lo\u1ea1i: 'th\u1ec3 lo\u1ea1i',\r\n        d\u1eef li\u1ec7u: ['N\u00fat A', 'N\u00fat B', 'N\u00fat C', 'N\u00fat D'],\r\n        \u0111\u01b0\u1eddng tr\u1ee5c: { hi\u1ec3n th\u1ecb: false },\r\n        d\u1ea5u chia: { hi\u1ec3n th\u1ecb: false }\r\n    },\r\n    tr\u1ee5cY: {\r\n        lo\u1ea1i: 'gi\u00e1 tr\u1ecb',\r\n        max: 100,\r\n        hi\u1ec3n th\u1ecb: false\r\n    },\r\n    chu\u1ed7i: [\r\n        {\r\n            t\u00ean: 'V\u1ecf pin',\r\n            lo\u1ea1i: 'c\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng',\r\n            bi\u1ec3u t\u01b0\u1ee3ng: pathBattery,\r\n            k\u00edch th\u01b0\u1edbc bi\u1ec3u t\u01b0\u1ee3ng: ['60%', '100%'],\r\n            v\u1ecb tr\u00ed bi\u1ec3u t\u01b0\u1ee3ng: 'b\u1eaft \u0111\u1ea7u',\r\n            d\u1eef li\u1ec7u gi\u1edbi h\u1ea1n bi\u1ec3u t\u01b0\u1ee3ng: 100,\r\n            c\u1eaft bi\u1ec3u t\u01b0\u1ee3ng: false,\r\n            ki\u1ec3u m\u1ee5c: {\r\n                m\u00e0u: '#e2e8f0' \/\/ V\u1ecf n\u1ec1n tr\u1ed1ng\r\n            },\r\n            d\u1eef li\u1ec7u: [100, 100, 100, 100],\r\n            z: 1\r\n        },\r\n        {\r\n            t\u00ean: 'M\u1ee9c s\u1ea1c',\r\n            lo\u1ea1i: 'c\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng',\r\n            bi\u1ec3u t\u01b0\u1ee3ng: pathBattery,\r\n            k\u00edch th\u01b0\u1edbc bi\u1ec3u t\u01b0\u1ee3ng: ['60%', '100%'],\r\n            v\u1ecb tr\u00ed bi\u1ec3u t\u01b0\u1ee3ng: 'b\u1eaft \u0111\u1ea7u',\r\n            d\u1eef li\u1ec7u gi\u1edbi h\u1ea1n bi\u1ec3u t\u01b0\u1ee3ng: 100,\r\n            c\u1eaft bi\u1ec3u t\u01b0\u1ee3ng: true, \/\/ \u0110i\u1ec1n theo t\u1ef7 l\u1ec7 t\u01b0\u01a1ng \u1ee9ng v\u1edbi gi\u00e1 tr\u1ecb\r\n            nh\u00e3n: {\r\n                hi\u1ec3n th\u1ecb: true,\r\n                v\u1ecb tr\u00ed: 'tr\u00ean',\r\n                \u0111\u1ecbnh d\u1ea1ng: '{c}%',\r\n                c\u1ee1 ch\u1eef: 14,\r\n                \u0111\u1ed9 \u0111\u1eadm: '\u0111\u1eadm',\r\n                m\u00e0u: '#333'\r\n            },\r\n            ki\u1ec3u m\u1ee5c: {\r\n                m\u00e0u: '#22c55e' \/\/ M\u00e0u xanh l\u00e1 s\u1ea1c ho\u1ea1t \u0111\u1ed9ng\r\n            },\r\n            d\u1eef li\u1ec7u: [85, 45, 92, 20],\r\n            z: 2\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda ECharts trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
C\u00e1c th\u1ef1c h\u00e0nh t\u1ed1t chi\u1ebfn l\u01b0\u1ee3c<\/h2>\n
    \n
  • G\u00e1n bi\u1ec3u t\u01b0\u1ee3ng cho t\u1eebng m\u1ee5c \u0111\u1ec3 ph\u00e2n bi\u1ec7t c\u00e1c th\u1ec3 lo\u1ea1i kh\u00e1c nhau:<\/strong> Truy\u1ec1n t\u1eebng bi\u1ec3u t\u01b0\u1ee3ng<\/code>\u0111\u1ecbnh ngh\u0129a b\u00ean trong c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng d\u1eef li\u1ec7u (v\u00ed d\u1ee5 nh\u01b0 { value: 320, symbol: 'circle' }<\/code>) \u0111\u1ec3 ph\u00e2n bi\u1ec7t c\u00e1c h\u00e0ng v\u1ec1 m\u1eb7t th\u1ecb gi\u00e1c m\u00e0 kh\u00f4ng ph\u1ee5 thu\u1ed9c ho\u00e0n to\u00e0n v\u00e0o m\u00e0u s\u1eafc.<\/li>\n
  • Gi\u1eef c\u00e1c \u1ea9n d\u1ee5 bi\u1ec3u t\u01b0\u1ee3ng tr\u1ef1c quan:<\/strong>Ch\u1ecdn c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng ph\u00f9 h\u1ee3p tr\u1ef1c ti\u1ebfp v\u1edbi ch\u1ee7 \u0111\u1ec1 d\u1eef li\u1ec7u (v\u00ed d\u1ee5: h\u00ecnh b\u00f3ng ng\u01b0\u1eddi cho d\u1eef li\u1ec7u d\u00e2n s\u1ed1 ho\u1eb7c bi\u1ec3u t\u01b0\u1ee3ng pin cho d\u1eef li\u1ec7u n\u0103ng l\u01b0\u1ee3ng) \u0111\u1ec3 h\u00ecnh \u1ea3nh c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1ecdc ngay l\u1eadp t\u1ee9c.<\/li>\n
  • S\u1eed d\u1ee5ng symbolClip: true<\/code>\u0111\u1ec3 ch\u1ec9 b\u00e1o \u0111i\u1ec1n \u0111\u1ea7y:<\/strong>Khi hi\u1ec3n th\u1ecb c\u00e1c ch\u1ec9 s\u1ed1 ph\u1ea7n tr\u0103m so v\u1edbi n\u1ec1n \u0111\u1ea7y \u0111\u1ee7, h\u00e3y \u0111\u1eb7t symbolClip: true<\/code>tr\u00ean chu\u1ed7i ho\u1ea1t \u0111\u1ed9ng \u0111\u1ec3 h\u00ecnh d\u1ea1ng vector t\u00f9y ch\u1ec9nh \u0111i\u1ec1n \u0111\u1ea7y theo t\u1ef7 l\u1ec7.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Khi tr\u00ecnh b\u00e0y c\u00e1c ch\u1ec9 s\u1ed1 ph\u00e2n lo\u1ea1i c\u00f3 l\u1ee3i t\u1eeb s\u1ef1 li\u00ean k\u1ebft tr\u1ef1c quan ngay l\u1eadp t\u1ee9c, th\u00ecBi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh mang \u0111\u1ebfn m\u1ed9t l\u1ef1a ch\u1ecdn s\u00e1ng t\u1ea1o v\u00e0 h\u1ea5p d\u1eabn thay th\u1ebf cho c\u00e1c thanh h\u00ecnh…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":23,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2047","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"\nECharts Pictorial Bar Guide | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Create custom vector icon bar charts using ECharts pictorial syntax in VPasCode, a text to diagram tool.\" \/>\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.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Pictorial Bar Guide | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Create custom vector icon bar charts using ECharts pictorial syntax in VPasCode, a text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ca4521456.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/\",\"name\":\"ECharts Pictorial Bar Guide | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66ca4521456.png\",\"datePublished\":\"2026-07-27T02:53:11+00:00\",\"description\":\"Create custom vector icon bar charts using ECharts pictorial syntax in VPasCode, a text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66ca4521456.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66ca4521456.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh: H\u00ecnh d\u1ea1ng t\u00f9y ch\u1ec9nh v\u00e0 c\u00e1c thanh \u0111\u1ed3 h\u1ecda vector\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/wp-content\\\/uploads\\\/sites\\\/12\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/vn\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Pictorial Bar Guide | VPasCode Text to Diagram Guide","description":"Create custom vector icon bar charts using ECharts pictorial syntax in VPasCode, a text to diagram tool.","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.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/","og_locale":"vi_VN","og_type":"article","og_title":"ECharts Pictorial Bar Guide | VPasCode Text to Diagram Guide","og_description":"Create custom vector icon bar charts using ECharts pictorial syntax in VPasCode, a text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ca4521456.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/","url":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/","name":"ECharts Pictorial Bar Guide | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ca4521456.png","datePublished":"2026-07-27T02:53:11+00:00","description":"Create custom vector icon bar charts using ECharts pictorial syntax in VPasCode, a text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ca4521456.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66ca4521456.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/vn\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/vn\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/vn\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Bi\u1ec3u \u0111\u1ed3 c\u1ed9t h\u00ecnh \u1ea3nh: H\u00ecnh d\u1ea1ng t\u00f9y ch\u1ec9nh v\u00e0 c\u00e1c thanh \u0111\u1ed3 h\u1ecda vector"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/vn\/#website","url":"https:\/\/www.vpascode.com\/vn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/vn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/vn\/wp-content\/uploads\/sites\/12\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/vn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs\/2047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/media?parent=2047"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/vn\/wp-json\/wp\/v2\/ld_collection?post=2047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}