echarts里给图表添加符合的阴影背景框

可以使用 echarts 的 visualMap 组件来为图表添加符合的阴影背景框。visualMap 组件可以用来呈现数据在某个维度上的视觉映射。下面是一个简单的例子：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    areaStyle: {} // 添加阴影背景框
  }],
  visualMap: {
    show: false,
    dimension: 0,
    pieces: [{
      gt: 4,
      color: 'rgba(255, 0, 0, 0.3)'
    }, {
      lte: 4,
      color: 'rgba(0, 255, 0, 0.3)'
    }]
  }
};

在上面的例子中，我们给折线图添加了阴影背景框，只需要在 series 中的 areaStyle 中添加一个空对象即可。同时，我们使用 visualMap 组件来定义阴影背景框的颜色和分割线位置。我们设置 visualMap 的 dimension 为 0，表示 visualMap 映射的是第一个维度（即 x 轴），然后设置 pieces 数组来设置分割线位置和颜色。在这个例子中，我们设置分割线位置为 4，小于等于 4 的颜色为绿色，大于 4 的颜色为红色。最后，将 visualMap 的 show 属性设为 false 来隐藏 visualMap 组件的显示。