问题标题

柱状图如何配置hover时的图元外边框？

问题描述

柱状图如何配置hover时展示的外边框效果？我希望hover时，会出现与图元有一定间隙的外部边框。

解决方案

在bar.state.hover.outerBorder中即可配置lineWidth边框粗细、stroke描边颜色和边框与distance图元的间隙。

代码示例

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 38 }
      ]
    }
  ],
  xField: 'month',
  yField: 'sales',
  bar:{
    state:{
      hover:{
        zIndex:400,
        outerBorder:{
          lineWidth:1, // borderSize
          stroke:'#4e83fd', // borderColor
          distance: 3 // borderSpacing
        }
      }
    }
  }
};

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

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

结果展示

在线效果参考：https://codesandbox.io/p/sandbox/hover-border-wq6lsr?file=%2Fsrc%2Findex.ts%3A23%2C23

问题标题

问题描述

解决方案

代码示例

结果展示

相关文档