Echarts 折线图背景渐变色_echarts折线图背景色-CSDN博客

本文链接：https://blog.csdn.net/xiaohuichonga/article/details/129382921

本文介绍了如何在Echarts中为折线图设置背景渐变色，通过示例代码展示了具体的实现过程，帮助读者理解并应用到自己的前端项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在资料上找到类似的,如下:

echarts图表背景色

   option = {
            grid: {//设置图表四周留白间距
                top: '2%',
                right: '2%',
                bottom: '4%',
                left: '4%'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,//设置x轴两边的留白
                axisTick: { //x轴刻度尺
                    show: false
                },
                axisLine: {//x轴线条颜色
                    lineStyle: {
                        color: '#999'
                    }
                },
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                max: 1400,//最大刻度值
                interval: 100,//刻度值间隔值
                splitLine: {//网格线
                    show: false, //关闭网格线
                    // 或者
                    lineStyle: {
                        type: 'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                        color: '#ededed'  //网格线颜色
                    },
                },
                axisLine: {//y轴线条颜色
                    show: true,
                    lineStyle: {
                        color: '#999'
                    }
                },
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,//面积图改成弧形状
                lineStyle: {
                    width: 1,//外边线宽度
                    color: 'red'//外边线颜色
                },
                showSymbol: false,//去除面积图节点圆
                areaStyle: {//区域填充渐变颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(237,66,100, 0.5)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(234,174,10, 1)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }]
        };

在许继项目红外传感器模块中使用自己编写的:

 option = {
            title: {
                text: '单位:度',
                textStyle: {
                    fontSize: 14, // 标题大小
                },
                // left: 'center', // 标题位置
            },
            grid: {//设置图表四周留白间距
                top: '10%',
                right: '6%',
                bottom: '12%',
                left: '6%'
            },
            xAxis: {
                show: true,
                type: 'category',
                boundaryGap: false,//设置x轴两边的留白
                axisTick: { //x轴刻度尺
                    show: false
                },
                axisLine: {//x轴线条颜色
                    lineStyle: {
                        color: '#2B6CB3'
                    }
                },
                data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
            },

            yAxis: {
                type: 'value',
                max: 100,//最大刻度值
                interval: 20,//刻度值间隔值
                splitLine: {//网格线
                    show: true, //关闭网格线
                    // 或者
                    lineStyle: {
                        type: 'solid',    //设置网格线类型 dotted：虚线   solid:实线
                        color: '#2B6CB3'  //网格线颜色
                    },
                },
                axisLine: {//y轴线条颜色
                    show: false,
                    // lineStyle: {
                    //     color: '#999'
                    // }
                },
                // axisLine: {//y轴线的配置
                //     show: true,//是否展示
                //     lineStyle: {
                //         color: "#ECEDF0",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
                //         width: 1,//y轴线的宽度
                //         type: "solid"//y轴线为实线
                //     },
                // }
            },
            series: [{
                data: [1, 10, 100, 20, 15, 90, 23, 10, 20, 40],
                type: 'line',
                // smooth: true,//面积图改成弧形状
                lineStyle: {
                    width: 1,//外边线宽度
                    color: '#00F9DF'//外边线颜色
                },
                // showSymbol: false,//去除面积图节点圆
                areaStyle: {//区域填充渐变颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(0,249,223,1)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(0,135,185,0.11)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }]
        };

无渐变的:

   option = {
             title: {
                text: '单位:度'
            },
            grid: {
                left: '1%',
                 right: '5%',
                 bottom: '8%',
                 containLabel: true
             },
             xAxis: {
                type: 'category',
                data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [0, 20, 40, 60, 80, 100],
                    type: 'line'
                }
            ]
         };

EchartsModule模块(使用):

/**
 * 红外传感器模块监测 -- 图表
 * @author syh
 */

import * as echarts from 'echarts';
import { useEffect } from "react";
import { EchartsBox } from './style';

type EChartsOption = echarts.EChartsOption;

const EchartsModule = () => {

    useEffect(() => {
        const chartDom = document.getElementById('main')!;
        let myChart = echarts.init(chartDom);
        let option: EChartsOption;
     
        option = {
            title: {
                text: '单位:度',
                textStyle: {
                    fontSize: 14, // 标题大小
                },
                // left: 'center', // 标题位置
            },
            grid: {//设置图表四周留白间距
                top: '10%',
                right: '6%',
                bottom: '12%',
                left: '6%'
            },
            xAxis: {
                show: true,
                type: 'category',
                boundaryGap: false,//设置x轴两边的留白
                axisTick: { //x轴刻度尺
                    show: false
                },
                axisLine: {//x轴线条颜色
                    lineStyle: {
                        color: '#2B6CB3'
                    }
                },
                data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
            },

            yAxis: {
                type: 'value',
                max: 100,//最大刻度值
                interval: 20,//刻度值间隔值
                splitLine: {//网格线
                    show: true, //关闭网格线
                    // 或者
                    lineStyle: {
                        type: 'solid',    //设置网格线类型 dotted：虚线   solid:实线
                        color: '#2B6CB3'  //网格线颜色
                    },
                },
                axisLine: {//y轴线条颜色
                    show: false,
                    // lineStyle: {
                    //     color: '#999'
                    // }
                },
                // axisLine: {//y轴线的配置
                //     show: true,//是否展示
                //     lineStyle: {
                //         color: "#ECEDF0",//y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
                //         width: 1,//y轴线的宽度
                //         type: "solid"//y轴线为实线
                //     },
                // }
            },
            series: [{
                data: [1, 10, 100, 20, 15, 90, 23, 10, 20, 40],
                type: 'line',
                // smooth: true,//面积图改成弧形状
                lineStyle: {
                    width: 1,//外边线宽度
                    color: '#00F9DF'//外边线颜色
                },
                // showSymbol: false,//去除面积图节点圆
                areaStyle: {//区域填充渐变颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(0,249,223,1)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(0,135,185,0.11)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }]
        };

        option && myChart.setOption(option);
        return () => {

        }
    }, [])

    return <EchartsBox>
        <div id="main" className="echarts_style"></div>
    </EchartsBox>
}

export default EchartsModule;

效果图: