echarts象形柱图自定义样式（类似柱状图）

象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图，往往用在信息图中，用于有至少一个类目轴或时间轴的直角坐标系上。

先上一个简单的效果：

 其实实现思路主要在于：绘制具有颜色定义的背景以及对应的数据标识列，废话咱也不多说，直接上代码，此代码可直接复制至echarts官网运行查看。

var maxData = 2000; 
option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '2%',
        containLabel: true
    },
    xAxis: {
    	axisLine:{
            	show:false // 是否显示坐标轴
        },
        axisTick: {
            show: false  //是否显示坐标轴刻度
        },
        data: ['手术室','CT室','心内科','口腔科','ICU室','眼科','放射科','导管室','供应室','神外科']
    },
    yAxis: {
        max:maxData,
        show:false,
    }, 
    series: [{
        type: 'pictorialBar',
        symbol: 'rect',
        symbolSize: [50, 10],
        color:'#7f71e2',
        symbolRepeat: true,
        symbolBoundingData: maxData,
        data:  [
            {
                value:120,
                itemStyle: {
                    color:'#7f71e2'
                }
            },{
                value:110,
                itemStyle: {
                    color:'#4aa1e1'
                }
            },{
                value:130,
                itemStyle: {
                    color:'#6494db'
                }
            },{
                value:450,
                itemStyle: {
                    color:'#159be4'
                }
            },{
                value:345,
                itemStyle: {
                    color:'#4ebcff'
                }
            },{
                value:784,
                itemStyle: {
                    color:'#05d4b5'
                }
            },{
                value:103,
                itemStyle: {
                    color:'#2fcd97'
                }
            },{
                value:403,
                itemStyle: {
                    color:'#23d2c9'
                }
            },{
                value:563,
                itemStyle: {
                    color:'#80d985'
                }
            },{
                value:132,
                itemStyle: {
                    color:'#a6c34c'
                }
            }
        ],
        z:10
    },{
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.2,
                barBorderRadius: 100
            }
        }, 
        animationDuration: 0,
        symbolRepeat: 'fixed', //使图形元素重复
        symbol: 'rect',
        symbolSize: [50,10],
        symbolBoundingData: maxData,
        data: [
            {
                value:120,
                itemStyle: {
                    color:'#7f71e2'
                }
            },{
                value:110,
                itemStyle: {
                    color:'#4aa1e1'
                }
            },{
                value:130,
                itemStyle: {
                    color:'#6494db'
                }
            },{