如何在echarts柱状图中实现圆角效果？

一、使用echarts图形属性borderRadius实现单一柱状图的圆角效果

在使用echarts绘制柱状图的时候，通过设置图形对象的borderRadius属性，可以实现某一个柱状图的圆角效果。该属性值支持传入单个数值、两个数值以及四个数值。

以下是单个数值的示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    itemStyle: {
      borderRadius: 5 // 设置单个数值
    }
  }]
};

以下是两个数值的示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    itemStyle: {
      borderRadius: [10, 10, 0, 0] // 设置两个数值
    }
  }]
};

以下是四个数值的示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    itemStyle: {
      borderRadius: [10, 10, 0, 0, 0, 0, 10, 10] // 设置四个数值
    }
  }]
};

二、使用echarts图形属性borderRadius实现全局柱状图的圆角效果

如果想要全局设置柱状图的圆角效果，只需要将borderRadius属性设置在全局样式中，而不是单独为某一个柱状图设置。该属性值同样支持传入单个数值、两个数值以及四个数值。

以下是单个数值的示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }],
  itemStyle: {
    borderRadius: 5 // 设置单个数值
  }
};

以下是两个数值的示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }],
  itemStyle: {
    borderRadius: [10, 10, 0, 0] // 设置两个数值
  }
};

以下是四个数值的示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }],
  itemStyle: {
    borderRadius: [10, 10, 0, 0, 0, 0, 10, 10] // 设置四个数值
  }
};

三、使用CSS样式属性border-radius实现全局柱状图的圆角效果

另外一种方式是通过在CSS样式中设置border-radius属性来实现全局的柱状图圆角效果。

以下是CSS样式的示例代码：

  

  
   


  

<script>
  var chart = echarts.init(document.querySelector('.echarts'));
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }]
  };
  chart.setOption(option);
</script>