# Vue ECharts 3D Components

一组基于Vue 3和ECharts的可视化组件库，提供丰富的图表组件供您在项目中使用。

## 组件列表

- **PieEcharts**: 3D饼图组件，支持自定义图片背景和图例位置
- **WordCloud**: 3D词云组件，支持自定义标签、样式和动画

## 安装

```bash
npm install vue-echarts-3d-components
```

## 依赖

该组件库依赖以下库：

- Vue 3
- ECharts 5.x
- ECharts-GL (用于3D效果)

请确保在使用前安装这些依赖：

```bash
npm install vue echarts echarts-gl
```

## 使用方法

### 全局注册

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import VueEcharts3DComponents from 'vue-echarts-3d-components'
import 'vue-echarts-3d-components/dist/style.css'

const app = createApp(App)
app.use(VueEcharts3DComponents)
app.mount('#app')
```

### 局部引入

```javascript
import { PieEcharts, WordCloud } from 'vue-echarts-3d-components'
import 'vue-echarts-3d-components/dist/style.css'

export default {
  components: {
    PieEcharts,
    WordCloud
  }
}
```

## 组件详情

### PieEcharts 3D饼图组件

#### Props

- `pieData`: 饼图数据，格式为数组，每个元素包含`name`和`value`字段
- `pieImage`: 饼图中心的图片URL
- `pieImageOpacity`: 图片透明度，范围0-1
- `pieImageWidth`: 图片宽度
- `pieImageHeight`: 图片高度
- `pieImageRotate`: 图片旋转角度
- `legendPosition`: 图例位置，可选值：'top', 'bottom', 'left', 'right', 'none'

#### 示例

```vue
<PieEcharts 
  :pieData="[{
    name: '类别1',
    value: 30
  }, {
    name: '类别2',
    value: 50
  }, {
    name: '类别3',
    value: 20
  }]"
  :pieImage="'/path/to/image.png'"
  :pieImageOpacity="0.8"
  :pieImageWidth="100"
  :pieImageHeight="100"
  :pieImageRotate="0"
  legendPosition="right"
/>
```

### WordCloud 3D词云组件

#### Props

- `tags`: 词云标签数据，格式为数组，每个元素包含`name`(名称)、`value`(权重)、`color`(颜色)等字段
- `options`: 词云配置项

#### 示例

```vue
<WordCloud 
  :tags="[{
    name: 'Vue',
    value: 80,
    color: '#42b883'
  }, {
    name: 'ECharts',
    value: 70,
    color: '#5470c6'
  }, {
    name: '可视化',
    value: 60,
    color: '#91cc75'
  }]"
  :options="{}"
/>
```

## 开发和构建

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build
```

## 许可证

MIT