{"id":2051,"date":"2026-07-27T02:53:11","date_gmt":"2026-07-27T02:53:11","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/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\/id\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/","title":{"rendered":"Diagram Batang Ilustratif: Bentuk Kustom dan Batang Grafis Vektor"},"content":{"rendered":"

Ketika menyajikan metrik kategorikal yang mendapat manfaat dari asosiasi visual langsung, makaDiagram Batang Ilustratif<\/strong>menawarkan alternatif yang kreatif dan menarik dibandingkan batang persegi panjang standar. Dengan mengganti blok warna padat dengan ikon vektor kustom, jalur SVG, atau pola simbol berulang, diagram batang ilustratif mengubah ringkasan data rutin menjadiinfografis yang deskriptif secara visual<\/em>\u2014seperti ikon manusia untuk statistik populasi, bentuk kendaraan untuk metrik lalu lintas, atau simbol buah untuk jumlah panen.<\/p>\n

Mekanisme Diagram Batang Ilustratif<\/h2>\n

Dalam Apache ECharts, diagram batang ilustratif menggunakantype: 'pictorialBar'<\/code>. Mereka beroperasi pada sumbu kategori dan nilai standar seperti diagram batang biasa, tetapi mengganti batang persegi panjang dengan grafik yang dapat disesuaikan yang ditentukan oleh propertisymbol<\/code> (seperti bentuk standar, URL gambar, atau string jalur SVG).<\/p>\n

1. Pengaturan Dasar<\/h3>\n

Untuk membuat diagram batang ilustratif multi-seri, siapkan sumbu kategorikal dan numerik, tentukantype: 'pictorialBar'<\/code> di seluruh seri, dan sesuaikan simbol titik individu langsung dalam arraydata<\/code> array:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di 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: \"Panen Pasar Petani\",\r\n    left: 'center'\r\n  },\r\n  legend: {\r\n    data: ['Musim Semi', 'Musim Panas'],\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: ['Apel', 'Jeruk', 'Pisang', 'Anggur', 'Stroberi'],\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: 'Musim Semi',\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: 'Musim Panas',\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>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Teknik Struktural Lanjutan<\/h2>\n
Diagram batang ilustratif dapat mengulang ikon secara berurutan untuk membangun jumlah infografis berbasis unit atau menggunakan jalur pemotong untuk menciptakan visualisasi tingkat isi.<\/p>\n
1. Pola Jumlah Unit Seri Tunggal<\/h3>\n
AktifkansymbolRepeat: true<\/code>pada sumbu nilai tunggal untuk menampilkan tumpukan simbol berbasis unit secara horizontal:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di 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: 'axis'\r\n    },\r\n    xAxis: {\r\n        type: 'value',\r\n        max: 10,\r\n        splitLine: { show: false }\r\n    },\r\n    yAxis: {\r\n        type: 'category',\r\n        data: ['Tim Alpha', 'Tim Beta', 'Tim Gamma'],\r\n        axisLine: { show: false },\r\n        axisTick: { show: false }\r\n    },\r\n    series: [\r\n        {\r\n            type: 'pictorialBar',\r\n            symbol: 'roundRect',\r\n            symbolRepeat: true,\r\n            symbolSize: [12, 30],\r\n            symbolMargin: 4,\r\n            data: [8, 5, 9],\r\n            itemStyle: {\r\n                color: '#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>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Penyesuaian Layout dan Bentuk SVG Kustom<\/h2>\n
Menggunakan string jalur SVG vektor kustom memungkinkan Anda menampilkan ikon yang disesuaikan langsung di dalam seri grafik Anda.<\/p>\n
1. Jalur Vektor Kustom dan Overlay Latar Belakang<\/h3>\n
Sediakan string jalur SVG kustom ke simbol<\/code>dan tambahkan grafik latar belakang skala penuh di bawahnya untuk membuat meter gaya kemajuan:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di 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    title: {\r\n        text: 'Tingkat Baterai Perangkat',\r\n        left: 'center'\r\n    },\r\n    tooltip: {\r\n        trigger: 'axis',\r\n        axisPointer: { type: 'none' }\r\n    },\r\n    grid: {\r\n        top: '20%',\r\n        bottom: '15%',\r\n        left: '10%',\r\n        right: '10%'\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Node A', 'Node B', 'Node C', 'Node D'],\r\n        axisLine: { show: false },\r\n        axisTick: { show: false }\r\n    },\r\n    yAxis: {\r\n        type: 'value',\r\n        max: 100,\r\n        show: false\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Cangkang Baterai',\r\n            type: 'pictorialBar',\r\n            symbol: pathBattery,\r\n            symbolSize: ['60%', '100%'],\r\n            symbolPosition: 'start',\r\n            symbolBoundingData: 100,\r\n            symbolClip: false,\r\n            itemStyle: {\r\n                color: '#e2e8f0' \/\/ Cangkang latar belakang kosong\r\n            },\r\n            data: [100, 100, 100, 100],\r\n            z: 1\r\n        },\r\n        {\r\n            name: 'Tingkat Isi',\r\n            type: 'pictorialBar',\r\n            symbol: pathBattery,\r\n            symbolSize: ['60%', '100%'],\r\n            symbolPosition: 'start',\r\n            symbolBoundingData: 100,\r\n            symbolClip: true, \/\/ Mengisi secara proporsional terhadap nilai\r\n            label: {\r\n                show: true,\r\n                position: 'top',\r\n                formatter: '{c}%',\r\n                fontSize: 14,\r\n                fontWeight: 'bold',\r\n                color: '#333'\r\n            },\r\n            itemStyle: {\r\n                color: '#22c55e' \/\/ Isi hijau aktif\r\n            },\r\n            data: [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>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Praktik Terbaik Strategis<\/h2>\n
    \n
  • Tetapkan Simbol Per-Item untuk Kategori yang Berbeda:<\/strong>Berikan definisi individual simbol<\/code>definisi di dalam objek data (misalnya, { value: 320, symbol: 'lingkaran' }<\/code>) untuk membedakan baris secara visual tanpa mengandalkan warna semata.<\/li>\n
  • Jaga Metafora Ikon agar Intuitif:<\/strong>Pilih simbol yang secara langsung sesuai dengan topik data (misalnya, siluet pengguna untuk data demografis atau ikon baterai untuk metrik daya) agar visual dapat dibaca secara langsung.<\/li>\n
  • Gunakan symbolClip: true<\/code>untuk Indikator Isi:<\/strong>Ketika menampilkan metrik persentase terhadap latar belakang penuh, atur symbolClip: true<\/code>pada seri aktif agar bentuk vektor kustom terisi secara proporsional.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Ketika menyajikan metrik kategorikal yang mendapat manfaat dari asosiasi visual langsung, makaDiagram Batang Ilustratifmenawarkan alternatif yang kreatif dan menarik dibandingkan batang persegi panjang standar. Dengan mengganti blok warna padat dengan ikon vektor kustom, jalur SVG, atau pola simbol berulang, diagram…<\/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-2051","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\/id\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\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\/id\/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=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/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\\\/id\\\/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\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diagram Batang Ilustratif: Bentuk Kustom dan Batang Grafis Vektor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/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\/id\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/","og_locale":"id_ID","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\/id\/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":{"Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/","url":"https:\/\/www.vpascode.com\/id\/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\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/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\/id\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/pictorial-bar-chart-custom-shapes-and-vector-graphical-bars-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/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\/id\/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\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Diagram Batang Ilustratif: Bentuk Kustom dan Batang Grafis Vektor"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2051"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}