echart 折线图 ---- 坐标轴、网格、折线配置

╰半夏微凉° 2023-06-07 03:19 7阅读 0赞

**代码如下：**

var orderNumChart;
    function loaOrderNumChart() { 
        var option = { 
            grid: { 
                left: '3%',
                right: '3%',
                bottom: '15%',
                top: '5%',
                containLabel: true
            },
            xAxis: { 
                type: 'category',
                boundaryGap: false,//0刻度开始
                axisTick: { 
                    show: false//隐藏x坐标轴刻度
                },
                //x轴字体样式
                axisLabel: { 
                    show: true,
                    textStyle: { 
                        color: '#42436A',
                        fontSize:'12',
    
                    }
                },
                //x轴颜色
                axisLine: { 
                    lineStyle: { 
                        color: "#e4e4e4",
                    }
                },
                data: ['5月', '6月', '7月', '8月', '9月', '10月']
            },
            yAxis: { 
                type: 'value',
                axisLine: { 
                    show: false//隐藏y坐标轴
                },
                //y轴字体样式
                axisLabel: { 
                    show: true,
                    textStyle: { 
                        color: '#9495ab',
                        fontSize:'12'
                    }
                },
                //网格样式
                splitLine: { 
                    show: true,
                    lineStyle:{ 
                        color: '#e4e4e4',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisTick: { 
                    show: false//隐藏y坐标轴刻度
                },
            },
            //axisPointer: { //坐标轴指示器，坐标轴触发有效，
                //type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
                //lineStyle: { 
                    //color: 'rgba(101,163,255,0.4)'
                //}
            //},
            //指示器
            tooltip: { 
                trigger: 'axis',
                formatter: "{b}时 : {c}条告警",
                axisPointer:{ 
                    lineStyle: { 
                        color: '#125160'
                    }
                }
            },
            series: [{ 
                data: [2, 4, 5, 8, 6, 2],
                type: 'line',
                symbolSize: 6,//拐点大小
                color:'#5F94FF',//拐点颜色
                //smooth:true,//拐点平滑
                //折线样式
                itemStyle: { 
                    normal: { 
                        lineStyle: { 
                            width: 2,
                            color: '#5F94FF'
                        }
                    }
                },
                //折线下填充渐变颜色
                areaStyle: { 
                    normal: { 
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                offset: 0, color: 'rgba(1,189,213,.6)'
                            }, { 
                                offset: 0.7, color: 'rgba(1,189,213,.2)'
                            }, { 
                                offset: 1, color: 'rgba(1,189,213,.05)'
                            }]
                        ),
                    }
                },
            }]
        };
        orderNumChart = echarts.init(document.getElementById('order-num-chart'));
        orderNumChart.setOption(option);
    }
    loaOrderNumChart();

**效果图：**  
![在这里插入图片描述][20191014094752695.png]  
折线下填充渐变颜色：  
![在这里插入图片描述][20191014100500895.png]

[20191014094752695.png]: /images/20230601/782d911211af4e3b9880cc9856540a4a.png
[20191014100500895.png]: /images/20230601/25f7a286fd21471bb7f9f64d60c667ac.png