交互式示例 ​

import { useState } from 'react'
import { LineChart } from '@agions/taroviz'

function DynamicDataChart() {
  const [data, setData] = useState(initialData)

  const refreshData = () => {
    setData(prev => prev.map(item => ({
      ...item,
      sales: Math.random() * 200 + 50,
      profit: Math.random() * 150 + 30
    })))
  }

  return (
    <>
      <LineChart data={data} />
      <button onClick={refreshData}>刷新数据</button>
    </>
  )
}

import { LineChart } from '@agions/taroviz'

function ThemeChart() {
  return (
    <LineChart 
      theme="neon"
      data={data}
    />
  )
}

// 或使用主题对象
import { neonTheme } from '@agions/taroviz/themes'

function ThemeChart2() {
  return (
    <LineChart 
      theme={neonTheme}
      data={data}
    />
  )
}

import { LineChart } from '@agions/taroviz'
import { useTheme } from '@agions/taroviz/hooks'

function DarkModeChart() {
  const { isDark, toggleDark } = useTheme()

  return (
    <>
      <button onClick={toggleDark}>
        {{ isDark ? '切换浅色' : '切换暗色' }}
      </button>
      <LineChart 
        :dark-mode="isDark"
        data={data}
      />
    </>
  )
}

import { LineChart } from '@agions/taroviz'

function AnimatedChart() {
  return (
    <LineChart 
      animation={{
        enabled: true,
        duration: 800,
        easing: 'cubicOut'
      }}
      data={data}
    />
  )
}

import { LineChart } from '@agions/taroviz'

function ResponsiveChart() {
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <LineChart 
        autoResize={true}
        data={data}
      />
    </div>
  )
}