写个用Echarts 折线波峰/高低峰图
发布日期:2021-09-29 12:54:37 浏览次数:0 分类:技术文章
<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);

 

 

上一篇:小白必备 从git上 clone下来的项目运行
下一篇:ES6的数据分组