# liu-charts

> 仿echarts官网示例的echarts,只需要填入options即可

Latest version **1.0.4** (published 2021-10-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install liu-charts
pnpm add liu-charts
yarn add liu-charts
bun add liu-charts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-10-15 |
| First published | 2021-09-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | log2 |
| Maintainers | log2 |
| Keywords | echarts |

## Links

- npm: https://www.npmjs.com/package/liu-charts
- npm.io page: https://npm.io/package/liu-charts

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2021-10-15
- 1.0.3 — 2021-09-30
- 1.0.2 — 2021-09-29
- 1.0.0 — 2021-09-28

## README

### 适用场景
我们平时在使用 echarts 的时候，我们需要用  echarts.init() 来创建 echart 对象，    
然后还要使用 echart.setoption() 加载参数，    
还要根据屏幕的大小或者外部宽高的变化重新加载，    
使用起来比较麻烦，写法较为复杂    

**现在我们只需要一个组件就可以实现这些功能，我们只需要关心数据的变化即可**
**我们现在对echarts做了一些简单的封装，让新手使用起来非常方便。**
**<font color="red">echarts 版本5.2.1</font>**

### 使用方法
#### 安装
`npm  i liu-charts`
#### 使用方法
```
// main.js中
import LiuCharts from "liu-charts"
Vue.use(LiuCharts)

// 页面上
<liu-charts :options="chartOptions" ref="chart"/>
export default {
	data(){
		return{
			chartOptions:{
				xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
			}
		}
	}
}
```
### 如果需要使用到 echarts对象
`this.$refs.chart.echarts` 
### 如果您想使用图表的chart对象
`this.$refs.chart.chart`

### 主题配置
```
系统配置主题
theme="dark"

或者导入自己的主题 https://echarts.apache.org/zh/theme-builder.html
import theme from "../assets/purplePassion.json"
:theme="theme"
```


### npm地址
`https://www.npmjs.com/package/liu-charts`
### gitee地址
`https://gitee.com/lg2009/liu-charts`

---
_Source: https://npm.io/package/liu-charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._