vue+highCharts----图表添加渐变色（柱状图、面积图）

最新推荐文章于 2023-11-28 09:45:48 发布

String佳佳

最新推荐文章于 2023-11-28 09:45:48 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/weixin_44171757/article/details/115953917

版权

本文介绍了如何在HighCharts中为柱状图和面积图设置渐变颜色，强调了柱状图使用color属性，而面积图使用fillColor属性。提供了具体的代码示例，展示从浅蓝到深灰的线性渐变效果，并提供在线编辑和测试链接。

摘要由CSDN通过智能技术生成

柱状图和面积图的设置方式一样，唯一不同的是柱状图的设置属性是color，面积图的设置属性是fillColor。具体代码见文章内容。

1、先上效果图：

在这里插入图片描述

2、实现方式：

在线编辑网址，你可以在线编辑，并测试效果

在这里插入图片描述


	    import HighCharts from 'highcharts'

		plotOptions: {
          series: {
            color: {// 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, '#49bdff'],
                [0.2, '#3B5BDF'],
                [0.8, '#303642'],
                [1, HighCharts.Color(HighCharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
              ]
            }
          }
        }