设置 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
    评论
Highcharts中,您可以使用变色为3D饼添加视觉效果。在给定的引用代码中,使用官方示例代码创建了变色变色的构建是通过修改Highcharts选项中的颜色数组实现的。首先,使用`Highcharts.getOptions().colors`获取默认颜色数组,然后使用`Highcharts.map()`方法对每个颜色进行处理,并返回一个包含设置的对象。对象中的`radialGradient`属性定义了变的配置,其中`cx`和`cy`表示圆心的位置,`r`表示变的半径。`stops`属性定义了变的颜色范围,包含起始颜色和结束颜色。在示例代码中,结束颜色是通过`Highcharts.Color(color).brighten(-0.3).get('rgb')`方法计算得到的。 但是在使用Vue的热更新时,可能会遇到报错`TypeError: b.indexOf is not a function`。这是因为在第二次加载时,颜色值从字符串变为了一个对象,导致设置颜色值时出现错误。为了解决这个问题,可以对代码进行优化,以确保每次都可以正确获取颜色值。可以使用`instanceof`操作符来判断颜色是否为一个对象。如果是对象,则从对象中获取起始颜色和结束颜色的值,否则直接使用该颜色和通过`Highcharts.Color(color).brighten(0.15).get('rgb')`方法计算结束颜色的值。 通过以上方法,您可以为Highcharts的3D饼添加变色。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [关于vue使用highcharts饼状变色报错问题](https://blog.csdn.net/developer_qi/article/details/124126398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值