VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Feature] 框选在空白区域时不选中内容

Open purpose233 opened this issue 1 year ago • 1 comments

What problem does this feature solve?

当前刷选操作刷选在空白数据时,startValue 和 endValue 会变成第一个数值,期望能够提供一个配置项来控制这一默认表现,在操作空白区域时 dataZoomChange 不触发。

What does the proposed API look like?

  • emptyBrush: 'none' | 'closestValue'

spec

const spec = {
  type: 'line',
  data: {
    values: [
{time: 1720339200000, value: 7, legend: '优秀'},
{time: 1720339800000, value: 37, legend: '优秀'},
{time: 1720340400000, value: 10, legend: '优秀'},
{time: 1720341000000, value: 37, legend: '优秀'},
{time: 1720341600000, value: 37, legend: '优秀'},
{time: 1720342200000, value: 37, legend: '优秀'},
{time: 1720342800000, value: 3, legend: '优秀'},
{time: 1720343400000, value: 37, legend: '优秀'},
{time: 1720344000000, value: 3, legend: '优秀'},
{time: 1720345800000, value: 3, legend: '优秀'},
{time: 1720346400000, value: 37, legend: '优秀'},
{time: 1720347000000, value: 37, legend: '优秀'},
{time: 1720347600000, value: 3, legend: '优秀'},
{time: 1720348200000, value: 37, legend: '优秀'},
    ]
  },
  xField: 'time',
  yField: 'value',
  axes:[
    {
    orient:'bottom',
    type: 'time',
    layers: [
      {
        // 格式化x时间轴
        timeFormat: '%m/%d %H:%M',
      },
    ],
    min:1720334200000,
    max:1720349800000
  }
  ],
  brush:{
    visible: true,
    brushType: 'x',
        // 开启后默认关联所有axis/dataZoom
        zoomAfterBrush: true,
        brushMoved: false, // 选框是否可被平移
        delayType: 'throttle',
        style: {
          shadowColor: '#1664FF1A',
          lineWidth: 0.5,
        },
  },
        dataZoom: [
        {
          orient: 'bottom',
          showDetail: false,
          visible: false,
        },
      ],
 crosshair: {
        xField: {
          visible: true,
          line: {
            type: 'line',
          },
        },
      },
      point:{
        style:{
          size:4
        },
         state: {
          dimension_hover: {
            size: 10,
          },
        },
      },
  tooltip:{
   dimension:{
    visible: (a, b, c) => {
      return a[0].value > 1720339200000 && a[0].value < 1720348200000;
    },
      title: {
            valueTimeFormat: '%Y-%m-%d  %H:%M:%S',
          },
          content: {
            key: (datum) => datum.legend,
            value: (datum) => {
              return datum.value;
            }
          },
    }
  },
  line: {
    style: {
      lineWidth: 2
    }
  },
  legends: { visible: true }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
vchart.on('dataZoomChange', (args) => {
      console.log(args.value);
    });
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

purpose233 avatar Jul 10 '24 09:07 purpose233

@purpose233 spec 也更新一下吧

xile611 avatar Jul 10 '24 09:07 xile611