Echarts 柱状图设置柱状图渐变，设置柱状图圆角（弧度）

1. 效果截图

在这里插入图片描述

2. 配置项截图

在这里插入图片描述

3. 具体代码

import * as echarts from 'echarts'

// 项目组织项目数
const territoryOptions = {
  key: 'territory',
  title: {
    text: '项目数',
    textStyle: {
      fontSize: 14
    },
    padding: [20, 32]
  },
  color: ['#A4CDEB', '#F2D378'],
  legend: {
    bottom: '10%'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b} : 数量{c}'
  },
  xAxis: [
    {
      type: 'category',
    
      data: []
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: function(value) {
        return Math.round((value.max + value.max * 0.4) / 10) * 10
      }
    }
  ],
  dataZoom: {
    startValue: 0,
    endValue: 4,
    type: 'slider',
    height: '15px' // 高度设置，另外还有宽度
  },
  series: [
    {
      type: 'bar',
      data: [],
      barWidth: 30,
      emphasis: {
        barBorderRadius: 30
      },
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: {
              // 数值样式
              color: '#6E7079',
              fontSize: 14
            }
          },
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#51e7ff' }, // 底部柱图渐变色
            { offset: 1, color: '#05a6ff' } // 顶部柱图渐变色
          ])
        }
      }
    }
  ]
}