1.1.2 • Published 7 years ago

creams-echarts v1.1.2

Weekly downloads
1
License
MIT
Repository
-
Last release
7 years ago

creams-echarts

标签(空格分隔): creams-echarts


文件

├── es6                     # 源码
│   ├── echartsClass        # 图表基础合成类
│   └── ecchartsDefault     # 图表类型的基础参数
│   ├── echartsModules      # 图表的依赖包导出
│   └── selectionECcharts   # 选择图表导出的函数
│   ├── utils               # 基础工具验证函数
│   └── index.js            # 导出的createECharts函数
├── lib
│   └── index.js            # 导出的createECharts函数

简介

基于echarts 4.0.4版本封装,功能简单,只是写法封装了一遍简易的

Todo

后期有时间可能优化图表的加载顺序,避免一个页面同时加载多图表产生的尴尬问题

update

1.将创建图表的 create 函数改名为 createECharts 避免与其他库的create函数重复

example for:

    import React, { Component } from 'react';
    import createECharts from 'creams-echarts';
    class Echarts extends Component {
        constructor(props) {
            super(props);
            this.creamsECharts = null;
        }
        componentDidMount() {
            this.creamsECharts = createECharts({
                type: {
                    // 必填图表类型
                    mainType: 'bar',
                    // 可选其他图表功能
                    subType: ['title', 'line'],
                },
                // dom元素
                model: this.bar,
                // 绑定的事件
                events: {
                    // gegtOption会获取返回每一次都更新后的数据
                    getOption: this.getOption,
                    click: this.handleClickCanvas,
                },
            });
            // 模仿异步请求数据
            setTimeout(this.changeData, 2000);
        }
        changeData = () => {
            this.creamsECharts.config({
                series: [
                    {
                        type: 'bar',
                        barMaxWidth: '10',
                        name: '间',
                        data:[10, 52, 200, 334, 390, 330, 220],
                    },
                ],
                xAxis: {
                    data:
                        ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
                },
            });
        }
        getOption = (option) => {
            console.log('获取到option', option);
        }
        handleClickCanvas = (params) => {
            console.log('点击', params);
        }
        render() {
            <div
              style={{ width: "600px", height: '600px' }}
              ref={(bar) => { this.bar = bar; }}
            />
        }
    }

封装的图表类型

    (如需要其他请告知添加)
    type: line/pie/bar
    subType: legendScroll/tooltip/title/tree
1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago