echarts 不规则柱状图设置

echarts 不规则柱状图设置 pictorialBar和bar的应用

1、长方形渐变柱子应用type=‘bar’的普通柱状图配置；
2、上面的圆形则需要用type=‘pictorialBar’的不规则柱状图配置，配置这种类型的柱状图可设置柱状图图形标记类型 symbol ，symbol可支持base64图片路径，路径配置如下：

'image://http://xxx.xxx.xxx/a/b.png'

3、图形配置好后可通过 symbolSize 设置大小，可支持数字（number）类型和数组（array）类型；
symbolPosition 设置图形定位位置，可取值：

• ‘start’：图形边缘与柱子开始的地方内切。
• ‘end’：图形边缘与柱子结束的地方内切。
• ‘center’：图形在柱子里居中。
  symbolOffset 设置图形相对于原本位置的偏移，支持数组（array）类型 如：[0, 0]。

示例：

series:[{
    
    
	name: '服务',
    type: 'bar',
    barWidth:6,
    barGap:'90%',
    stack:'three',
    itemStyle:{
    
    
        color:new that.$echarts.graphic.LinearGradient(
               0, 0, 0, 1,
               [
                  {
    
    offset: 0, color: '#D79442'},
                  {
    
    offset: 0.3, color: '#D69442'},
                  {
    
    offset: 0.5, color: '#8A5E55'},
                  {
    
    offset: 0.7, color: '#291C6F'},
                  {
    
    offset: 1, color: '#0A0A52'}
               ]
          ),
       },
  data: that.dataX,
},{
    
    
	name: '服务',
	type: 'pictorialBar',
    symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACoUlEQVRIia2Wz08TQRTHP7udxUJbEkgkwYSEpKEYL4Rw5GAiByMarkTlLn8FKH8B8aR3JXolpuGgiR44Eo0X5UcTbhJIINg2Vnd21kNnto9taTU6ycvb3Zn5fuc7M++99Z42rtGjeT36426dqgeoJ0x+j4WPU+9dCSSQn/KSSAIb4RH9bQRusi8sk/KSwACR8J59NvY57qRAAmeAwI5R9l0SRIC2Ftp31xI1jsDJd+AK6LMWWK9svwPQwC8L7tvn9BbFUoFcfR9wBcjmaqow/3HkYa6m5pX2iwBamUo9r8vl6eOX9byu0vlsIgDPXlMH7FabBfpLu4Xx2crQM6X9Eh2aVmZvu3i2vDdZPQR+AA2hKgKMvCFOgQL6cjVVcOCVI4+l9YCx5X7GlvtZWg+oHHko7ZdmK0PPC9+DwdQ2JrhuTx2J2//gzqeRB0r7pYMjj7m1LJs7Aed1j/O6x+ZOwNxalv1vPkr7E7c/X71P60JkBF5yaI4kOeR8Vd0FePxKcVptD+bTqseT1xkA7FgHLq8zaQXJdgWhPwnw4etlwQ7vvzT7lPYnaQ/INgV/3UycLFRfNsYRpHOLCQOzC3Dz+qVzuXUjbKIrU6GVMi7kJ6nAhXkE6HpelwFWFyOGC+0Jc7gQs7rYDF47VtNKHckEqUCGf7g1dbKhldmfGDW8W2mwMBMyOBAzOBCzMBPydqXBxKhBK3OwNXWyQfPuO5JEwb8G2v528exRt0BzBC4GJIlMFUv5mrqX0f44QKTMYS2v35Snj1/YVNEAflpzKiIglgSSRCY7l/A6JbvQrtjZBXBEsovFRMQ3B9QrXTuTh9yxHqQJYjvxTwqOEZY0SRDTqkqyHPqWJB2UslRKL3ekTYG88LIM/reinyZyqrq1rr8tvwGxgC8LwXp1swAAAABJRU5ErkJggg==',
	symbolSize:20,
    symbolPosition:'end',
    symbolOffset:['57%','-70%'],
    data: that.dataXX,
}]