如何在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樣式的示例代碼：

 .echarts_container .echarts {
 border-radius: 5px;
 }
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/237972.html