设置 Highcharts 面积图渐变色

先看效果:

本来找了很多博客还是找到解决方案,最后靠着bing来解决了

直接上代码了

{
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: ''
                    },
                    credits: {
                        text: "",
                        href: "",
                        //position: {
                        //    align: 'center',
                        //    verticalAlign:"middle",
                        //    x: 10
                        //}
                    },
                    xAxis: {
                        categories: [
                            '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                        ],
                        crosshair: true
                    },
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value}',
                            style: {
                                color:'#333'// Highcharts.getOptions().colors[2]
                            }
                        },
                        title: {
                            text: '',
                            style: {
                                color: Highcharts.getOptions().colors[2]
                            }
                        },
                        opposite: true
                    }, { // Secondary yAxis
                        gridLineWidth: 0,
                        title: {
                            text: '',
                            style: {
                                color:"#333"// Highcharts.getOptions().colors[0]
                            }
                        },
                        labels: {
                            format: '{value}',
                            style: {
                                color:"#333"// Highcharts.getOptions().colors[0]
                            }
                        }
                    }],
                    tooltip: {
                        shared: true
                    },
                    plotOptions: {                        
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, '#f5222d'],
                                   
                                    [1, '#f5222d00']      //这里就是设置渐变色的代码
                                ]
                            },
                        }
                    },
                    
                    series: [ {
                        name: '海平面气压',
                        type: 'line',
                        yAxis: 0,
                        data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
                        marker: {
                            enabled: false
                        },
                        //dashStyle: 'shortdot',
                        tooltip: {
                            //valueSuffix: ' mb'
                        }
                    },
                        {
                            name: '降雨量',
                            type: 'area',
                            yAxis: 1,
                            marker: {
                                enabled: false
                            },
                            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                            tooltip: {
                                //valueSuffix: ' mm'
                            },
                            color:"#f5222d1f"
                        }
                    ]
                },

记录一下

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值