rg-echarts

rg-echarts

:chicken: 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.