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

Love The Way You Lie 2023-01-15 03:45 234阅读 0赞

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

### 1、先上效果图： ###

![在这里插入图片描述][20210421145507885.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]

### 2、实现方式： ###

## [在线编辑网址，你可以在线编辑，并测试效果][Link 1] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]

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')]
                  ]
                }
              }
            }

[20210421145507885.png]: https://img-blog.csdnimg.cn/20210421145507885.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/eaae7bb38890495ea89ae44fffe68017.png
[Link 1]: https://jshare.com.cn/github/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221022/bd0042822d8641d499ea8379a0818533.png