如何在Apache ECharts图表外围添加边框？

当然可以直接给ECharts图表添加边框，有两种常用方案，根据你的需求选择：

方案1：给绘图区域（Grid）添加边框 #

如果只需要给坐标轴包裹的绘图区域加边框，直接配置grid组件的边框属性即可：

option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true, // 避免标签被边框裁剪
    borderWidth: 2,     // 边框宽度，设为0则隐藏
    borderColor: '#cccccc' // 边框颜色，可自定义
  },
  // 你的其他图表配置
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }]
};

这个方案的边框会围绕图表的核心绘图区域，适合只需要给数据展示部分加边框的场景。

方案2：给整个图表容器添加边框 #

如果需要给包含标题、图例在内的整个图表区域加边框，使用graphic组件绘制一个覆盖整个容器的矩形边框：

option = {
  title: {
    text: '示例图表'
  },
  legend: {
    data: ['销量']
  },
  graphic: [{
    type: 'rect',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    style: {
      fill: 'none',        // 填充设为透明，只显示边框
      stroke: '#666',      // 边框颜色
      lineWidth: 2         // 边框宽度
    }
  }],
  // 你的其他图表配置
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }]
};

graphic组件可以自由绘制图形，这里的矩形会完全覆盖图表容器，实现整个图表外围加边框的效果。

如果之前尝试没成功，大概率是没精准配置到grid或graphic的属性，这两个方案都不需要依赖外部表格，直接通过ECharts自身配置就能实现。

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