// AntV G2 动态柱状图配置示例
const antVBarConfig = {
  type: 'interval',
  xField: 'technology',
  yField: 'usage',
  color: '#5B8FF9',
  label: {
    position: 'middle',
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  meta: {
    usage: {
      alias: '使用率(%)',
    },
  },
}

const antVBarData = [
  { technology: 'React', usage: 85 },
  { technology: 'Vue', usage: 65 },
  { technology: 'Angular', usage: 45 },
  { technology: 'Svelte', usage: 25 },
  { technology: 'Next.js', usage: 70 },
  { technology: 'Nuxt.js', usage: 30 },
]

// 数据采样示例
function sampleData(data: any[], maxPoints: number = 1000) {
  if (data.length <= maxPoints) return data
  const step = Math.ceil(data.length / maxPoints)
  return data.filter((_, index) => index % step === 0)
}

// 使用采样后的数据
const sampledData = sampleData(originalData, 1000)

// 监听窗口大小变化
useEffect(() => {
  const handleResize = () => {
    chart.resize()
  }
  window.addEventListener('resize', handleResize)
  return () => window.removeEventListener('resize', handleResize)
}, [])

// 深色主题示例
const darkTheme = {
  background: '#1a1a1a',
  textColor: '#ffffff',
  axis: {
    ticks: {
      text: {
        fill: '#ffffff',
      },
    },
  },
}