当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Echarts 折线波峰/高低峰图

Echarts 折线波峰/高低峰图

2020年05月09日  | 移动技术网IT编程  | 我要评论

 

<script src="https://gallerybox.echartsjs.com/dep/echarts/latest/echarts.min.js"></script>

 

 <div id="main" ref="main" style="height:600px;"></div>

 

    var mychart = echarts.init(document.getelementbyid("main"));
            var option = {
                    color: ['#007aff', '#5756d6'],
                    grid: {
                        x: '0',
                        y: '0',
                        width: '100%',
                        height: '100%'
                    },
                    xaxis: [{
                        type: 'category',
                        show: false,
                        splitline: {
                            show: false
                        },
                        boundarygap: false,
                        axisline: {
                            show: true,
                            linestyle: {
                                color: '#dcdcdc'
                            }
                        },
                        axistick: {
                            show: false
                        },
                        data: [
                            '20190723',
                            '20190724',
                            '20190725',
                            '20190726',
                            '20190729',
                            '20190730',
                            '20190731',
                            '20190801',
                            '20190802',
                            '20190805',
                            '20190806',
                            '20190807',
                            '20190808',
                            '20190809',
                            '20190812',
                            '20190813',
                            '20190814',
                            '20190815',
                            '20190816',
                            '20190819'
                        ],
                        axislabel: {
                            color: '#b3b3b3',
                            fontsize: 33.12
                        }
                    }],
                    yaxis: [{
                        type: 'value',
                        z: 3,
                        max: 3.69,
                        min: 3.4,
                        scale: true,
                        show: false
                    }],
                    series: [{
                        type: 'line',
                        linestyle: {
                            width: 1.6560000000000001
                        },
                        showsymbol: false,
                        animation: false,
                        smooth: true,
                        data: [
                            '3.6000',
                            '3.6300',
                            '3.6300',
                            '3.6500',
                            '3.6200',
                            '3.6300',
                            '3.6100',
                            '3.6100',
                            '3.6000',
                            '3.6100',
                            '3.5700',
                            '3.5600',
                            '3.5300',
                            '3.5000',
                            '3.5100',
                            '3.4500',
                            '3.4700',
                            '3.4400',
                            '3.4700',
                            '3.5500'
                        ],
                        areastyle: {
                            origin: 'start',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorstops: [{
                                    offset: 0,
                                    color: '#f50909'
                                },
                                    {
                                        offset: 0.11999999999999922,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 0.11999999999999922,
                                        color: 'transparent'
                                    }
                                ]
                            }
                        }
                    },
                        {
                            type: 'line',
                            linestyle: {
                                width: 0
                            },
                            showsymbol: false,
                            animation: false,
                            smooth: true,
                            data: [
                                '3.6000',
                                '3.6300',
                                '3.6300',
                                '3.6500',
                                '3.6200',
                                '3.6300',
                                '3.6100',
                                '3.6100',
                                '3.6000',
                                '3.6100',
                                '3.5700',
                                '3.5600',
                                '3.5300',
                                '3.5000',
                                '3.5100',
                                '3.4500',
                                '3.4700',
                                '3.4400',
                                '3.4700',
                                '3.5500'
                            ],
                            areastyle: {
                                origin: 'end',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorstops: [{
                                        offset: 0.8,
                                        color: 'transparent'
                                    },
                                        {
                                            offset: 0.8,
                                            color: '#fff'
                                        },
                                        {
                                            offset: 1,
                                            color: '#4657f5'
                                        }
                                    ]
                                }
                            }
                        }
                    ]
                };
            mychart.setoption(option);

 

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网