平常技术博客写的少，工作上遇到问题很多是在网上找到解决方案，今天想写写，希望也能帮到别人。研究和开发加起来一个多星期，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 关键文件介绍

文件名	相对路径	作用
widget.html	org/cboard/view/config/widget.html	图表设计页面
widgetCtrl.js	org/cboard/controller/config/widgetCtrl.js	图表组件初始化。在该控制器上增加新图表组件
chartService.js	org/cboard/service/chart/chartService.js	图表服务类接口。新增图表服务子类依赖注入该父接口
dataService.js	org/cboard/service/data/dataService.js	业务数据及配置项参数查询服务
CBoardEChartRender.js	org/cboard/util/CBoardEChartRender.js	echarts图表渲染器
starter.html	starter.html	用户登陆后的全局页面。引入新增图表类型service js
myboard.html	myboard.html	我的看板页面。引入新增图表类型service js
render.html	render.html	看板预览页面。引入新增图表类型service js
cboard.json	i18n/cn/cboard.json	本地国际化信息-中文。新增图表类型名称
cboard.css	css/cboard.css	样式文件。新增图表类型背景图片在这里设置

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配置项设置

cboard 图表类型及其配置项扩展相关推荐

ppt图表图表类型起始_梅科图表
ppt图表图表类型起始 There are different types of variable width bar charts but two are the most popular: 1) ...
power bi图表_Power BI中的图表类型概述
power bi图表 In this article, I am going to give an overview of the most widely used chart types in Po ...
WinForm控件Chart的图表类型
[将就看,后期再加目录导航2020.10.23] 折线图折线图通常使用一条线来连接一系列不同的数据点.这样的直线是直线,样条曲线或阶梯.折线图更简单,因此还可以使您可视化多个系列而不会像条形图那样重 ...
计算机中的图表类型,高级会计师《职称计算机》图表制作：主要常用图表类型...
高级会计备考的征程已经开始,大家准备好了么?中公财经小编为大家整理了高级会计师<职称计算机>图表制作:主要常用图表类型,希望能帮助考生们更加了解高级会计师计算机. 高级会计师<职称计 ...
echart 图表类型
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表: 单图表类型:line 折线图堆积折线图区域图堆积区域图单图表类型:bar 柱形图堆积柱形图条形图堆积条形图单图表类型: ...
PPT中图表类型的选择
该图来源于extremepresentation(尖端演示)网站看到一个关于图表类型选择的帖子,Andrew Abela 整理了一份图表类型选择指南的文档.具体可以直接浏览该网站获取更详细的信息. ...
3.1 定义图表类型----柱状图、线形图和堆积柱状图
3.1 定义图表类型----柱状图.线形图和堆积柱状图文章目录 3.1 定义图表类型----柱状图.线形图和堆积柱状图前言一.线形图 1.操作步骤 2.进一步测试二.基于相同的数据集合多生成一 ...
了解这15个图表类型，搞定金融数据可视化大屏（2）
在上一篇文章当中,我简单介绍了什么是金融数据可视化,那么为了保证我们金融数据可视化大屏的正确性,根据不同的财务用途,选择正确的图表形式也是必须要做的. 我收集了15个适合金融财务用途的数据可视化图表给 ...
python中pygal_Python数据可视化之Pygal图表类型
pip install pygal -i https://pypi.tuna.tsinghua.edu.cn/simple 复制代码使用的编辑器是Pycharm工具软件,各位可以参考一下下载完并且 ...
Xamarin图表开发基础教程（12）OxyPlot框架支持的金融图表类型
Xamarin图表开发基础教程(12)OxyPlot框架支持的金融图表类型 OxyPlot组件中支持5种类型的金融图表,它们分别为销量图.高低图.股票K线图.股票走势图和旧式股票图,如图1.20~1. ...

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配置项设置

cboard 图表类型及其配置项扩展相关推荐

最新文章

热门文章