对比柱状图echarts value配置项内容和展示

对比柱状图

      var labelData = ['17:00', '16;00', '15:00', '14:00', '13:00', '12:00', '11:00', '10:00', '9:00'];
option = {
    backgroundColor: '#fff',
    legend: {
        data: ['游客流出', '游客流入']
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function(a) {
            var v = a[0];
            return v.name + '<br/>' + v.marker + v.seriesName + '：' + Math.abs(v.value);
        }
    },
    xAxis: [{
        type: 'value',
        min: -100,
        max: 0,
        gridIndex: 0,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            formatter: function(v) {
                return (v * -1)
            }
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false
        }
    }, {
        type: 'value',
        gridIndex: 1,
        min: 0,
        max: 100,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: true
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',
        gridIndex: 0,
        inverse: true,
        data: labelData,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        }
    }, {
        type: 'category',
        gridIndex: 1,
        inverse: true,
        data: labelData,
        axisTick: {
            show: false
        },
        axisLabel: {},
        axisLine: {
            show: false //是否显示轴线
        }
    }],
    grid: [{
        top: 50,
        width: '42%',
        left: 35,
        gridIndex: 0,
    }, {
        top: 50,
        left: '52%',
        right: 35,
        gridIndex: 1,
    }],
    color: ['#2FACFA', '#F5A623'],
    series: [{
            name: '游客流出',
            type: 'bar',
            barWidth: 15,
            gridIndex: 0,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#5de3e1',
                    barBorderRadius: 50,
                    borderWidth: 0,
                    borderColor: '#333',
                    label: {
                        show: true,
                        position: 'left',
                        formatter: function(v) {
                            return (v.value * -1);
                        }
                    }
                }
            },
            data: [-50, -28, -40, -45, -38, -45, -56, -56, -12]
        },
        {
            name: '游客流入',
            type: 'bar',
            barWidth: 15,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#8A3EEB',
                    barBorderRadius: 50,
                    borderWidth: 0,
                    borderColor: '#333',
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function(v) {
                            return v.value;
                        }
                    }
                }
            },
            data: [50, 28, 80, 65, 68, 45, 34, 23, 78]
        }

    ]
};