象形柱圖

一般的柱圖都是純色柱圖，使用象形柱圖可以給柱圖定義自己的樣式。
樣式的調節與柱圖一樣，核心在于symbol調節柱圖的組成。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",data: [10, 20, 42, 60],},],};

使用symbol設置圖形類型

 let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbol: "image://http://localhost:5173/R-C.jfif",data: [10, 20, 42, 60],},],};

symbolRepeat:指定圖形元素是否重復。
設置symbolRepeat后圖形會堆疊。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbol: "image://http://localhost:5173/R-C.jfif",symbolRepeat: true,data: [10, 20, 42, 60],},],};

設置 symbolSize調整大小后會有層疊的效果。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbol: "image://http://localhost:5173/R-C.jfif",symbolRepeat: true,symbolSize: ["100%", "10%"],data: [10, 20, 42, 60],},],};

偽3D柱狀圖

1.畫出底部的圓圈和柱圖

 let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,},{type: "bar",data: [50, 50, 50, 50],itemStyle: {opacity: 0.1,},barWidth: 40,},],};

symbolPosition 圖形的定位位置，'end’圖形邊緣與柱子結束的地方內切。 symbolPosition必須設置symbolRepeat才會生效。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,},{type: "bar",data: [90, 90, 90, 90],itemStyle: {opacity: 0.1,},barWidth: 40,},{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,symbolPosition: "end",//設置 symbolRepeat后才會生效symbolOffset: [0, 30],symbolRepeat: true,},],};

barGap:不同系列的柱間距離,如果想要兩個系列的柱子重疊，可以設置 barGap 為 ‘-100%’。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,},{type: "bar",data: [90, 90, 90, 90],itemStyle: {opacity: 0.1,},barWidth: 40,},{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,symbolPosition: "end", //設置 symbolRepeat后才會生效symbolOffset: [0, 30],symbolRepeat: true,},{type: "bar",barGap: "-100%",barWidth: 40,data: [10, 20, 30, 40],},],};

如果想要底部和柱狀圖之間有距離，可以在設置一個bar柱狀圖，讓他們堆疊在一起，然后再設置顏色為透明的。

 let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,},{type: "bar",data: [90, 90, 90, 90],itemStyle: {opacity: 0.1,},barWidth: 40,},{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,symbolPosition: "end", //設置 symbolRepeat后才會生效symbolOffset: [0, 30],symbolRepeat: true,},{type: "bar",barGap: "-100%",barWidth: 40,stack: "total",itemStyle: {opacity: 0,},data: [1.9, 1.9, 1.9, 1.9],},{type: "bar",barGap: "-100%",barWidth: 40,stack: "total",data: [10, 20, 30, 40],},],};

圣誕愿望清單和山峰高度 官網例子

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],axisLine: { show: false },axisLabel: { show: false },axisTick: { show: false },},yAxis: {min: 0,max: 15000,splitLine: { show: false },axisTick: { show: false },axisLine: { show: false },axisLabel: { show: false },},series: [{type: "pictorialBar",label: {show: true,position: "top",color: "#e54035",},data: [{Symbol: "image://" + paperDataURI,symbolSize: ["130%", "20%"],symbolRepeat: true,symbolMargin: "-30%",value: 13000,itemStyle: {},z: 900,},0,{value: 8864,symbol: "image://http://localhost:5173/hill-Qomolangma.png",//   symbolSize: ["200%", "105%"],},{value: 5895,symbol: "image://http://localhost:5173/hill-Kilimanjaro.png",// symbolSize: ["200%", "105%"],},],},],};