zoukankan      html  css  js  c++  java
  • Echarts 折线波峰/高低峰图

    <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',
                             '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: {
                                 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: {
                                     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);

  • 相关阅读:
    cas 单点登录服务端客户端配置
    POI 导出excel
    关于小米手机刷机亲尝
    C#对本地文件重命名--适用于下载的图片、电视剧等奇怪名字的重命名
    泛型List<T>与非泛型ArrayList
    设置一键启动多文件
    网页显示电子表
    插入sql语句01值时,在数据库中的查询时显示为1
    C#面向对象--继承
    SqlServer数据库查询不同字段-年龄段分析
  • 原文地址:https://www.cnblogs.com/nelsonlei/p/12855824.html
Copyright © 2011-2022 走看看