备选正负条形图表echarts pictorialBar配置项内容和展示

      option = {
    backgroundColor: '#222',
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['支出', '收入'],
        textStyle: {
            color: '#fff',
            fontWeight: 300,
            fontSize: 14,
            fontFamily: 'PingFangSC'
        }
    },
    grid: [{
        height: 400,
        width: 510
    },{
        height: 400,
        width: 520
    }, {
        width: 510,
        top: 85,
        height: 375
    }],
    xAxis : [
        {
            type : 'value',
            axisLine: {
                lineStyle: {
                    color: '#44FCF7'
                }
            },
            axisLabel: {
                color: '#06D3CD',
                fontWeight: 300,
                fontSize: 14,
                fontFamily: 'PingFangSC'
            },
            axisTick: {
                inside: true,
                lineStyle: {
                    color: '#44FCF7'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#00566D'
                }
            }
        },{
            gridIndex: 1,
            axisLine: {
                lineStyle: {
                    color: '#44FCF7'
                }
            }
        }, {
            gridIndex: 2,
            axisLine: {
                lineStyle: {
                    color: '#44FCF7'
                }
            }
        }
    ],
    yAxis : [
        {
            type : 'category',
            axisTick : {show: false},
            axisLabel: {
                color: '#06D3CD',
            },
            axisLine: {
                lineStyle: {
                    color: '#3697AD'
                }
            }
        },{
            gridIndex: 1,
            axisLine: {
                lineStyle: {
                    color: '#00566D'
                }
            }
        }, {
            gridIndex: 2,
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisTick: {
                lineStyle: {
                    color: '#44FCF7'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#00566D'
                }
            },
            axisLabel: {
                color: '#06D3CD',
                formatter: (params)=>{
                    return '{marginTop| '+params+'}'
                },
                rich: {
                    marginTop: {
                        padding: [0, 0, -28, 0],
                        fontWeight: 300,
                        fontSize: 14,
                        fontFamily: 'PingFangSC'
                    }
                }
            }
        }
    ],
    series : [
        {
            name:'收入',
            type:'pictorialBar',
            stack: '扫描量',
            symbolRepeat: 'fliex',
            symbolSize: 10,
            itemStyle: {
              color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#37FFF9' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(0,222,215,0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }  
            },
            data:[320, 302, 341, 374, 390, 450, 420]
        },
        {
            name:'支出',
            type:'pictorialBar',
            stack: '扫描量',
            symbolRepeat: 'fliex',
            symbolSize: 10,
            data:[-120, -132, -101, -134, -190, -230, -210],
            itemStyle: {
              color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#FF5624' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(255,86,36,0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }  
            },
        }
    ]
};