前言
在数据可视化日益成为业务决策核心驱动力的今天,高效、灵活的图表配置系统已成为开发人员不可或缺的工具。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组件库中所有图表类型的详细配置属性说明。这些配置项覆盖了从基础外观到高级交互的各个方面,通过灵活组合这些配置,可以创建出满足各种需求的可视化图表。实际使用时,建议结合具体场景选择合适的配置项,并参考官方文档获取更多示例和最佳实践。