CEDP 图形库

[TOC]

例子

点击这里查看例子：http://zxhfighter.github.io/fe-demo/。

目前包括如下图形：

• 余弦图（Chord）
• 需求图谱（Demand）
• 转移矩阵（Transfer）
• 中国地图（ChinaMap）
• 字词云（WordCloud）
• 韦恩图（Venn）
• 信息接触点（DecisionTree）

安装

$ npm install -S cedp-gallery

使用方式

$ npm run dist

将代码打包成 UMD 模式，生成的代码在 dist 目录，结构为：

cedp-gallery.css    --- 样式文件
cedp-gallery.js     --- 未压缩脚本
cedp-gallery.min.js --- 压缩脚本

这样 UMD 格式的代码可以运行在：

全局模式（直接访问 Gallery 全局变量）

// 通过 script 标签引入脚本后
new Gallery(options);

commonJS 模式（通过 require('cedp-gallery'))

// gallery 放 node_modules 中
var Gallery = require('cedp-gallery');
new Gallery(options);

AMD 模式（通过 require('cedp-gallery'))

define(function() {
    // gallery 需要配置 AMD 访问路径
    var Gallery = require('cedp-gallery');
    new Gallery(options);
});

ES6 模式（通过 import 访问）

需要注意的是，es6 需要直接引用某个图形，而不是引用整个 Gallery，例如我只想引用图形库中的需求图谱(demand)，那么可以这样做：

import Demand from 'cedp-gallery/src/chart/demand';
new Demand(options);

不能看出，通过 ES6 模式，可以实现更细粒度的代码控制。

另外需要注意，样式不是内联实现，因此需要引入样式文件。

开发调试

$ npm start

这将会打开 http://127.0.01:9982/，每一次代码更新保存后，都会自动刷新页面，以便查看最新的改动效果。

另外，也可以在左侧输入框面板修改配置项，每当配置项变更，右侧图形也会自动变化。

代码目录

- dist               构建输出
- demo               图形示例
- doc                帮助文档
- node_modules       三方依赖
- src                代码目录
  - chart            图形代码
  - common           公有代码
  - static           静态资源
  - data.js          图形配置
  - index.html       开发首页
  - index.js         开发入口
- test               测试目录
- index.js           构建入口
- rollup.config.js   构建脚本
- gulpfile.babel.js  gulp开发调试脚本
- webpack.config.babel.js webpack开发调试脚本

图形 options

通用

{
    /**
     * 挂载元素，默认为 body
     *
     * @type {string}
     */
    el: '#main',

    /**
     * 宽度
     *
     * @type {number}
     */
    width: 990,

    /**
     * 高度
     *
     * @type {number}
     */
    height: 530,

    /**
     * 标题组件
     *
     * @type {Object}
     */
    title: {

        /**
         * 是否显示，默认为 false
         *
         * @type {boolean}
         */
        show: true,

        /**
         * 主标题文本
         *
         * @type {string}
         */
        text: '余弦图',

        /**
         * 组件 x 坐标，默认 left, 可选 left, center(middle), right
         * 也可以是绝对定位数字，例如 20，'20px'
         *
         * @type {string|number}
         */
        left: 'right',

        /**
         * 组件 y 坐标，默认 top, 可选 top, center(middle), bottom
         * 也可以是绝对定位数字，例如 20，'20px'
         *
         * @type {string|number}
         */
        top: '20px',

        /**
         * 组件 x 坐标，默认 auto, 可选值为 'auto', 20, '20px' 等
         * 如果 left 和 right 属性同时存在，则优先使用 right 属性
         *
         * @type {string|number}
         */
        right: 'auto',

        /**
         * 组件 y 坐标，默认 auto, 可选值为 'auto', 20, '20px' 等
         * 如果 top 和 bottom 属性同时存在，则优先使用 bottom 属性
         *
         * @type {string|number}
         */
        bottom: 'auto',

        /**
         * 标题背景颜色
         *
         * @type {string}
         */
        backgroundColor: 'transparent',

        /**
         * 子标题文字
         *
         * @type {string}
         */
        subtext: 'made by zxh',

        /**
         * 主标题和副标题之间的距离
         *
         * @type {number}
         */
        itemGap: 10,

        /**
         * 主标题样式配置
         *
         * @type {Object}
         */
        textStyle: {

            /**
             * 字体颜色，默认 #999
             *
             * @type {string}
             */
            color: '#999',

            /**
             * 字体大小，默认14，例如 14 或 '14px'
             *
             * @type {number|string}
             */
            fontSize: 14,

            /**
             * 字体
             *
             * @type {string}
             */
            fontFamily: 'Microsoft YAHEI',
        },

        /**
         * 副标题样式配置
         *
         * @type {Object}
         */
        subtextStyle: {

            /**
             * 字体颜色，默认 #999
             *
             * @type {string}
             */
            color: '#999',

            /**
             * 字体大小，默认14，例如 14 或 '14px'
             *
             * @type {number|string}
             */
            fontSize: 14,

            /**
             * 字体
             *
             * @type {string}
             */
            fontFamily: 'Microsoft YAHEI',
        }
    },

    /**
     * 图例组件
     *
     * @type {Object}
     */
    legend: {

        /**
         * 是否显示，默认为 false
         *
         * @type {boolean}
         */
        show: true,

        /**
         * 组件 x 坐标，默认 left, 可选 left, center(middle), right
         * 也可以是绝对定位数字，例如 20，'20px'
         *
         * @type {string|number}
         */
        left: 'auto',

        /**
         * 组件 y 坐标，默认 top, 可选 top, center(middle), bottom
         * 也可以是绝对定位数字，例如 20，'20px'
         *
         * @type {string|number}
         */
        top: 'auto',

        /**
         * 组件 x 坐标，默认 auto, 可选值为 'auto', 20, '20px' 等
         * 如果 left 和 right 属性同时存在，则优先使用 right 属性
         *
         * @type {string|number}
         */
        right: 'auto',

        /**
         * 组件 y 坐标，默认 auto, 可选值为 'auto', 20, '20px' 等
         * 如果 top 和 bottom 属性同时存在，则优先使用 bottom 属性
         *
         * @type {string|number}
         */
        bottom: 'auto',

        /**
         * 图例显示方向，默认为 horizontal(水平方向)，可选 vertical(垂直方向)
         *
         * @type {string}
         */
        orient: 'horizontal',

        /**
         * 图例之间的间隔，默认为10
         *
         * @type {number|string}
         */
        itemGap: 10,

        /**
         * 单个图例的宽度，默认为60
         *
         * @type {number}
         */
        itemWidth: 60,

        /**
         * 图例图标宽度
         *
         * @type {number}
         */
        iconWidth: 14,

        /**
         * 图例图表高度
         *
         * @type {number}
         */
        iconHeight: 14,

        /**
         * 图例数组，可以是简单数组，例如：
         *
         * ['仁和', '仲景', '同仁堂', '九芝堂', '汇仁']
         *
         * 也可以是复杂数组，如下边例子所示，每一项必须包含 name 属性
         *
         * @type {Array}
         */
        data: [
            {name: '仁和', icon: 'rect', textStyle: {}},
            {name: '仲景', icon: 'rect', textStyle: {}},
            {name: '同仁堂', icon: 'rect', textStyle: {}},
            {name: '九芝堂', icon: 'rect', textStyle: {}},
            {name: '汇仁', icon: 'rect', textStyle: {}}
        ],

        /**
         * 图例文本样式，参见 title 组件样式
         *
         * @type {Object}
         */
        textStyle: {},

        /**
         * 图例提示配置
         *
         * @type {Object}
         */
        tooltip: {}
    },

    /**
     * 视觉映射组件
     *
     * @type {Object}
     */
    visualMap: {

        /**
         * 是否显示，默认为 false
         *
         * @type {boolean}
         */
        show: true,

        /**
         * 组件朝向，默认 vertical，可选 horizontal
         *
         * @type {string}
         */
        orient: 'vertical',

        /**
         * 组件类型，默认 continuous，可选 discrete
         *
         * @type {string}
         */
        type: 'continuous', // discrete

        /**
         * 组件高度
         *
         * @type {number\string}
         */
        height: 200,

        /**
         * 组件宽度
         *
         * @type {string}
         */
        width: '20px',

        /**
         * 组件 x 坐标，默认 left, 可选 left, center(middle), right
         * 也可以是绝对定位数字，例如 20，'20px'
         *
         * @type {string|number}
         */
        left: 'right',

        /**
         * 组件 y 坐标，默认 auto, 可选值为 'auto', 20, '20px' 等
         * 如果 top 和 bottom 属性同时存在，则优先使用 bottom 属性
         *
         * @type {string|number}
         */
        bottom: '40px',

        /**
         * 组件两端显示的文本
         *
         * @type {Array}
         */
        text: ['高', '低'],

        /**
         * 组件两端的颜色
         *
         * @type {Array}
         */
        color: ['#bf444c', '#f6efa6'],


        /**
         * 是否出现拖拉条，默认为 false
         *
         * @type {boolean}
         */
        calculable: true
    },

    /**
     * 数据，除了 type 和 data 字段外，不同图形类型的字段会有所不同
     *
     * @type {Array}
     */
    series: [
        {
            /**
             * 图形类型
             *
             * @type {string}
             */
            type: 'chord',

            /**
             * 图形数据
             *
             * @type {*}
             */
            data: {}
        }
    ],

    /**
     * 颜色图谱
     *
     * @type {Array}
     */
    color: [
        '#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c',
        '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ff9', '#b15928'
    ],

    /**
     * 画板背景颜色
     *
     * @type {string}
     */
    backgroundColor: 'transparent'
}

Demand

选项

{
    /**
     * 类型
     *
     * @type {string}
     */
    type: 'demand',

    /**
     * 中心词
     *
     * @type {string}
     */
    center: '手机',

    /**
     * 是否显示播放组件(开始/暂停，前进，后退)，默认为 false
     *
     * @type {boolean}
     */
    showControl: true,

    /**
     * 是否自动播放，默认为 false
     *
     * @type {boolean}
     */
    auto: true,

    /**
     * 当前页面失去焦点时是否停止动画，默认为 true，即失去焦点时停止动画，恢复焦点时继续动画
     * 这个选项可以有效提高页面性能
     *
     * @type {boolean}
     */
    blurStop: true,

    /**
     * 相关词数据
     *
     * @type {Array}
     */
    data: [
        {
            /**
             * 相关词名称
             *
             * @type {string}
             */
            name: '助手',

            /**
             * 相关词查询指数
             *
             * @type {number}
             */
            query: 4975,

            /**
             * 相关词和中心词相关度指数
             *
             * @type {number}
             */
            r: 1055,

            /**
             * 相关词变化趋势，1表示上升，-1表示下降
             *
             * @type {number}
             */
            up: 1
        }
    ],

    /**
     * 开始日期
     *
     * @type {Date}
     */
    startDate: new Date(2015, 9, 4),

    /**
     * 结束日期
     *
     * @type {Date}
     */
    endDate: new Date(2016, 8, 25),

    /**
     * 当前日期所在周需高亮的时间
     *
     * @type {Date}
     */
    currentDate: new Date(2016, 9, 6),

    // 时间轴文本默认偏移，默认为 30，可以为负数，注意需要与时间节点对应关系
    labelOffset: 30
}

事件

• loadData

let demand = new Demand(options);
demand.on('loadData', function(item) {});

上面代码中的 item 格式如下：

{
    // 周开始日期
    start: "2016.2.15",

    // 周结束日期
    end: "2016.2.21",

    // 索引
    index: 20
}

API

• setData(data, options): 设置新的数据，data 数据格式参见上面的 options，options 为数据格式，可选（火狐浏览器需要设置 options）
• dispose(): 销毁实例

Chord

选项

{
    series: [
        {
            /**
             * 类型
             *
             * @type {string}
             */
            type: 'chord',

            /**
             * 和弦图关系矩阵
             *
             * @type {Array}
             */
            data: [
                [0,0.0612,0.102,0.2857,0.551],
                [0.0352,0,0.2962,0.3666,0.3021],
                [0.0121,0.0675,0,0.7036,0.2168],
                [0.01,0.0378,0.3681,0,0.5841],
                [0.0264,0.0603,0.1324,0.7809,0]
            ],

            /**
             * 环宽
             *
             * @type {number}
             */
            ringWidth: 30,

            /**
             * 外层环块间隔角度
             *
             * @type {number}
             */
            padAngle: 3 * Math.PI / 180,

            /**
             * 组 tooltip 设置和格式化函数
             *
             * @type {Object}
             */
            groupTooltip: {

                /**
                 * 是否显示分组 tooltip，默认为 true
                 *
                 * @type {boolean}
                 */
                show: true,

                /**
                 * 提示格式化函数
                 *
                 * @param  {Object} item - 包含 value 属性
                 * @return {string}      - 格式化后的文本
                 */
                formatter(item) {
                    return item.value;
                }
            },

            /**
             * 丝带 tooltip 设置和格式化函数
             *
             * @type {Object}
             */
            ribbonTooltip: {

                /**
                 * 是否显示丝带 tooltip，默认为 true
                 *
                 * @type {boolean}
                 */
                show: true,

                /**
                 * 提示格式化函数
                 *
                 * @param  {Object} item - 包含 value 属性
                 * @return {string}      - 格式化后的文本
                 */
                formatter(item) {
                    return item.value;
                }
            }
        }
    ]
}

事件

无。

API

• setOption(options)
• dispose()

Transfer

选项

{

    series: [
        {
            /**
             * 类型
             *
             * @type {string}
             */
            type: 'transfer',

            /**
             * 各自占比
             *
             * @type {Array}
             */
            share: [100, 40, 50, 20, 86, 30, 29],

            /**
             * 转移概率相关数组
             *
             * @type {Array}
             */
            data: [
                [0.23, 0.45, 0.21, 0.45, 0.76, 0.27, 0.22],
                [0.86, 0.65, 0.21, 0.45, 0.90, 0.23, 0.33],
                [0.97, 0.44, 0.21, 0.66, 0.19, 0.45, 0.44],
                [0.23, 0.98, 0.21, 0.33, 0.23, 0.60, 0.55],
                [0.23, 0.22, 0.21, 0.22, 0.90, 0.23, 0.66],
                [0.87, 0.53, 0.21, 0.11, 0.22, 0.27, 0.77],
                [0.11, 0.22, 0.33, 0.44, 0.55, 0.66, 0.77]
            ]
        }
    ],

    /**
     * 模式
     *
     * - from: 从该节点出发，箭头指向其他节点
     * - to: 其他节点汇聚到该节点，箭头均指向该节点
     *
     * @type {string}
     */
    mode: 'from'
}

事件

无。

API

• setOption(options)
• dispose()

ChinaMap

选项

{
    /**
     * 标签显示控制
     *
     * @type {Object}
     */
    label: {

        /**
         * 是否显示省份标签，默认 false
         *
         * @type {boolean}
         */
        province: false,

        /**
         * 是否显示城市标签，默认 true
         *
         * @type {boolean}
         */
        city: true
    },

    /**
     * 地图配置参数
     *
     * @type {Object}
     */
    map: {

        /**
         * 地图背景颜色
         *
         * @type {string}
         */
        backgroundColor: '#f1f1f1',

        /**
         * 地图边框颜色
         *
         * @type {string}
         */
        borderColor: '#333',

        /**
         * 城市配置
         *
         * @type {Object}
         */
        city: {

            /**
             * 是否显示城市，默认 true
             *
             * @type {boolean}
             */
            show: true,

            /**
             * 是否显示城市标签，默认 false
             *
             * @type {boolean}
             */
            label: false,

            /**
             * 城市最大的显示半径
             *
             * @type {Array}
             */
            radius: [2, 10]
        },

        /**
         * 省份配置，参见上面的城市配置
         *
         * @type {Object}
         */
        province: {}
    },

    /**
     * 数据
     *
     * @type {Array}
     */
    series: [
        {
            /**
             * 曲线名称
             *
             * @type {string}
             */
            name: 'iphone3',

            /**
             * 类型
             *
             * @type {string}
             */
            type: 'map',

            /**
             * 地图类型，目前只支持中国地图
             *
             * @type {string}
             */
            mapType: 'china',

            /**
             * 省份数据
             *
             * @type {Array}
             */
            data: [
                {name: '北京', value: _random(20, 19000)},
                {name: '天津', value: _random(20, 19000)},
                {name: '上海', value: _random(20, 19000)},
                {name: '重庆', value: _random(20, 19000)},
                {name: '河北', value: _random(20, 19000)},
                {name: '河南', value: _random(20, 19000)},
                {name: '云南', value: _random(20, 19000)},
                {name: '辽宁', value: _random(20, 19000)},
                {name: '黑龙江', value: _random(20, 19000)},
                {name: '湖南', value: _random(20, 19000)},
                {name: '安徽', value: _random(20, 19000)},
                {name: '山东', value: _random(20, 19000)},
                {name: '新疆', value: _random(20, 19000)},
                {name: '江苏', value: _random(20, 19000)},
                {name: '浙江', value: _random(20, 19000)},
                {name: '江西', value: _random(20, 19000)},
                {name: '湖北', value: _random(20, 19000)},
                {name: '广西', value: _random(20, 19000)},
                {name: '甘肃', value: _random(20, 19000)},
                {name: '山西', value: _random(20, 19000)},
                {name: '内蒙古', value: _random(20, 19000)},
                {name: '陕西', value: _random(20, 19000)},
                {name: '吉林', value: _random(20, 19000)},
                {name: '福建', value: _random(20, 19000)},
                {name: '贵州', value: _random(20, 19000)},
                {name: '广东', value: _random(20, 19000)},
                {name: '青海', value: _random(20, 19000)},
                {name: '西藏', value: _random(20, 19000)},
                {name: '四川', value: _random(20, 19000)},
                {name: '宁夏', value: _random(20, 19000)},
                {name: '海南', value: _random(20, 19000)},
                {name: '台湾', value: _random(20, 19000)},
                {name: '香港', value: _random(20, 19000)},
                {name: '澳门', value: _random(20, 19000)}
            ]
        }
    ],

    /**
     * 是否自动显示提示
     *
     * @type {boolean}
     */
    autoTip: false
}

事件

无。

API

• setOption(options)
• dispose()

WordCloud

选项

{
    series: [{
        type: 'WordCloud',

        /**
         * 字词云显示图案类型
         *
         * @type {string}
         */
        shape: 'circle',

        /**
         * 字词数组
         *
         * @type {Array}
         */
        data: (function () {
            let arr = [];
            for (let i = 0; i < 200; i++) {
                arr.push([randomChars(3), _random(1, 25)]);
            }
            return arr;
        })()
    }]
}

事件

无。

API

• setOption(options)
• dispose()

Venn

选项

series: [
    {
        type: 'Venn2',

        /**
         * 数据
         *
         * @type {Array}
         */
        data: [

            /**
             * 每个集合或者交集数据
             *
             * sets - 如果是单个元素，表示单个集合，否则为多个元素的交集
             * size - 为集合大小
             *
             * @type {Object}
             */
            {sets: ['人群1'], size: 12},
            {sets: ['人群2'], size: 20},
            {sets: ['人群3'], size: 15},
            {sets: ['人群4'], size: 2},
            {sets: ['人群1', '人群2'], size: 5},
            {sets: ['人群1', '人群3'], size: 8},
            {sets: ['人群2', '人群3'], size: 6},
            {sets: ['人群1', '人群2', '人群3'], size: 2},
            {sets: ['人群3', '人群4'], size: 2}
        ]
    }
]

事件

无。

API

• setOption(options)
• dispose()

DecisionTree

信息接触点图形选项如下：

选项

{
    /**
     * 挂载元素
     *
     * @type {String}
     */
    el: '#main'

    /**
     * 高度
     *
     * @type {Number}
     */

    width: 800,

    /**
     * 高度，PS: 内部会根据数据自动计算一个最小高度，最终的高度会取两者的最大值
     *
     * @type {Number}
     */
    height: 600,

    /**
     * 标题
     *
     * @type {Object}
     */
    title: {
        show: true,
        text: '信息接触点',
        subtext: '共有81个步骤'
    },

    /**
     * 图形边距
     *
     * @type {Object}
     */
    margin: {
        left: 20,
        top: 20,
        right: 20,
        bottom: 20
    },

    /**
     * 线条宽度范围，value 越大，线条宽度越宽（数组第二个值）。
     *
     * @type {Array}
     */
    lineWidthRange: [1, 10],

    /**
     * 线条颜色范围，value 越大，线条颜色越深（数组第二个值），中间阶段线条颜色会通过插值来实现。
     *
     * PS: 当 lineColorRange 和 lineColor 属性同时存在时，lineColor 优先级更高。
     *
     * @type {Array}
     */
    lineColorRange: ['#ffe191', '#e90000'],

    /**
     * 线条颜色范围，PS: 当 lineColorRange 和 lineColor 属性同时存在时，lineColor 优先级更高。
     * @type {Array}
     */
    lineColor: ['#e90000', '#ff5402', '#ff9604', '#ffd702', '#ffe191'],

    /**
     * 线条高亮颜色
     *
     * @type {String}
     */
    lineColorHover: '#a496ff',

    /**
     * 节点半径范围，value 越大，节点半径越大（数组第二个值）。
     *
     * @type {Array}
     */
    pointRadiusRange: [2.5, 10],

    /**
     * 节点填充颜色
     *
     * @type {String}
     */
    pointColor: '#a496ff',

    /**
     * 节点高亮颜色，目前此功能保留实现，后续优化。
     *
     * @type {String}
     */
    pointColorHover: '#5749ff',

    /**
     * 数据
     *
     * @type {Array}
     */
    series: [
        {
            /**
             * 类型
             *
             * @type {String}
             */
            type: 'DecisionTree',

            /**
             * 目标维度，保留字段，可以先忽略
             *
             * @type {string}
             */
            target: 'FC',

            /**
             * 维度列表，保留字段，可以先忽略
             *
             * @type {Array}
             */
            dimension: ['FC', 'WM', 'DSP'],

            /**
             * 回溯步骤，保留字段，可以先忽略
             *
             * @type {number}
             */
            step: 3,

            /**
             * 方向，保留字段，可以先忽略
             *
             * @type {string}
             */
            orient: 'right',

            /**
             * 实际数据
             *
             * @type {Object}
             */
            data: {

                /**
                 * 节点名称
                 *
                 * @type {String}
                 */
                name: 'FC',

                /**
                 * 节点数值，该值会影响线条和节点的大小，一般值越大，线条和节点越大
                 *
                 * @type {Number}
                 */
                value: 81,

                /**
                 * 内容格式化函数
                 *
                 * @param  {string} name  节点名称
                 * @param  {number} value 节点数值
                 * @return {string}       节点上方显示文字
                 */
                formatter: function (name, value) {
                    return name + '：' + value;
                },

                /**
                 * 内容提示
                 *
                 * @type {Object}
                 */
                tooltip: {

                    /**
                     * 是否显示提示，默认为 false
                     *
                     * @type {Boolean}
                     */
                    show: true,

                    /**
                     * 内容提示格式化函数
                     *
                     * @param  {string} name  节点名称
                     * @param  {number} value 节点数值
                     * @return {string}       节点提示文字
                     */
                    formatter: function (name, value) {
                        return name + '：' + value;
                    }
                },

                /**
                 * 子节点数组
                 *
                 * @type {Array}
                 */
                children: [
                    {
                        name: 'FC',
                        value: 31,
                        children: [
                            {
                                name: 'FC',
                                value: 12
                            },
                            {
                                name: 'WM',
                                value: 13
                            },
                            {
                                name: 'DSP',
                                value: 15
                            }
                        ]
                    },
                    {
                        name: 'WM',
                        value: 60,
                        children: [
                            {
                                name: 'FC',
                                value: 12
                            },
                            {
                                name: 'WM',
                                value: 13
                            },
                            {
                                name: 'DSP',
                                value: 15
                            }
                        ]
                    },
                    {
                        name: 'DSP',
                        value: 43,
                        children: [
                            {
                                name: 'FC',
                                value: 12
                            },
                            {
                                name: 'WM',
                                value: 13
                            },
                            {
                                name: 'DSP',
                                value: 15
                            }
                        ]
                    }
                ]
            }
        }
    ]
}

事件

无。

API

• setOption(options)
• dispose()