rg-echarts

    1.1.1 • Public • Published

    rg-echarts

    🐔 Regularjs + Echarts

    依赖环境

    安装运行

    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.

    Keywords

    none

    Install

    npm i rg-echarts

    DownloadsWeekly Downloads

    10

    Version

    1.1.1

    License

    none

    Last publish

    Collaborators

    • wangdong5