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

最新推荐文章于 2024-08-01 12:00:00 发布

hst❀

最新推荐文章于 2024-08-01 12:00:00 发布

阅读量2.4k

点赞数 1

分类专栏： echart

本文链接：https://blog.csdn.net/HuangsTing/article/details/102521577

版权

echart 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

代码如下：

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();