Vue3+ECharts5.4.2如何设置图表背景四角圆角半径？

问题描述 #

学习使用ECharts时，想要修改图表背景的四个圆角半径，尝试三种方法均无效：

• 在option根配置中添加borderRadius: [20, 20, 20, 20]
• 直接给ECharts容器设置border-radius样式
• 在ECharts容器外层包裹div并设置该div的圆角

运行环境：

• echarts: 5.4.2
• Vue3

无效方法代码示例 #

方法1：错误的根option配置 #

option = {
  backgroundColor :'#999',
  borderRadius: [20, 20, 20, 20], // 根配置无此属性，无效
  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'
    }
  ]
};

方法2：仅给容器设置圆角（无裁剪） #

<div ref="EnergyCalendar" style="border-radius: 20px;height: 320px; width: 100%;">
</div>

方法3：外层div设置圆角（内层无裁剪） #

<div style="border-radius: 20px;">
  <div ref="EnergyCalendar" style="height: 320px; width: 100%;">
  </div>
</div>

有效解决方案 #

方案1：设置图表网格区域圆角 #

ECharts的核心内容区域由grid配置控制，直接在grid中设置borderRadius即可实现背景圆角：

option = {
  backgroundColor: '#999',
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    borderRadius: 20 // 支持数组分别设置四个角：[左上, 右上, 右下, 左下]
  },
  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'
    }
  ]
};

方案2：设置整个容器圆角（含背景） #

若需要让整个图表容器（包括背景色区域）呈现圆角，需给容器添加overflow: hidden，裁剪超出圆角范围的canvas内容：

<div ref="EnergyCalendar" style="border-radius: 20px; height: 320px; width: 100%; overflow: hidden;">
</div>

配合option中的backgroundColor设置，即可实现完整的容器圆角效果。

原因说明 #

• ECharts根配置不存在borderRadius属性，方法1无效。
• 方法2、3未添加overflow: hidden，ECharts绘制的canvas会超出容器圆角范围，导致视觉上圆角不生效。

内容的提问来源于stack exchange，提问作者nieyuan1980