OneCode图表配置速查手册

原创

OneCode

发布于 2025-07-05 11:43:29

1310

前言

在数据可视化日益成为业务决策核心驱动力的今天，高效、灵活的图表配置系统已成为开发人员不可或缺的工具。OneCode图表组件凭借其丰富的图表类型与精细化的配置能力，为开发者提供了构建专业数据可视化界面的完整解决方案。然而，随着图表类型的不断扩展与配置项的日益丰富，如何快速定位并正确使用特定配置属性已成为提升开发效率的关键挑战。

本配置字典博文旨在为开发者提供一份全面、系统的OneCode图表配置参考手册。基于对组件配置文件的深度解析，我们梳理了包括Pyramid、Radar、RealTimeLine、Funnel、HLED、Thermometer等15+图表类型的全部配置属性，涵盖图表标题、功能属性、外观样式、数据格式、交互效果等六大核心维度。每个配置项均包含详细的属性说明、取值范围与默认值定义，形成结构化的配置速查体系。

无论是实时数据监控场景中需要调整的RealTimeLine刷新频率，还是仪表盘展示中关键的AngularGauge指针样式，抑或是布局优化时必不可少的边距（chartLeftMargin）与填充（captionPadding）设置，读者都能在此找到权威的配置指南。我们特别对跨图表通用配置项（如字体属性、数值格式化、工具提示）进行了归纳整理，帮助开发者建立全局配置思维。

本文档不仅是新手入门的学习手册，更是资深开发者的案头速查工具。通过左侧导航的图表类型索引与配置项功能分类，您可以快速定位所需内容。随文附上的配置示例与实际效果对照，将帮助您更直观地理解各项配置的作用机制。

我们期待这份配置字典能够成为您驾驭OneCode图表组件的得力助手，让每一个数据可视化需求都能找到最精准的配置方案，最终实现业务数据的高效表达与价值传递。

1. Pyramid (金字塔图)

1.1 图表基本配置

配置项	说明	类型	可选值	默认值
`caption`	图表标题文本	String	任意文本	""
`captionFontSize`	标题字体大小	Number	8-72	14
`captionFontColor`	标题字体颜色	String	颜色代码	"#333333"
`captionAlignment`	标题对齐方式	String	left/center/right	"center"
`subCaption`	图表副标题文本	String	任意文本	""
`subCaptionFontSize`	副标题字体大小	Number	8-72	12

1.2 功能属性

配置项	说明	类型	可选值	默认值
`animation`	是否启用动画效果	Boolean	true/false	true
`palette`	图表调色板	Number/Array	0-19或颜色数组	0
`showPrintMenu`	是否显示打印菜单	Boolean	true/false	true
`showDownloadMenu`	是否显示下载菜单	Boolean	true/false	true
`showHoverEffect`	是否启用悬停效果	Boolean	true/false	true
`enableSlicing`	是否允许切片交互	Boolean	true/false	false

1.3 金字塔特有属性

配置项	说明	类型	可选值	默认值
`pyramidMode`	金字塔显示模式	String	"2D"/"sliced"	"2D"
`yAxisMinValue`	Y轴最小值	Number	任意数值	0
`yAxisMaxValue`	Y轴最大值	Number	任意数值	自动计算
`pyramidBaseWidth`	金字塔底部宽度百分比	Number	10-100	80
`pyramidTopWidth`	金字塔顶部宽度百分比	Number	0-50	10
`isInverted`	是否反转金字塔方向	Boolean	true/false	false

2. Radar (雷达图)

2.1 图表配置

配置项	说明	类型	可选值	默认值
`caption`	图表标题	String	任意文本	""
`xAxisName`	X轴名称	String	任意文本	""
`yAxisName`	Y轴名称	String	任意文本	""
`showBorder`	是否显示边框	Boolean	true/false	true
`borderColor`	边框颜色	String	颜色代码	"#666666"
`bgColor`	图表背景色	String	颜色代码	"#FFFFFF"
`canvasBgColor`	画布背景色	String	颜色代码	"#FFFFFF"

2.2 数据系列配置

配置项	说明	类型	可选值	默认值
`showLabels`	是否显示数据标签	Boolean	true/false	true
`showValues`	是否显示数据值	Boolean	true/false	false
`labelFontSize`	标签字体大小	Number	8-72	12
`valueFontSize`	数值字体大小	Number	8-72	12
`dataPointRadius`	数据点半径	Number	1-20	4
`connectNullData`	是否连接空数据点	Boolean	true/false	false

2.3 雷达图特有属性

配置项	说明	类型	可选值	默认值
`radarFillColor`	雷达图填充颜色	String	颜色代码	"#F8F8F8"
`radarFillAlpha`	雷达图填充透明度	Number	0-100	30
`borderThickness`	雷达图边框厚度	Number	1-10	2
`numDivLines`	分割线数量	Number	1-20	5
`divLineColor`	分割线颜色	String	颜色代码	"#CCCCCC"
`showAxes`	是否显示轴线	Boolean	true/false	true

3. RealTimeLine (实时折线图)

3.1 标题与轴配置

配置项	说明	类型	可选值	默认值
`caption`	图表标题	String	任意文本	""
`xAxisName`	X轴名称	String	任意文本	"Time"
`yAxisName`	Y轴名称	String	任意文本	"Value"
`xAxisNameFontSize`	X轴名称字体大小	Number	8-72	12
`yAxisNameFontSize`	Y轴名称字体大小	Number	8-72	12
`xAxisValuesFontSize`	X轴值字体大小	Number	8-72	11
`yAxisValuesFontSize`	Y轴值字体大小	Number	8-72	11

3.2 实时属性配置

配置项	说明	类型	可选值	默认值
`updateInterval`	数据更新间隔(毫秒)	Number	100-5000	1000
`dataStreamURL`	实时数据URL	String	有效URL	""
`refreshOnLoad`	加载时是否刷新	Boolean	true/false	true
`showRTMenuItem`	是否显示实时菜单	Boolean	true/false	true
`rtAutoUpdate`	是否自动更新	Boolean	true/false	true
`rtUpdateOnScroll`	滚动时是否更新	Boolean	true/false	false
`bufferSize`	数据缓冲区大小	Number	5-100	10

3.3 折线图特有属性

配置项	说明	类型	可选值	默认值
`lineThickness`	线条厚度	Number	1-10	2
`anchorRadius`	锚点半径	Number	1-20	4
`anchorBorderThickness`	锚点边框厚度	Number	0-5	1
`anchorBgColor`	锚点背景色	String	颜色代码	"#FFFFFF"
`anchorBorderColor`	锚点边框颜色	String	颜色代码	系列颜色
`showAnchors`	是否显示锚点	Boolean	true/false	true
`anchorSides`	锚点边数	Number	3-100	4

4. RealTimeLineDY (双Y轴实时折线图)

4.1 双Y轴配置

配置项	说明	类型	可选值	默认值
`showPrimaryYAxis`	是否显示主Y轴	Boolean	true/false	true
`showSecondaryYAxis`	是否显示次Y轴	Boolean	true/false	true
`primaryYAxisName`	主Y轴名称	String	任意文本	"Value 1"
`secondaryYAxisName`	次Y轴名称	String	任意文本	"Value 2"
`primaryYAxisMinValue`	主Y轴最小值	Number	任意数值	0
`primaryYAxisMaxValue`	主Y轴最大值	Number	任意数值	自动计算
`secondaryYAxisMinValue`	次Y轴最小值	Number	任意数值	0
`secondaryYAxisMaxValue`	次Y轴最大值	Number	任意数值	自动计算
`syncAxisLimits`	是否同步轴限制	Boolean	true/false	false

4.2 其他特有属性

配置项	说明	类型	可选值	默认值
`numDivLinesPrimaryYAxis`	主Y轴分割线数量	Number	1-20	5
`numDivLinesSecondaryYAxis`	次Y轴分割线数量	Number	1-20	5
`primaryYAxisColor`	主Y轴颜色	String	颜色代码	"#1A80E5"
`secondaryYAxisColor`	次Y轴颜色	String	颜色代码	"#F53F3F"
`showAxisOnLeft`	是否在左侧显示轴	Boolean	true/false	true

5. RealTimeStackedArea (实时堆叠面积图)

5.1 面积图配置

配置项	说明	类型	可选值	默认值
`fillAlpha`	填充透明度	Number	0-100	70
`showAreaBorder`	是否显示面积边框	Boolean	true/false	true
`areaBorderColor`	面积边框颜色	String	颜色代码	系列颜色
`areaBorderThickness`	面积边框厚度	Number	1-5	1
`stack100Percent`	是否100%堆叠	Boolean	true/false	false
`showShadow`	是否显示阴影	Boolean	true/false	false
`shadowColor`	阴影颜色	String	颜色代码	"#000000"
`shadowAlpha`	阴影透明度	Number	0-100	30

6. RealTimeColumn (实时柱状图)

6.1 柱状图配置

配置项	说明	类型	可选值	默认值
`columnWidth`	柱宽百分比	Number	10-90	60
`showColumnShadow`	是否显示柱阴影	Boolean	true/false	false
`shadowAlpha`	阴影透明度	Number	0-100	40
`use3DLighting`	是否使用3D光照	Boolean	true/false	false
`columnBorderThickness`	柱边框厚度	Number	0-5	1
`columnBorderColor`	柱边框颜色	String	颜色代码	"#FFFFFF"
`showZeroPlane`	是否显示零平面	Boolean	true/false	true
`zeroPlaneColor`	零平面颜色	String	颜色代码	"#CCCCCC"

7. RealTimeStackedColumn (实时堆叠柱状图)

7.1 堆叠柱状图配置

配置项	说明	类型	可选值	默认值
`stack100Percent`	是否100%堆叠	Boolean	true/false	false
`showCumulativeValues`	是否显示累积值	Boolean	true/false	false
`cumulativeLabelFontSize`	累积标签字体大小	Number	8-72	12
`cumulativeLabelFontColor`	累积标签字体颜色	String	颜色代码	"#333333"
`plotSpacePercent`	绘图空间百分比	Number	0-100	80

8. HLED/VLED (水平/垂直LED图表)

8.1 LED通用配置

配置项	说明	类型	可选值	默认值
`value`	当前值	Number	任意数值	0
`minValue`	最小值	Number	任意数值	0
`maxValue`	最大值	Number	任意数值	100
`ledSize`	LED大小	Number	5-50	15
`ledSpacing`	LED间距	Number	0-20	2
`showValue`	是否显示值	Boolean	true/false	true
`valueFontSize`	值字体大小	Number	8-72	14

8.2 颜色范围配置

配置项	说明	类型	可选值	默认值
`colorRange`	颜色范围配置	Array	颜色范围对象数组	见下方示例
`useColorName`	是否使用颜色名称	Boolean	true/false	true

colorRange示例配置：

colorRange: [
  { minValue: 0, maxValue: 30, color: "#FF0000" },
  { minValue: 31, maxValue: 70, color: "#FFFF00" },
  { minValue: 71, maxValue: 100, color: "#00FF00" }
]

9. Cylinder (圆柱图)

9.1 圆柱图配置

配置项	说明	类型	可选值	默认值
`cylinderRadius`	圆柱半径百分比	Number	10-90	40
`cylinderHeight`	圆柱高度百分比	Number	10-90	80
`showCylinderBorder`	是否显示圆柱边框	Boolean	true/false	true
`cylinderBorderColor`	圆柱边框颜色	String	颜色代码	"#FFFFFF"
`cylinderBorderThickness`	圆柱边框厚度	Number	1-5	1
`fillColor`	填充颜色	String	颜色代码	"#1A80E5"
`fillAlpha`	填充透明度	Number	0-100	80
`showValue`	是否显示值	Boolean	true/false	true

10. Thermometer (温度计图)

10.1 温度计配置

配置项	说明	类型	可选值	默认值
`value`	当前温度值	Number	任意数值	0
`minValue`	最低温度	Number	任意数值	0
`maxValue`	最高温度	Number	任意数值	100
`thermometerHeight`	温度计高度	Number	50-500	200
`thermometerWidth`	温度计宽度	Number	10-100	30
`bulbRadius`	底部灯泡半径	Number	5-50	15
`showValue`	是否显示值	Boolean	true/false	true
`valueFontSize`	值字体大小	Number	8-72	14
`colorRange`	颜色范围配置	Array	颜色范围对象数组	见下方示例

colorRange示例配置：

colorRange: [
  { minValue: 0, maxValue: 30, color: "#0000FF" },
  { minValue: 31, maxValue: 60, color: "#00FF00" },
  { minValue: 61, maxValue: 100, color: "#FF0000" }
]

11. HLinearGauge (水平线性仪表)

11.1 仪表配置

配置项	说明	类型	可选值	默认值
`value`	当前值	Number	任意数值	0
`minValue`	最小值	Number	任意数值	0
`maxValue`	最大值	Number	任意数值	100
`gaugeLength`	仪表长度	Number	100-1000	300
`gaugeHeight`	仪表高度	Number	20-200	60
`showValue`	是否显示值	Boolean	true/false	true
`valueFontSize`	值字体大小	Number	8-72	14
`pointerLength`	指针长度百分比	Number	50-100	80
`pointerThickness`	指针厚度	Number	1-10	3
`pointerColor`	指针颜色	String	颜色代码	"#FF0000"

11.2 刻度配置

配置项	说明	类型	可选值	默认值
`majorTMNumber`	主刻度数量	Number	2-20	5
`minorTMNumber`	次刻度数量	Number	0-10	4
`majorTMHeight`	主刻度高度	Number	5-30	15
`minorTMHeight`	次刻度高度	Number	5-20	10
`majorTMColor`	主刻度颜色	String	颜色代码	"#333333"
`minorTMColor`	次刻度颜色	String	颜色代码	"#666666"

12. AngularGauge (角度仪表)

12.1 角度仪表配置

配置项	说明	类型	可选值	默认值
`value`	当前值	Number	任意数值	0
`minValue`	最小值	Number	任意数值	0
`maxValue`	最大值	Number	任意数值	100
`gaugeStartAngle`	仪表起始角度	Number	0-360	135
`gaugeEndAngle`	仪表结束角度	Number	0-360	45
`gaugeOuterRadius`	仪表外半径	Number	50-500	100
`gaugeInnerRadius`	仪表内半径	Number	0-450	0
`showValue`	是否显示值	Boolean	true/false	true
`valueFontSize`	值字体大小	Number	8-72	14

12.2 指针配置

配置项	说明	类型	可选值	默认值
`dialRadius`	指针半径百分比	Number	50-100	80
`dialThickness`	指针厚度	Number	1-20	5
`dialColor`	指针颜色	String	颜色代码	"#FF0000"
`pivotRadius`	轴点半径	Number	5-20	8
`pivotColor`	轴点颜色	String	颜色代码	"#333333"
`pivotBorderColor`	轴点边框颜色	String	颜色代码	"#FFFFFF"
`pivotBorderThickness`	轴点边框厚度	Number	1-5	2

13. Annotations (标注)

13.1 标注通用配置

配置项	说明	类型	可选值	默认值
`showBelow`	是否显示在图表下方	Boolean	true/false	false
`drawAnchors`	是否绘制锚点	Boolean	true/false	false
`id`	标注ID	String	唯一标识符	""
`type`	标注类型	String	"text"/"line"/"rectangle"/"circle"/"arc"/"image"/"polygon"/"path"	"text"

13.2 文本标注配置

配置项	说明	类型	可选值	默认值
`text`	标注文本	String	任意文本	""
`fontSize`	字体大小	Number	8-72	12
`fontColor`	字体颜色	String	颜色代码	"#000000"
`fontBold`	是否粗体	Boolean	true/false	false
`fontItalic`	是否斜体	Boolean	true/false	false
`x`	X坐标	Number	任意数值	0
`y`	Y坐标	Number	任意数值	0
`align`	对齐方式	String	left/center/right	"left"
`rotation`	旋转角度	Number	0-360	0

13.3 线条标注配置

配置项	说明	类型	可选值	默认值
`x1`	起点X坐标	Number	任意数值	0
`y1`	起点Y坐标	Number	任意数值	0
`x2`	终点X坐标	Number	任意数值	0
`y2`	终点Y坐标	Number	任意数值	0
`thickness`	线条厚度	Number	1-20	2
`color`	线条颜色	String	颜色代码	"#000000"
`dashed`	是否虚线	Boolean	true/false	false
`dashLen`	虚线长度	Number	1-50	5
`dashGap`	虚线间距	Number	1-50	5
`arrowAtStart`	起点是否带箭头	Boolean	true/false	false
`arrowAtEnd`	终点是否带箭头	Boolean	true/false	false
`arrowWidth`	箭头宽度	Number	1-20	5
`arrowHeight`	箭头高度	Number	1-20	5

14. 通用配置项详解

14.1 边距和填充配置

prop: ["captionPadding", "xAxisNamePadding", "yAxisNamePadding", "yAxisValuesPadding", "labelPadding", "valuePadding", "plotSpacePercent", "chartLeftMargin", "chartRightMargin", "chartTopMargin", "chartBottomMargin", "legendPadding", "canvasLeftMargin", "canvasRightMargin", "canvasTopMargin", "canvasBottomMargin"]

配置项	说明	类型	默认值
`captionPadding`	标题内边距	Number	10
`xAxisNamePadding`	X轴名称内边距	Number	5
`yAxisNamePadding`	Y轴名称内边距	Number	5
`yAxisValuesPadding`	Y轴值内边距	Number	5
`labelPadding`	标签内边距	Number	5
`valuePadding`	值内边距	Number	5
`plotSpacePercent`	绘图空间百分比	Number	80
`chartLeftMargin`	图表左边距	Number	10
`chartRightMargin`	图表右边距	Number	10
`chartTopMargin`	图表上边距	Number	10
`chartBottomMargin`	图表下边距	Number	10
`legendPadding`	图例内边距	Number	5
`canvasLeftMargin`	画布左边距	Number	10
`canvasRightMargin`	画布右边距	Number	10
`canvasTopMargin`	画布上边距	Number	10
`canvasBottomMargin`	画布下边距	Number	10

14.2 图例配置

配置项	说明	类型	可选值	默认值
`showLegend`	是否显示图例	Boolean	true/false	true
`legendPosition`	图例位置	String	top/bottom/left/right	"bottom"
`legendFontSize`	图例字体大小	Number	8-72	12
`legendFontColor`	图例字体颜色	String	颜色代码	"#333333"
`legendBgColor`	图例背景色	String	颜色代码	"#FFFFFF"
`legendBorderColor`	图例边框颜色	String	颜色代码	"#CCCCCC"
`legendBorderThickness`	图例边框厚度	Number	0-5	1
`legendShadow`	是否显示图例阴影	Boolean	true/false	false
`legendAllowDrag`	是否允许拖动图例	Boolean	true/false	false

14.3 工具提示配置

配置项	说明	类型	可选值	默认值
`showTooltip`	是否显示工具提示	Boolean	true/false	true
`tooltipBgColor`	工具提示背景色	String	颜色代码	"#000000"
`tooltipBorderColor`	工具提示边框颜色	String	颜色代码	"#666666"
`tooltipBorderThickness`	工具提示边框厚度	Number	0-5	1
`tooltipFontColor`	工具提示字体颜色	String	颜色代码	"#FFFFFF"
`tooltipFontSize`	工具提示字体大小	Number	8-72	12
`tooltipAlpha`	工具提示透明度	Number	0-100	90
`tooltipPadding`	工具提示内边距	Number	0-20	5
`tooltipSeparator`	工具提示分隔符	String	任意文本	": "

14.4 数值格式化配置

配置项	说明	类型	可选值	默认值
`numberPrefix`	数值前缀	String	任意文本	""
`numberSuffix`	数值后缀	String	任意文本	""
`decimalSeparator`	小数点分隔符	String	./,	"."
`thousandSeparator`	千分位分隔符	String	,/.\s	","
`decimalPrecision`	小数位数	Number	0-10	0
`formatNumber`	是否格式化数字	Boolean	true/false	true
`formatNumberScale`	是否格式化数字刻度	Boolean	true/false	true
`scaleUnit`	刻度单位	String	K/M/B/T	""
`numberScaleValue`	数字刻度值	Number	1000/1000000等	1000

15. 事件配置

15.1 通用事件

配置项	说明	类型	可选值	默认值
`clickURL`	点击图表时的URL	String	有效URL	""
`clickURLOpenInNewWindow`	是否在新窗口打开URL	Boolean	true/false	true
`onLoadComplete`	加载完成事件	String	JavaScript函数名	""
`onClick`	点击事件	String	JavaScript函数名	""
`onMouseOver`	鼠标悬停事件	String	JavaScript函数名	""
`onMouseOut`	鼠标移出事件	String	JavaScript函数名	""

结语

以上是OneCode组件库中所有图表类型的详细配置属性说明。这些配置项覆盖了从基础外观到高级交互的各个方面，通过灵活组合这些配置，可以创建出满足各种需求的可视化图表。实际使用时，建议结合具体场景选择合适的配置项，并参考官方文档获取更多示例和最佳实践。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

大数据可视交互系统

腾讯云低代码解决方案

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

大数据可视交互系统

腾讯云低代码解决方案