echarts条形图渐变色

要在echarts条形图中使用渐变色，可以使用echarts内置的渐变色生成器或者通过配置color属性来实现。

第一种方法是使用echarts内置的渐变色生成器，可以通过设置itemStyle的color属性来实现。具体的配置如下：

series: [{
  type: 'bar',
  data: this.rank.num,
  barWidth: '10%',
  itemStyle: {
    normal: {
      color: new echarts.graphic.LinearGradient(
        0, 0, 0, 1, // 渐变色的起止位置，这里表示从正上方开始
        [
          { offset: 0, color: '#000' },
          { offset: 0.5, color: '#888' },
          { offset: 1, color: '#ddd' }
        ] // 数组，用于配置颜色的渐变过程
      )
    }
  }
}]

第二种方法是通过配置color属性来实现渐变色。具体的配置如下：

series: [{
  type: 'bar',
  barWidth: 12,
  data: this.justice.num,
  itemStyle: {
    barBorderRadius: [0, 20, 20, 0],
    color: new this.$echarts.graphic.LinearGradient(
      0, 0, 1, 0, // 渐变色从左到右
      [
        { offset: 0, color: '#FFF1AD' },
        { offset: 1, color: '#FC5090' }
      ]
    )
  },
  label: {
    normal: {
      show: true,
      lineHeight: 10,
      formatter: '{c}',
      position: 'right',
      textStyle: {
        color: '#fff',
        fontSize: 10
      }
    }
  }
}]

这样就可以在echarts条形图中使用渐变色了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [echarts实现渐变色](https://blog.csdn.net/Mweb_demo/article/details/102551377)[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: 33.333333333333336%"]
- *2* [【echarts】横向柱状图（条形图）渐变色，手把手教学](https://blog.csdn.net/weixin_44070058/article/details/124613389)[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: 33.333333333333336%"]
- *3* [echarts柱状图、饼状图、条形图](https://download.csdn.net/download/u011237294/8648305)[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: 33.333333333333336%"]
[ .reference_list ]