[Bug] brushEnd + 动态标注, 首次的框不会消失

[YuiFn]

Version

1.7.2

Link to Minimal Reproduction

https://visactor.io/vchart/demo/line-chart/smoothed-line?keyword=comparison

Steps to Reproduce

监听 brushEnd 事件, 并对圈选的数据进行标注, 使用 updateSpec 更新 makeArea

配置代码如下(使用的是官方的line代码)

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 38
      },
      {
        time: '4:00',
        value: 56
      },
      {
        time: '6:00',
        value: 10
      },
      {
        time: '8:00',
        value: 70
      },
      {
        time: '10:00',
        value: 36
      },
      {
        time: '12:00',
        value: 94
      },
      {
        time: '14:00',
        value: 24
      },
      {
        time: '16:00',
        value: 44
      },
      {
        time: '18:00',
        value: 36
      },
      {
        time: '20:00',
        value: 68
      },
      {
        time: '22:00',
        value: 100
      }
    ]
  },
  xField: 'time',
  yField: 'value',
  line: {
    style: {
      curveType: 'monotone'
    }
  },
  brush: {
    brushType: 'x',
    inBrush: {
      colorAlpha: 1
    },
    outOfBrush: {
      colorAlpha: 0.2
    }
  },
  
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();



vchart.on('brushEnd', (params) =>{
  const values = params.value;
  const first = values.inBrushData[1]
  const last = values.inBrushData[values.inBrushData.length -1]
  console.info(first, last,params)
  spec.markArea = [
      {
      coordinates: [
       {
        time: first.time,
        value: 0,
      },
      {
        time: last.time,
        value: 0,
      },
       
      {
        time: last.time,
        value: 'max',
      },
        {
        time: first.time,
        value: 'max',
      },
      ],
      label: {
        text: 'Electricite prices have surged since 2020',
        position: 'insideTop',

        labelBackground:{
          style:{
            fill:"red"
          }
        }
      },
       area: {
        style: {
          fill: 'red',
          fillOpacity: 0.15
        }
      },
    }
  ]
  vchart.updateSpec(spec, true)  
})

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

有几点疑问,

1. 有没有好的可以动态对标注进行CRUD呢?
2. 目前是按照 inBrushData 来获取圈选的数据, 不知道这个是不是符合预期的, 从返回的结果来看, 总是会包含第一个点位. 而outBrushData的数据是符合预期的

Current Behavior

1. 首次圈选的框不会自动取消, 后续的会
2. 返回的inBrushData会包含第一个点的数据

Expected Behavior

能正常取消, 返回真正的圈选的数据

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[YuiFn]

@xile611 感谢那么快就响应了问题

针对这个问题还有几个疑问, 望能解答一下

1. 有没有好的可以动态对标注进行CRUD呢?
2. 目前是按照 inBrushData 来获取圈选的数据, 不知道这个是不是符合预期的, 从返回的结果来看, 总是会包含第一个点位. 而outBrushData的数据是符合预期的