双柱曲线图echarts category配置项内容和展示

根据本站大佬的作品做了配色改动

      let checkDate = [1,2,3,4,5];
let checkSuc = [38, 50,40 ,13,32];
let checkFail = [10,18,10,8,9];
let sucPer = [];
for (let i = 0; i < checkDate.length; i++) {
    let suc = checkSuc[i];
    let fail = checkFail[i];
    let sum = suc + fail;
    sucPer.push(((suc / sum) * 100).toFixed(2));
}

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
        backgroundColor: 'rgba(9, 24, 48, 0.5)',
        borderColor: 'rgba(75, 253, 238, 0.4)',
        textStyle: {
            color: '#CFE3FC',
        },
        borderWidth: 1,
    },
    legend: [
        {
            data: ['打卡失败'],
            top: '25',
            x: '10%',
            itemWidth: 14,
            borderColor: 'rgba(255, 192, 0, 1)',
            textStyle: {
                color: '#c1cadf',
                fontSize: 14,
            },
        },
        {
            data: ['打卡成功'],
            top: '25',
            x: '30%',
            itemWidth: 14,
            textStyle: {
                color: '#c1cadf',
                fontSize: 14,
            },
        },
        {
            // series name and legend name should be the same
            data: ['成功率(%)'],
            x: '50%',
            top: '25',
            itemStyle: {
                borderWidth: 2,
            },
            textStyle: {
                color: '#c1cadf',
                fontSize: 14,
            },
        },
    ],
    grid: {
        left: '20px',
        right: '20px',
        top: '50px',
        bottom: '30px',
        containLabel: true,
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            axisTick: {
                show: false,
            },
            data: checkDate,
            axisLine: {
                lineStyle: {
                    color: 'rgba(51, 176, 255, 1)',
                },
            },
            axisLabel: {
                interval: 0,
                color: 'rgba(207, 227, 252, 1)',
                fontSize: 12,
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            axisTick: {
                show: true,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(120, 160, 236, 1)',
                },
                symbol: ['none', 'arrow'],
                symbolSize: [5, 12],
                symbolOffset: [0, 10],
            },
            max: 100,
            axisLabel: {
                interval: 0,
                color: 'rgba(207, 227, 252, 1)',
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(39, 57, 75, 1)',
                    width: 1,
                    type: 'solid',
                },
            },
        },
        {
            type: 'value',
            axisTick: {
                show: true,
            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(207, 227, 252, 1)t',
                },
                symbol: ['none', 'arrow'],
                symbolSize: [5, 12],
                symbolOffset: [0, 10],
            },
            min: 0,
            max: 102,
            axisLabel: {
                interval: 0,
                color: 'rgba(207, 227, 252, 1)',
                formatter: '{value} %',
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(39, 57, 75, 1)',
                    width: 1,
                    type: 'solid',
                },
            },
        },
    ],
    series: [
        {
            // series name and legend name should be the same
            name: '成功率(%)',
            yAxisIndex: 1,
            type: 'line',
            smooth: true,

            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(194, 175, 223, 1)',
                    },
                    {
                        offset: 1,
                        color: 'rgba(98, 227, 255, 0)',
                    },
                ]),
            },
            data: sucPer,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
                normal: {
                    color: '#FFFFFF',
                    borderColor: 'rgba(111, 25, 240, 1)',
                    lineStyle: {
                        color: 'rgba(194, 175, 223,1)',
                    },
                },
            },
        },
        {
            type: 'bar',

            yAxisIndex: 0,
            name: '打卡失败',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(194, 175, 223, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(232, 98, 32, 0)',
                            },
                        ],
                        false
                    ),
                },
            },
            barWidth: 24,
            data: checkFail,
        },
        {
            type: 'bar',

            yAxisIndex: 0,
            name: '打卡成功',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(40, 158, 255, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(32, 178, 232, 0)',
                            },
                        ],
                        false
                    ),
                },
            },
            barWidth: 24,
            data: checkSuc,
        },
    ],
};