使用Echarts生成的折线图,在折线图最外部加一个边框将图括起来

Question

需求

使用Echarts生成的折线图,在折线图最外部加一个边框将图括起来

当前

我想要达到的结果

Answer 1

要是必须在echarts里加，就多画一个网格，用一个柱状图实现

option = {
  grid: [
    {},
    {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }
  ],
  xAxis: [{
    gridIndex: 0,
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }, {
    gridIndex: 1,
    type: 'category',
    show: false,
    data: []
  }],
  yAxis: [{
    gridIndex: 0,
    type: 'value'
  }, {
    show: false,
    gridIndex: 1,
    type: 'value'
  }],
  series: [
    {
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }, {
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: [1],
      type: 'bar',
      barWidth: '100%',
      itemStyle: {
        color: 'transparent',
        borderColor: 'red',
        borderWidth: 1,
      }
    }
  ]
};