vue-echarts3
基于Vue2,echart3封装的图表组件
Features
- 暂支持柱状图、折线图、饼图
- 简单易用
Installation
npm install vue-echarts3 --save
Usages
; Vue;
柱状图options参数(demo)
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)
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)
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