echarts category配置项内容和展示

配置项如下
      let data = [{
        name: "进场",
        list: [{
                date: "周一",
                value: 20
            },
            {
                date: "周二",
                value: 13
            },
            {
                date: "周三",
                value: 15
            },
            {
                date: "周四",
                value: 18
            },
            {
                date: "周五",
                value: 6
            },
            {
                date: "周六",
                value: 11
            },
            {
                date: "周日",
                value: 14
            }
        ]
    },
    {
        name: "进场",
        list: [{
                date: "周一",
                value: 20
            },
            {
                date: "周二",
                value: 13
            },
            {
                date: "周三",
                value: 15
            },
            {
                date: "周四",
                value: 18
            },
            {
                date: "周五",
                value: 6
            },
            {
                date: "周六",
                value: 11
            },
            {
                date: "周日",
                value: 14
            }
        ]
    }
];
let dateList=[];
let yData1 = [];
let yData2 = [];
data[0].list.forEach(function(item,index){
     dateList.push(data[0].list[index].date);
    yData1.push(data[0].list[index].value);
});
data[1].list.forEach(function(item,index){
    yData2.push(data[1].list[index].value);
});

option = {
    backgroundColor: 'rgb(3, 19, 52)',
    color: ['#2ea5c3', '#e08f68'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },

        formatter: function(params) {
            var tiplabel = params[0].name + '<br/>' +
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color.colorStops[0].color + '"></span>' +
                params[0].seriesName + ':' + params[0].value + '<br/>' +
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[1].color.colorStops[0].color + '"></span>' +
                params[1].seriesName + ':' + params[1].value;
            return tiplabel;
        }
    },
    legend: {
        data: [data[0].name, data[1].name],
        left: 'right',
        icon: "circle",
        textStyle: {
            color: '#fff'
        }
    },
    grid: {
        //top:80,
        left: 10,
        bottom: 20,
        right: 20,
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        data: dateList,
        axisLabel: {
            tooltip: {
                show: true,
            },
            inside: false,
            textStyle: {
                fontSize: 14
            },
            interval: 0,
            color: 'rgba(255,255,255,0.6)'
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#0C1A5B',
            }
        },

    },
    yAxis: [{
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#0C1A5B',
            }
        },
        axisLabel: {
            textStyle: {
                fontSize: 14
            },
            formatter: function(value) {
                return value
            },
            color: 'rgba(255,255,255,0.6)'
        }
    }],
    series: [{
            name: data[0].name,
            yAxisIndex: 0,
            //barMinHeight:5,
            barCategoryGap: '30%',
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        fontSize: 14,
                    },
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#A43EE5'
                    }, {
                        offset: 1,
                        color: '#CE7C13'
                    }]),
                    opacity: 1,
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            type: 'bar',
            data: yData1
        },
        {
            name: data[1].name,
            yAxisIndex: 0,
            //barMinHeight:5,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        fontSize: 14
                    },
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#00FFFF'
                    }, {
                        offset: 1,
                        color: '#004EFF'
                    }]),
                    opacity: 1,
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            type: 'bar',
            data: yData2
        }
    ]
}
    
截图如下