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 标签引入脚本后options;
commonJS 模式(通过 require('cedp-gallery'))
// gallery 放 node_modules 中var Gallery = ;options;
AMD 模式(通过 require('cedp-gallery'))
;
ES6 模式(通过 import 访问)
需要注意的是,es6 需要直接引用某个图形,而不是引用整个 Gallery
,例如我只想引用图形库中的需求图谱(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 */ el: '#main' /** * 宽度 * * @type */ width: 990 /** * 高度 * * @type */ height: 530 /** * 标题组件 * * @type */ title: /** * 是否显示,默认为 false * * @type */ show: true /** * 主标题文本 * * @type */ text: '余弦图' /** * 组件 x 坐标,默认 left, 可选 left, center(middle), right * 也可以是绝对定位数字,例如 20,'20px' * * @type */ left: 'right' /** * 组件 y 坐标,默认 top, 可选 top, center(middle), bottom * 也可以是绝对定位数字,例如 20,'20px' * * @type */ top: '20px' /** * 组件 x 坐标,默认 auto, 可选值为 'auto', 20, '20px' 等 * 如果 left 和 right 属性同时存在,则优先使用 right 属性 * * @type */ right: 'auto' /** * 组件 y 坐标,默认 auto, 可选值为 'auto', 20, '20px' 等 * 如果 top 和 bottom 属性同时存在,则优先使用 bottom 属性 * * @type */ bottom: 'auto' /** * 标题背景颜色 * * @type */ backgroundColor: 'transparent' /** * 子标题文字 * * @type */ subtext: 'made by zxh' /** * 主标题和副标题之间的距离 * * @type */ itemGap: 10 /** * 主标题样式配置 * * @type */ textStyle: /** * 字体颜色,默认 #999 * * @type */ color: '#999' /** * 字体大小,默认14,例如 14 或 '14px' * * @type */ fontSize: 14 /** * 字体 * * @type */ fontFamily: 'Microsoft YAHEI' /** * 副标题样式配置 * * @type */ subtextStyle: /** * 字体颜色,默认 #999 * * @type */ color: '#999' /** * 字体大小,默认14,例如 14 或 '14px' * * @type */ fontSize: 14 /** * 字体 * * @type */ fontFamily: 'Microsoft YAHEI' /** * 图例组件 * * @type */ legend: /** * 是否显示,默认为 false * * @type */ show: true /** * 组件 x 坐标,默认 left, 可选 left, center(middle), right * 也可以是绝对定位数字,例如 20,'20px' * * @type */ left: 'auto' /** * 组件 y 坐标,默认 top, 可选 top, center(middle), bottom * 也可以是绝对定位数字,例如 20,'20px' * * @type */ top: 'auto' /** * 组件 x 坐标,默认 auto, 可选值为 'auto', 20, '20px' 等 * 如果 left 和 right 属性同时存在,则优先使用 right 属性 * * @type */ right: 'auto' /** * 组件 y 坐标,默认 auto, 可选值为 'auto', 20, '20px' 等 * 如果 top 和 bottom 属性同时存在,则优先使用 bottom 属性 * * @type */ bottom: 'auto' /** * 图例显示方向,默认为 horizontal(水平方向),可选 vertical(垂直方向) * * @type */ orient: 'horizontal' /** * 图例之间的间隔,默认为10 * * @type */ itemGap: 10 /** * 单个图例的宽度,默认为60 * * @type */ itemWidth: 60 /** * 图例图标宽度 * * @type */ iconWidth: 14 /** * 图例图表高度 * * @type */ iconHeight: 14 /** * 图例数组,可以是简单数组,例如: * * ['仁和', '仲景', '同仁堂', '九芝堂', '汇仁'] * * 也可以是复杂数组,如下边例子所示,每一项必须包含 name 属性 * * @type */ data: name: '仁和' icon: 'rect' textStyle: {} name: '仲景' icon: 'rect' textStyle: {} name: '同仁堂' icon: 'rect' textStyle: {} name: '九芝堂' icon: 'rect' textStyle: {} name: '汇仁' icon: 'rect' textStyle: {} /** * 图例文本样式,参见 title 组件样式 * * @type */ textStyle: {} /** * 图例提示配置 * * @type */ tooltip: {} /** * 视觉映射组件 * * @type */ visualMap: /** * 是否显示,默认为 false * * @type */ show: true /** * 组件朝向,默认 vertical,可选 horizontal * * @type */ orient: 'vertical' /** * 组件类型,默认 continuous,可选 discrete * * @type */ type: 'continuous' // discrete /** * 组件高度 * * @type {number\string} */ height: 200 /** * 组件宽度 * * @type */ width: '20px' /** * 组件 x 坐标,默认 left, 可选 left, center(middle), right * 也可以是绝对定位数字,例如 20,'20px' * * @type */ left: 'right' /** * 组件 y 坐标,默认 auto, 可选值为 'auto', 20, '20px' 等 * 如果 top 和 bottom 属性同时存在,则优先使用 bottom 属性 * * @type */ bottom: '40px' /** * 组件两端显示的文本 * * @type */ text: '高' '低' /** * 组件两端的颜色 * * @type */ color: '#bf444c' '#f6efa6' /** * 是否出现拖拉条,默认为 false * * @type */ calculable: true /** * 数据,除了 type 和 data 字段外,不同图形类型的字段会有所不同 * * @type */ series: /** * 图形类型 * * @type */ type: 'chord' /** * 图形数据 * * @type */ data: {} /** * 颜色图谱 * * @type */ color: '#a6cee3' '#1f78b4' '#b2df8a' '#33a02c' '#fb9a99' '#e31a1c' '#fdbf6f' '#ff7f00' '#cab2d6' '#6a3d9a' '#ff9' '#b15928' /** * 画板背景颜色 * * @type */ backgroundColor: 'transparent'
Demand
选项
/** * 类型 * * @type */ type: 'demand' /** * 中心词 * * @type */ center: '手机' /** * 是否显示播放组件(开始/暂停,前进,后退),默认为 false * * @type */ showControl: true /** * 是否自动播放,默认为 false * * @type */ auto: true /** * 当前页面失去焦点时是否停止动画,默认为 true,即失去焦点时停止动画,恢复焦点时继续动画 * 这个选项可以有效提高页面性能 * * @type */ blurStop: true /** * 相关词数据 * * @type */ data: /** * 相关词名称 * * @type */ name: '助手' /** * 相关词查询指数 * * @type */ query: 4975 /** * 相关词和中心词相关度指数 * * @type */ r: 1055 /** * 相关词变化趋势,1表示上升,-1表示下降 * * @type */ up: 1 /** * 开始日期 * * @type */ startDate: 2015 9 4 /** * 结束日期 * * @type */ endDate: 2016 8 25 /** * 当前日期所在周需高亮的时间 * * @type */ currentDate: 2016 9 6 // 时间轴文本默认偏移,默认为 30,可以为负数,注意需要与时间节点对应关系 labelOffset: 30
事件
- loadData
let demand = options;demand;
上面代码中的 item
格式如下:
// 周开始日期 start: "2016.2.15" // 周结束日期 end: "2016.2.21" // 索引 index: 20
API
setData(data, options)
: 设置新的数据,data 数据格式参见上面的 options,options 为数据格式,可选(火狐浏览器需要设置 options)dispose()
: 销毁实例
Chord
选项
series: /** * 类型 * * @type */ type: 'chord' /** * 和弦图关系矩阵 * * @type */ data: 0006120102028570551 003520029620366603021 001210067500703602168 0010037803681005841 002640060301324078090 /** * 环宽 * * @type */ ringWidth: 30 /** * 外层环块间隔角度 * * @type */ padAngle: 3 * MathPI / 180 /** * 组 tooltip 设置和格式化函数 * * @type */ groupTooltip: /** * 是否显示分组 tooltip,默认为 true * * @type */ show: true /** * 提示格式化函数 * * @param * @return */ { return itemvalue; } /** * 丝带 tooltip 设置和格式化函数 * * @type */ ribbonTooltip: /** * 是否显示丝带 tooltip,默认为 true * * @type */ show: true /** * 提示格式化函数 * * @param * @return */ { return itemvalue; }
事件
无。
API
- setOption(options)
- dispose()
Transfer
选项
series: /** * 类型 * * @type */ type: 'transfer' /** * 各自占比 * * @type */ share: 100 40 50 20 86 30 29 /** * 转移概率相关数组 * * @type */ data: 023 045 021 045 076 027 022 086 065 021 045 090 023 033 097 044 021 066 019 045 044 023 098 021 033 023 060 055 023 022 021 022 090 023 066 087 053 021 011 022 027 077 011 022 033 044 055 066 077 /** * 模式 * * - from: 从该节点出发,箭头指向其他节点 * - to: 其他节点汇聚到该节点,箭头均指向该节点 * * @type */ mode: 'from'
事件
无。
API
- setOption(options)
- dispose()
ChinaMap
选项
/** * 标签显示控制 * * @type */ label: /** * 是否显示省份标签,默认 false * * @type */ province: false /** * 是否显示城市标签,默认 true * * @type */ city: true /** * 地图配置参数 * * @type */ map: /** * 地图背景颜色 * * @type */ backgroundColor: '#f1f1f1' /** * 地图边框颜色 * * @type */ borderColor: '#333' /** * 城市配置 * * @type */ city: /** * 是否显示城市,默认 true * * @type */ show: true /** * 是否显示城市标签,默认 false * * @type */ label: false /** * 城市最大的显示半径 * * @type */ radius: 2 10 /** * 省份配置,参见上面的城市配置 * * @type */ province: {} /** * 数据 * * @type */ series: /** * 曲线名称 * * @type */ name: 'iphone3' /** * 类型 * * @type */ type: 'map' /** * 地图类型,目前只支持中国地图 * * @type */ mapType: 'china' /** * 省份数据 * * @type */ data: name: '北京' value: name: '天津' value: name: '上海' value: name: '重庆' value: name: '河北' value: name: '河南' value: name: '云南' value: name: '辽宁' value: name: '黑龙江' value: name: '湖南' value: name: '安徽' value: name: '山东' value: name: '新疆' value: name: '江苏' value: name: '浙江' value: name: '江西' value: name: '湖北' value: name: '广西' value: name: '甘肃' value: name: '山西' value: name: '内蒙古' value: name: '陕西' value: name: '吉林' value: name: '福建' value: name: '贵州' value: name: '广东' value: name: '青海' value: name: '西藏' value: name: '四川' value: name: '宁夏' value: name: '海南' value: name: '台湾' value: name: '香港' value: name: '澳门' value: /** * 是否自动显示提示 * * @type */ autoTip: false
事件
无。
API
- setOption(options)
- dispose()
WordCloud
选项
series: type: 'WordCloud' /** * 字词云显示图案类型 * * @type */ shape: 'circle' /** * 字词数组 * * @type */ data: { let arr = ; for let i = 0; i < 200; i++ arr; return arr; }
事件
无。
API
- setOption(options)
- dispose()
Venn
选项
series: type: 'Venn2' /** * 数据 * * @type */ data: /** * 每个集合或者交集数据 * * sets - 如果是单个元素,表示单个集合,否则为多个元素的交集 * size - 为集合大小 * * @type */ 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 */ el: '#main' /** * 高度 * * @type */ width: 800 /** * 高度,PS: 内部会根据数据自动计算一个最小高度,最终的高度会取两者的最大值 * * @type */ height: 600 /** * 标题 * * @type */ title: show: true text: '信息接触点' subtext: '共有81个步骤' /** * 图形边距 * * @type */ margin: left: 20 top: 20 right: 20 bottom: 20 /** * 线条宽度范围,value 越大,线条宽度越宽(数组第二个值)。 * * @type */ lineWidthRange: 1 10 /** * 线条颜色范围,value 越大,线条颜色越深(数组第二个值),中间阶段线条颜色会通过插值来实现。 * * PS: 当 lineColorRange 和 lineColor 属性同时存在时,lineColor 优先级更高。 * * @type */ lineColorRange: '#ffe191' '#e90000' /** * 线条颜色范围,PS: 当 lineColorRange 和 lineColor 属性同时存在时,lineColor 优先级更高。 * @type */ lineColor: '#e90000' '#ff5402' '#ff9604' '#ffd702' '#ffe191' /** * 线条高亮颜色 * * @type */ lineColorHover: '#a496ff' /** * 节点半径范围,value 越大,节点半径越大(数组第二个值)。 * * @type */ pointRadiusRange: 25 10 /** * 节点填充颜色 * * @type */ pointColor: '#a496ff' /** * 节点高亮颜色,目前此功能保留实现,后续优化。 * * @type */ pointColorHover: '#5749ff' /** * 数据 * * @type */ series: /** * 类型 * * @type */ type: 'DecisionTree' /** * 目标维度,保留字段,可以先忽略 * * @type */ target: 'FC' /** * 维度列表,保留字段,可以先忽略 * * @type */ dimension: 'FC' 'WM' 'DSP' /** * 回溯步骤,保留字段,可以先忽略 * * @type */ step: 3 /** * 方向,保留字段,可以先忽略 * * @type */ orient: 'right' /** * 实际数据 * * @type */ data: /** * 节点名称 * * @type */ name: 'FC' /** * 节点数值,该值会影响线条和节点的大小,一般值越大,线条和节点越大 * * @type */ value: 81 /** * 内容格式化函数 * * @param * @param * @return */ { return name + ':' + value; } /** * 内容提示 * * @type */ tooltip: /** * 是否显示提示,默认为 false * * @type */ show: true /** * 内容提示格式化函数 * * @param * @param * @return */ { return name + ':' + value; } /** * 子节点数组 * * @type */ 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()