cboard 图表类型及其配置项扩展

 

平常技术博客写的少，工作上遇到问题很多是在网上找到解决方案，今天想写写，希望也能帮到别人。研究和开发加起来一个多星期，cboard图表类型新增了象形柱图，增加了类目数量的属性。现写下开发手册，如有不对之处，欢迎大家指正。^_^

 

目录

一、开发环境准备

1.1 关键文件介绍

1.2 注意事项

二、开发步骤

2.1 新增图表类型（背景图片、标题、维度指标规则）

2.1.1 widgetCtrl.js chart_types新增象形柱图

2.1.2 cboard.json 新增CONFIG.WIDGET.PICTOGRAPHIC属性

2.1.3 cboard.css 新增cPictographic和cPictographic disabled样式

2.1.4 widgetCtrl.js configRule新增pictographic json对象

2.2 该图表类型的渲染

2.2.1 新增chartPictographicService.js

2.2.2 chartPictographicService依赖注入给chartService，并且chartService getChartServices函数增加象形柱图的服务子类

2.2.3 chartPictographicService 实现render和parseOption函数

2.2.4 starter.html、render.html、myboard.html引入chartPictographicService.js

2.2.5 注意事项

2.3 新增指标维度页面和配置项页面

2.3.1 新增指标维度页面pictographic.html

2.3.2 新增配置项页面option\pictographic.html，扩展tab页显示类目数量下拉列表

2.3.3 chartPictographicService获取类目数量，进行echarts配置项设置

---

 

一、开发环境准备

1.1 关键文件介绍

1.2 注意事项

图表类型及其配置项扩展过程中，粗体显示的文件都要增加代码。另外还会新增一个service js文件和两个html。

 

二、开发步骤

2.1 新增图表类型（背景图片、标题、维度指标规则）

2.1.1 widgetCtrl.js chart_types新增象形柱图

2.1.2 cboard.json 新增CONFIG.WIDGET.PICTOGRAPHIC属性

2.1.3 cboard.css 新增cPictographic和cPictographic disabled样式

2.1.4 widgetCtrl.js configRule新增pictographic json对象

2.2 该图表类型的渲染

2.2.1 新增chartPictographicService.js

2.2.2 chartPictographicService依赖注入给chartService，并且chartService getChartServices函数增加象形柱图的服务子类

2.2.3 chartPictographicService 实现render和parseOption函数

2.2.4 starter.html、render.html、myboard.html引入chartPictographicService.js

2.2.5 注意事项

echarts官网实例：https://echarts.baidu.com/examples/#chart-type-pictorialBar

echarts官网配置项手册：https://www.echartsjs.com/option.html 

cboard图表类型绝大部分都是echarts图表，也有其他地图和kpi图表

 

2.3 新增指标维度页面和配置项页面

2.3.1 新增指标维度页面pictographic.html

2.3.2 新增配置项页面option\pictographic.html，扩展tab页显示类目数量下拉列表

2.3.3 chartPictographicService获取类目数量，进行echarts配置项设置