rg-echarts
🐔 Regularjs + Echarts
依赖环境
- regular@0.5.1
- echarts@3.3.2
- lodash@4.17.3
- apm-ui@1.1.0
- tooltip
- 样式引用
安装运行
npm install rg-echarts --save-dev
组件特点
- 独立、可复用 充分发挥regular组件独立、可复用的特性。
- 简单、灵活 前期尽量避免深度抽象数据选项,防止额外增加学习成本,同时也保证图形组件的灵活特性
组件亮点
- 支持图形联动配置
- 支持自定义主题配置
- 数据区域缩放组件配置入口
- 事件配置入口
- 开放图形组件的实例
- 工具栏配置入口
使用案列
HTML
<chart ref="c1" option="{option}" config="{config}" class="col-md-5 echarts"></chart>
JavaScript
this.data.config = {
// 主题设置
theme: 'dark',
// 事件设置
event : {
click : action
},
// 数据区间开关
dataZoom : true,
// 右上角工具栏开关
toolbox : true,
// 组件标识唯一id
name: 'chart1',
// 指定联动的组件,通过唯一标识来指定
link : 'chart2'
}
this.data.option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
BTW: 更多使用请详细参考example的示例。
TO DO
- 丰富示例
- 模拟更多应用场景
- 完善README.md
更改日志
1.0.0
略
1.1.0
- 可直接获取echart的图形实例,不需要借助在setTimeout才能获取实例。
- 添加showLoading、hideLoading、setOption等接口
- 添加on-click组件事件
- 图形联动支持多对多且具备双向特性,同时移除配置中的link、name等配置
- 部分代码优化以及重构
- 添加无数据状态接口
- 修复dataZoom取值为false提示错误的bug
- 支持图形自适应(window的onresize事件)
1.1.1
- 右上角新增tab开关,top可取值为'top'和'average'
- 新增on-tab-select接口,通过top和average字符串值作为区分
- 由于需求和布局,强制移除 dataZoom、toolbox等入口
- 强制legend定位图形底部以及图形title为空
- tooltip支持并新增tooltip提示信息入口,,基于apm-ui@1.1.0的rg-tooltip元件
- 新增折现图demo
- 新增饼图demo
- 组件实例新增resize接口
- 完善example示例
btw: 注意必须加apm-ui作为依赖,否则tips无法正常运行。
注: 涉及变动较多,详细查看example.