ID

28

配置代码

const option = {
        backgroundColor: backgroundColor,
        tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.5)',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    type: 'dashed',
                    color: '#fff',
                },
            },
            textStyle: {
                align: 'left',
                color:'#fff'
            },
            formatter:(params)=>{
                param=params[0];
                return param.seriesName+param.value
            }
        },
        grid: {
            top: '5%',
            left: '5%',
            right: '5%',
            bottom: '8%',
            containLabel: true,
            show: true,
            borderColor: 'transparent',
            backgroundColor: 'rgba(25, 163, 209,0.08)',
        },
        xAxis: [
            {
                type: 'category',
                data: categoryData,
                axisTick: {
                    show: false, // 是否显示坐标轴轴线
                },
                axisLabel: {
                    color: '#fff',
                },
                splitLine: {
                    show: false,
                },
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。
                    show: true,
                    inside: false,
                    lineStyle: {
                        color: '#0e7675',
                    },
                },
            },
        ],
        yAxis: [
            {
                type: 'value',
                splitNumber: 4,
                splitLine: { show: false },
                axisLabel: {
                    //坐标轴刻度标签的相关设置。
                    show: true,
                    formatter: (val) => {
                        return val;
                    },
                    textStyle: {
                        color: '#fff',
                    },
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(25, 163, 209,0.1)',
                        type: 'solid',
                    },
                },
                show: true,
            },
        ],
        dataZoom: [
            {
                show: false,
                xAxisIndex: [0],
                left: 0,
                bottom: 30,
                start: 1,
                end: 100,
                handleSize: '100%',
                handleStyle: {
                    color: '#5B3AAE',
                },
                textStyle: {
                    color: 'rgba(204,187,225,0.5)',
                },
                fillerColor: 'rgba(67,55,160,0.4)',
                borderColor: 'rgba(204,187,225,0.5)',
            },
            {
                type: 'inside',
                show: true,
                start: 1,
                end: 100,
            },
        ],
        series: [
            {
                name: nameArr,
                type: 'line',
                smooth: smooth,
                showSymbol: showSymbol,
                symbol: 'circle',
                symbolSize: 16,
                markPoint: {
                    data: markPointData
                },
                itemStyle: {
                    color: (params) => {
                        if (params.value <= max) {
                            return {
                                type: 'radial',
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: color,
                                    },
                                    {
                                        offset: 0.5,
                                        color: color,
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'transparent',
                                    },
                                    {
                                        offset: 0.9,
                                        color: 'transparent',
                                    },
                                    {
                                        offset: 0.9,
                                        color: color,
                                    },
                                    {
                                        offset: 1,
                                        color: color,
                                    },
                                ],
                            };

完整示例代码