# ui-echarts

**Repository Path**: orelax/ui-echarts

## Basic Information

- **Project Name**: ui-echarts
- **Description**: 基于百度开源的echarts封装的uni-app跨端可视化图表库, 兼容App、H5、小程序等平台
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-11-28
- **Last Updated**: 2025-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ui-echarts

基于百度开源的echarts封装的uni-app跨端可视化图表库

# 平台兼容

| App | H5  | 微信小程序 |
| --- | --- | --------- |
| √   | √   | √         |

其它平台未测试。

### main.js
```js
import uiEcharts from '@/uni_modules/ui-echarts'
Vue.use(uiEcharts)
```


### 用法
```html
<view>
	<ui-echarts ref="chart" :option="option" exportBase64></ui-echarts>
	<image v-if="image" :src="image"></image>
	<button type="primary" size="mini" @click="toImage">导出图片</button>
</view>
```

```js
export default {
	data () {
		return {
			image: null,
			option: {
			  xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  yAxis: {
				type: 'value'
			  },
			  series: [
				{
				  data: [150, 230, 224, 218, 135, 147, 260],
				  type: 'bar'
				}
			  ]
			}
		}
	},
	methods: {
		toImage () {
			this.$refs?.chart.toImageFile({
				/**
				 * tempFilePath 图片路径, H5导出也是base64
				 * base64 图片base64
				 */
				success: ({ tempFilePath, base64 }) => {
					this.image = base64;
				}
			})
		}
	}
}
```

### Props

| 参数             | 说明                           | 类型             | 默认值        |
| --------------- | --------                       | -------          | ------------ |
| option          | 图表配置项                      | Object           | -            |
| width           | 图表宽度                        | String, Number   | '100%'       |
| height          | 图表高度                        | String, Number   | '600rpx'     |
| exportBase64    | 是否转换image本地文件为base64    | Boolean          | false        |