# vue-echarts3

> Vue component with ECharts.js(v3.x+)

Latest version **1.0.3** (published 2017-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-echarts3
pnpm add vue-echarts3
yarn add vue-echarts3
bun add vue-echarts3
```

## 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.3 |
| Published | 2017-04-04 |
| First published | 2017-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | yongbigang |
| Maintainers | bigang.ybg |
| Keywords | vue2, echarts3, component |

## Links

- npm: https://www.npmjs.com/package/vue-echarts3
- npm.io page: https://npm.io/package/vue-echarts3

## Dependencies (1)

- [echarts](https://npm.io/package/echarts.md) ^3.4.0

## 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.3 (latest) — 2017-04-04
- 1.0.2 — 2017-02-24
- 1.0.1 — 2017-02-23
- 1.0.0 — 2017-02-23

## README

vue-echarts3
==========================

[![npm](https://img.shields.io/npm/dm/vue-echarts3.svg)]()
[![npm](https://img.shields.io/npm/v/vue-echarts3.svg)]()

基于Vue2，echart3封装的图表组件

### Features

* 暂支持柱状图、折线图、饼图
* 简单易用

### Installation

```shell
npm install vue-echarts3 --save
```        

### Usages

```js
import Echarts from 'vue-echarts3';

Vue.component('echarts', Echarts);
```

```html
<echarts
	:title="{'text':'标题'}"
	:options="data"
	:legendShow="['页面PV','页面UV']"
	type="bar"
	className="f-echarts">
</echarts>
```
柱状图options参数(demo)
```js
	data: {
        legend: {
          data: [ '页面PV', '页面UV', '下载PV', '下载UV', '激活量', '注册量' ]
        },
        xAxis: [
          {
            type: 'category',
            data: [ '20170201', '20170202', '20170203', '20170204', '20170205', '20170206', '20170207' ]
          }
        ],
        series: [
          {
            name: '页面PV',
            type: 'bar',
            label: 'emphasis',
            data: [ 320, 332, 301, 334, 390, 330, 2 ]
          }
        ]
      }
```
折线图options参数(demo)
```js
	data: {
        legend: {
          data: [ '页面PV', '页面UV', '下载PV', '下载UV', '激活量', '注册量' ]
        },
        xAxis: [
          {
            type: 'category',
            data: [ '20170201', '20170202', '20170203', '20170204', '20170205', '20170206', '20170207' ]
          }
        ],
        series: [
          {
            name: '页面PV',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [ 320, 332, 301, 334, 390, 330, 2 ]
          }
        ]
      }
```
饼图options参数(demo)
```js
	data: {
        legend: {
          orient: 'vertical',
          x: 'left',
          data: [ '页面PV', '页面UV', '下载PV', '下载UV', '激活量', '注册量' ]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: [ '50%', '70%' ],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '页面PV' },
              { value: 310, name: '页面UV' },
              { value: 234, name: '下载PV' },
              { value: 135, name: '下载UV' },
              { value: 1548, name: '激活量' },
              { value: 548, name: '注册量' }
            ]
          }
        ]
      }
```

### API

##### config

参数名 | 类型 | 默认值 | 备注
------------ | ------------- | ------------ | ---------
title | Object  | - | 图表的标题
className | String  | - | 图表容器的样式
legendShow | Array  | - | 图表tab数据按照传入值显示，不传该参数默认全部显示
type | String  | - | 必填，图表类型，目前柱状图bar，折线图line，饼图pie
options | Object  | - | 必填，控制图表显示的数据(上方已提供demo)
theme | String  | - | 图表主题
initOptions | Object  | - | 图表初始化参数

##### function
* clear() 重置图表组件数据
* refresh() 数据变化后，可手动刷新图表组件

### Issues

Submit the issues if you find any bug or have any suggestion.

### Contribution

Fork the repository and submit pull requests.
	
### Release Notes

see CHANGELOG
	
### LICENSE

[![npm](https://img.shields.io/npm/l/vue-echarts3.svg)]()

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