柱图参考

  如上所示的柱图，良品入库是渐变的颜色，划过的阴影也是渐变，参数没啥可说的，仅仅参考就行。

options() {
    let ths =this
    return {
        backgroundColor:'',
        tooltip: {
            backgroundColor: '#fff',//提示框的背景色
            position: function (point, params, dom, rect, size) {
                var x = 0; // x坐标位置
                var y = 0; // y坐标位置
                // 当前鼠标位置
                var pointX = point[0];
                var pointY = point[1];
                // 提示框大小
                var boxWidth = size.contentSize[0];
                var boxHeight = size.contentSize[1];

                // boxWidth > pointX 说明鼠标左边放不下提示框
                if (boxWidth > pointX) {
                    x = pointX + 10;
                } else { // 左边放的下
                    x = pointX - boxWidth - 10;
                }

                // boxHeight > pointY 说明鼠标上边放不下提示框
                if (boxHeight > pointY) {
                    y = 5;
                } else { // 上边放得下
                    y = pointY - boxHeight;
                }
                return [x, y];
            },
            trigger: 'axis',
            textStyle: {
                color: 'black',
            },
            axisPointer: {
                type: 'shadow',
                shadowStyle:{//划过柱子时阴影颜色   右/下/左/上
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        { offset: 0, color: 'rgba(169, 161, 255,1)' },
                        // { offset: 0.7, color: '#DAD3F6' },
                        { offset: 1, color: 'rgb(161, 124, 177,0.3)' }
                    ])
                },
                z:-20,
                label: {
                    formatter: function (params) {
                        var xvalue = params.value;
                        for (var i = 0; i < ths.xdata.length; i++) {
                            if (ths.xdata[i] == xvalue) {
                                ths.nowIndex = i;
                                break;
                            }
                        }
                    }
                }
            },
            formatter: function (params) {
                let nowDelayFinish = ths.tipsData[ths.nowIndex].nowDelayFinishsMonthData;
                let nowDelay = ths.tipsData[ths.nowIndex].nowDelaysMonthData;

                let str =
                    '<div style="display:flex;flex-direction:row;align-item:center;padding:0px 10px;border-radius: 10px;line-height: 1.2;">'+
                    '<div>' +
                    '<div style="font-size: 10px;text-align:left;">'+'<span style="width: auto;display:inline-block;">总投入：</span>' + nowDelayFinish+ths.unit+'</div>' +
                    '<div style="font-size: 10px;text-align:left;">'+'<span style="width:10px;height:10px;display:inline-block;background-color:#97FFF3;margin-right:5px;"></span>'+'<span style="width: auto;display:inline-block;">良品入库：</span>' + nowDelayFinish+ths.unit+'</div>' +
                    '<div style="font-size: 10px;text-align:left;">'+'<span style="width:10px;height:10px;display:inline-block;background-color:#2AA0D3;margin-right:5px;"></span>'+'<span style="width: auto;display:inline-block;">Reject入库：</span>' + nowDelay+ths.unit+'</div>' +
                    '<div style="font-size: 10px;text-align:left;">'+'<span style="width:10px;height:10px;display:inline-block;background-color:#C26FFF;margin-right:5px;"></span>'+'<span style="width: auto;display:inline-block;">差异数量：</span>' + nowDelay+ths.unit+'</div>' +
                    '<div style="font-size: 10px;text-align:left;">'+'<span style="width:10px;height:2px;display:inline-block;background-color:#FFA4F6;margin-right:5px;"></span>'+'<span style="width: auto;display:inline-block;">差异率：</span>' + nowDelay+ths.unit+'</div>' +
                    '</div>'+
                    '</div>';
                return str;
            }
        },

        legend: {
            data: ['良品入库','Reject入库', '差异数量','差异率'],
            show:true,
            right:"3%",
            itemGap:30,//图例间距离
            itemWidth:15,//图例的图标宽度
            textStyle:{
                color:"#FFF",//文字颜色
            },
        },
        grid: {
            top:'10%',
            left: '3%',
            right: '4%',
            bottom: '30%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ths.xdata,
                axisLabel:{
                    textStyle: {
                        color: '#fff',
                        fontSize: ths.fontChart(1.5),
                    },
                },
                axisLine:{
                    lineStyle:{
                        color:'#242B41'
                    }
                },
                axisTick:{
                    show:false   //刻度线
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 2500,
                interval: 500,
                axisLabel: {//轴标签
                    textStyle: {
                        color: '#fff',
                        fontSize: ths.fontChart(1.5),
                    }
                },
                axisLine:{//轴线
                    show:false
                },
                splitLine: {//分割线
                    lineStyle: {
                        type: 'solid',//y轴分割线类型
                        color: '#808080',
                        width: '1',//坐标线的宽度
                    }
                },
                axisTick:{
                    show:false   //刻度线
                }
            },
            {
                type: 'value',
                min: 0,
                max: 20,
                interval: 5,
                yAxisIndex: 1,
                axisLabel: {//轴标签
                    textStyle: {
                        color: '#fff',
                        fontSize: ths.fontChart(1.5),
                    },
                    formatter: '{value}%'
                },
                axisLine:{//轴线
                    show:false
                },
                splitLine: {//分割线
                    show:false,
                    lineStyle: {
                        type: 'solid',//y轴分割线类型
                        color: '#808080',
                        width: '1',//坐标线的宽度
                    }
                },
                axisTick:{
                    show:false   //刻度线
                }
            }
        ],
        series: [
            {
                name: '良品入库',
                type: 'bar',
                stack: 'now',
                barWidth: 10,
                emphasis: {
                    // focus: 'series'
                },
                itemStyle: {//自定义颜色
                    // normal: { color: "#97FFF3" },
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#97FFF3' },
                        // { offset: 0.5, color: '#DAD3F6' },
                        { offset: 1, color: '#4C5E80' }
                    ])
                },
                data: ths.nowFinishsMonthData
            },
            {
                name: 'Reject入库',
                type: 'bar',
                stack: 'now',
                barWidth: 10,
                emphasis: {
                    // focus: 'series'
                },
                itemStyle: {//自定义颜色
                    normal: { color: "#2AA0D3" },
                },
                data: ths.nowFinishsMonthData
            },
            {
                name: '差异数量',
                type: 'bar',
                barWidth: 5,
                stack: 'now',
                emphasis: {
                    // focus: 'series'
                },
                itemStyle: {//自定义颜色
                    normal: { color: "#C26FFF" },
                },
                data: ths.lastFinishsMonthData
            },
            {
                name: '差异率',
                type: 'line',//折线图
                areaStyle: {//展示区域面积
                    color:'rgba(255, 164, 246,0.2)'
                },

                emphasis: {
                    // focus: 'series'
                },
                itemStyle: {//自定义颜色
                    normal: { color: "#FFA4F6" },
                },
                data: ths.lastFinishsMonthData
            },
        ]
    }
},