折线区域图echarts #ffffff配置项内容和展示

颜色区域

       // 绘制图表
    let dataIPSxAxis = [
        "00:00",
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        '12:00',
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
        "22:00",
        "23:00",
        "24:00",
    ];
    let dataIPS = [25, 50, 60, 10, 30, 40, 75,100,30,40,10,5,3,20,40,30,40,10];
     option = {
        backgroundColor:'black',
        title: {
            textStyle: {
                fontSize: 12,
                fontWeight: "normal",
                color: "#99c8e7" //标题颜色
            },
            left: "0%"
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                label: {
                    backgroundColor: "#6a7985"
                }
            }
        },
        visualMap: {
            type: 'piecewise',
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [{
                gt: 3,
                lt: 10,
                color: 'rgba(92, 152, 222, 0.87)',
                 normal: {
                        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(28,204,255,0.5)" // 0% 处的颜色
                                },
                                {
                                    offset: 0.5,
                                    color: "rgba(28,204,255,0.3)" // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "transparent" // 100% 处的颜色
                                }
                            ]
                        ) //背景渐变色
                    }

            }]
        },
        grid: {
            left: "5%",
            top: "5%",
            right: "6%",
            bottom: "15%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLine: {
                    show: false,
                },
                data: dataIPSxAxis,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 12,
                    },
                }
            }
        ],
        yAxis: [
            {
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#FFFFFF",
                        width: 1 //这里是为了突出显示加上的
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    //保留网格线
                    show: true,
                    lineStyle: {
                        //y轴网格线设置
                        color: "rgba(255, 255, 255, 0.2)",
                        width: 1,
                        type: "dashed"
                    }
                }
            }
        ],
        series: [
            {
                //  name: '流量 （M）',
                type: "line",
                smooth: true,
                symbol: "none", //去掉折线点
                stack: 100,
                itemStyle: {
                    color: "#1cccff",
                    emphasis: {
                        color: "#1cccff"
                    }
                },
                markLine: {
                    silent: true,
                    symbol: ["none", "triangle"],
                    symbolSize: 5,
                    lineStyle: {
                        color: "#208de8"
                    },
                    label: {
                        show: false
                    },
                    data: [
                        {
                            yAxis: 10000
                        },
                        {
                            yAxis: 20000
                        },
                        {
                            yAxis: 30000
                        },
                        {
                            yAxis: 40000
                        }
                    ]
                },
                lineStyle: {
                    // 系列级个性化折线样式
                    width: 2,
                    type: "solid",
                    color: "#1cccff"
                },
                areaStyle: {},
                data: dataIPS
            }
        ]
    };