@amaster.ai/taro-echarts-ui

ECharts UI components for Taro mini-program with Canvas 2D API support

✨ Features

• ✅ Full ECharts Support - All chart types and components pre-registered
• ✅ Complete Chart Library - Bar, Line, Pie, Scatter, Radar, Map, Tree, Graph, Gauge, Funnel, and more
• ✅ All Components Included - Tooltip, Legend, Grid, DataZoom, VisualMap, Timeline, etc.
• ✅ Taro 3.x & 4.x - Works with both Taro versions
• ✅ Canvas 2D API - Optimized for mini-program Canvas 2D
• ✅ Touch Interaction - Full touch event support with tooltip
• ✅ Cross-Platform - H5 and mini-program (WeChat, Alipay, etc.)
• ✅ TypeScript - Full type definitions included
• ✅ Zero Config - Canvas polyfill and components auto-registered

📦 Installation

npm install @amaster.ai/taro-echarts-ui echarts
# or
yarn add @amaster.ai/taro-echarts-ui echarts
# or
pnpm add @amaster.ai/taro-echarts-ui echarts

Peer Dependencies

{
  "@tarojs/components": "^3.0.0 || ^4.0.0",
  "@tarojs/taro": "^3.0.0 || ^4.0.0",
  "echarts": "^5.5.0 || ^6.0.0",
  "react": "^18.0.0"
}

🚀 Quick Start

import { ECharts } from '@amaster.ai/taro-echarts-ui'
import type { EChartsOption } from 'echarts'

function MyChart() {
  const option: EChartsOption = {
    tooltip: { trigger: 'axis', confine: true },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [
      { 
        type: 'bar', 
        data: [120, 200, 150] 
      }
    ]
  }

  return <ECharts option={option} height="300px" />
}

📖 API

ECharts Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | option | EChartsOption | required | ECharts configuration object | | height | string | '300px' | Chart height (rpx or px) | | className | string | '' | Additional CSS class name |

📄 License

MIT © Amaster Team