首先附上實(shí)現(xiàn)效果中姜，被分了段的柱狀圖
幸虧了公司的設(shè)計師出的難題无午，不然我也不會去搗鼓這個東西的
這個圖表的類型是 pictoriaBar ，在echarts 3.4版本（版本記得不太明確）之后有了這個類型的圖
介紹下這個屬性的具體用處：
barWidth: 設(shè)置柱子的寬度
symbol：設(shè)置小塊的樣式
symbolRepeat: 設(shè)置柱子上的小塊是否重復(fù)，我嘗試過發(fā)現(xiàn)督赤，默認(rèn)為false懈万，只顯示一個小塊
symbolOffset： 設(shè)置每個柱子的位置（每個柱子的位置需要進(jìn)行計算得出）
symbolSize: 設(shè)置每個小塊的大小
constchartInit = {color: ["#7AC9D2","#00C1DE","#00749F","#77BEE8","#1890FF","#3436C7","#0103A0","#000272"],backgroundColor:"transparent",grid: {left:"10px",top:"50px",right:"50px",bottom:"16px",containLabel:true},xAxis: {type:"category",data: ["2018/08/15","2018/10/02","2018/01/19","2018/05/23","2018/09/28","2018/02/21","2018/11/11","2018/06/14"],axisLabel: {color:"#AFBCC4"},axisTick: {show:false},axisLine: {show:false}? },yAxis: {name:"單位",axisLine: {show:false},type:"value",nameGap:10,axisTick: {show:false},axisLabel: {color:"#747677"},splitLine: {lineStyle: {color:"rgba(216,216,216,0.10)",type:"solid"}? ? }? },legend: {top:20,data: [? ? ? {name:"東向西直行",icon:"square"},? ? ? {name:"東向西右轉(zhuǎn)",icon:"square"},? ? ? {name:"西向東直行",icon:"square"},? ? ? {name:"西向東左轉(zhuǎn)",icon:"square"},? ? ? {name:"南向北直行",icon:"square"},? ? ? {name:"南向北左轉(zhuǎn)",icon:"square"},? ? ? {name:"北向南直行",icon:"square"},? ? ? {name:"北向南左轉(zhuǎn)",icon:"square"}? ? ]? },series: [? ? {name:"東向西直行",type:"pictorialBar",symbol:"roundRect",symbolRepeat:true,// 分節(jié)barWidth:10,symbolSize: [10,5],//size,單個symbol的大小data: [120,132,101,134,90,230,210,180]? ? },? ? {name:"東向西右轉(zhuǎn)",type:"pictorialBar",barWidth:10,symbolRepeat:true,symbol:"roundRect",symbolOffset: [13,0],// 柱子的位置symbolSize: [10,5],//size,單個symbol的大小data: [220,182,191,234,290,330,310,290]? ? },? ? {name:"西向東直行",type:"pictorialBar",symbolRepeat:true,symbol:"roundRect",symbolOffset: [26,0],// 柱子的位置symbolSize: [10,5],//size,單個symbol的大小barWidth:10,data: [150,232,201,154,190,330,410,430]? ? },? ? {name:"西向東左轉(zhuǎn)",type:"pictorialBar",symbolRepeat:true,symbol:"roundRect",symbolOffset: [39,0],// 柱子的位置symbolSize: [10,5],//size,單個symbol的大小barWidth:10,data: [320,332,301,334,390,330,320,503]? ? },? ? {name:"南向北直行",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [52,0],// 柱子的位置symbolSize: [10,5],//size,單個symbol的大小data: [820,932,901,934,1290,1330,1320,1222]? ? },? ? {name:"南向北左轉(zhuǎn)",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [65,0],// 柱子的位置symbolSize: [10,5],//size,單個symbol的大小data: [820,932,901,934,1290,1330,1320,1290]? ? },? ? {name:"北向南直行",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [78,0],// 柱子的位置symbolSize: [10,5],//size,單個symbol的大小data: [120,132,101,134,90,230,210,180]? ? },? ? {name:"北向南左轉(zhuǎn)",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [91,0],// 柱子的位置symbolSize: [10,5],//size,單個symbol的大小data: [120,132,101,134,90,230,210,180]? ? }? ]};
