在开发之前,我想您应该知道关于图表的一些简单概念。一般情况下,F2 的图表包含坐标轴(Axis)、几何标记(Geometry)、提示信息(Tooltip)、图例(Legend)等。Axis,Tooltip,Legend等术语作用请见:官方文档 (opens new window)
# 1、oview如何开发一个图表?
<o-chart :data="normalData" :col-defs="normaColConfig" :tooltip="normalTootip">
<o-line :axis="normaAxis" :position="'date*value'"></o-line>
</o-chart>
其中由o-chart和o-line/o-pie/等组成。 一个o-chart有且只能有一个图表子节点
# 2、o-chart各个字段介绍
希望您能静下心来,花5分钟时间简单了解一下,o-chart各个字段的作用。o-chart主要作用是配置图表的公用属性,抽离不同图形公用方法,并根据类型不同,而渲染不同图形。
# data(数据源)
- 是否必须:True
- 参数类型:Array
- 描述:图表的数据源
- 默认:[]
# col-defs (数据源字段配置)
- 是否必须:False
- 参数类型:Object
- 描述:对上述提供的数据源中每个字段进行配置
- 默认:{}
一个示例:
//以折线图为例
<o-chart :data="normalData" :col-defs="normaColConfig" :tooltip="normalTootip">
<o-line :axis="normaAxis" :position="'date*value'"></o-line>
</o-chart>
//data部分
normaColConfig: {
//对每个字段配置
//正常的折线图每一个字段的配置
value: {
tickCount: 5, //坐标点的个数
min: 0
},
date: {
type: "timeCat", //时间类型
range: [0, 1],
tickCount: 3 //坐标点的个数
}
},
# custom-render(自定义渲染图表)
是否必须:False
参数类型:枚举,null, "prevent", "extra" 选项中的某个
描述:是否自定义渲染图表。
- null:不自定义渲染
- prevent:完全阻止组件渲染,完全由自己在回调方法中:灌数据,渲染图表等等(一般情况不建议使用此选项);
- extra: 自己在iview渲染的图表基础上,添加自定义操作。(建议使用此选项)
默认:null
说明:如果 custom-render为prevent或者extra则需要在o-chart部分添加@on-render监听。示例请见:雷达图示例 (opens new window)
<o-chart
:data="imageData"
:col-defs="imageColumnConfig"
custom-render="extra"
:height="300"
@on-render="onRender"
:chart-config="chartConfig"
>
<o-radar :axis="imageAxis" is-area custom-define :animate="animate" position="item*score"></o-radar>
</o-chart>
//onRender的入参为
onRender({ chart }) {
}
# legend (图例)
- 是否必须:False
- 参数类型:Object
- 描述:图例
- 默认:
{disable:true,fieldName:x轴}
- 说明: 图例分为两个部分 数据字段名称,配置信息,
{
fieldName:"",//数据字段的名称,默认是以X轴显示图例
disable:true,//是否显示图例,如果设置为true,则图例不可显示,若此字段不提供或者为false,则显示图例
...其他参数
}
其他参数:
图例的配置信息,支持的属性如下:
position
: String
设置图例的显示位置,可设置的值为:'top'、'right'、'bottom'、'left',分别表示上、右、下、左。默认为 top。
align
: String
当 position
为 'top','bottom' 时生效,用于设置水平方向上图例的对齐方式,可设置的值为:'left'、'center'、'right' ,默认为 'left' ,左对齐。
left(默认) | center | right |
---|---|---|
verticalAlign
: String
当 position
为 'left'、'right' 时生效,用于设置垂直方向上图例的对齐方式,可设置的值为:'top'、'middle'、'bottom',默认为 'middle',居中对齐。
middle(默认) | top | bottom |
---|---|---|
itemWidth
: Number/'auto'
用于设置每个图例项的宽度,默认为 'auto',即使用 F2 默认的图例布局计算 itemWidth
。如果 itemWidth
为 null,则会根据每个图例项自身的宽度计算,另外用户也可以自己设置 itemWidth
的数值。
showTitle
: Boolean
是否显示图例标题,默认值为 false,即不展示。
titleStyle
: Object
图例标题的显示样式设置,详见绘图属性 (opens new window)。
titleStyle: {
textAlign: 'center', // 文本对齐方向,可取值为: start middle end
fill: '#404040', // 文本的颜色
fontSize: 12, // 文本大小
fontWeight: 'bold', // 文本粗细
textBaseline: 'top' // 文本基准线,可取 top middle bottom,默认为middle
}
offsetX
: Number
图例 x 方向的整体偏移值,数值类型,数值单位为 'px',默认值为 0。
offsetY
: Number
图例 Y 方向的整体偏移值,数值类型,数值单位为 'px',默认值为 0。
titleGap
: Number
其他详细配置请见:Legend配置 (opens new window)
# tooltip (提示信息)
- 是否必须:False
- 参数类型:Object
- 描述:提示信息
- 默认:
{disable:true}
- 说明: 下面列出常用的tooltip配置,在某些情况需要获取到chart实例来进行操作的话,请使用自定义render:custom-render='extra'。tooltip自定义实例 (opens new window) 和 tooltip普通使用实例 (opens new window)
{
disable:true,//是否显示提示信息,如果设置为true,则提示信息不可显示,若此字段不提供或者为false,则显示提示信息
// 其他配置信息
alwaysShow: false, // 当移出触发区域,是否仍显示提示框内容,默认为 false,移出触发区域 tooltip 消失,设置为 true 可以保证一直显示提示框内容
offsetX: 0, // x 方向的偏移
offsetY: 0, // y 方向的偏移
triggerOn: [ 'touchstart', 'touchmove' ], // tooltip 出现的触发行为,可自定义,用法同 legend 的 triggerOn
triggerOff: 'touchend', // 消失的触发行为,可自定义
showTitle: false, // 是否展示标题,默认不展示
showCrosshairs: false, // 是否显示辅助线,点图、路径图、线图、面积图默认展示
crosshairsStyle: {
stroke: 'rgba(0, 0, 0, 0.25)',
lineWidth: 2
}, // 配置辅助线的样式
showTooltipMarker: true, // 是否显示 tooltipMarker
tooltipMarkerStyle: {
fill: '#fff' // 设置 tooltipMarker 的样式
},
background: {
radius: 2,
fill: '#1890FF',
padding: [ 6, 10 ]
}, // tooltip 内容框的背景样式
titleStyle: {
fontSize: 24,
fill: '#fff',
textAlign: 'start',
textBaseline: 'top'
}, // tooltip 标题的文本样式配置,showTitle 为 false 时不生效
nameStyle: {
fontSize: 24,
fill: '#fff',
textAlign: 'start',
textBaseline: 'middle'
}, // tooltip name 项的文本样式配置
valueStyle: {
fontSize: 24,
fill: '#fff',
textAlign: 'start',
textBaseline: 'middle'
}, // tooltip value 项的文本样式配置
showItemMarker: true, // 是否展示每条记录项前面的 marker
itemMarkerStyle: {
radius: 7,
symbol: 'circle',
lineWidth: 2,
stroke: '#fff'
}, // 每条记录项前面的 marker 的样式配置
custom: {Boolean}, // 是否自定义 tooltip 提示框
onShow(obj) {
// obj: { x, y, title, items }
}, // tooltip 显示时的回调函数
onHide(obj) {
// obj: { x, y, title, items }
}, // tooltip 隐藏时的回调函数
onChange(obj) {
// obj: { x, y, title, items }
}, // tooltip 内容发生改变时的回调函数
crosshairsType: {String}, // 辅助线的种类
showXTip: {Boolean}, // 是否展示 X 轴的辅助信息
showYTip: {Boolean}, // 是否展示 Y 轴的辅助信息
xTip: {Object}/{Function}, // X 轴辅助信息的文本样式
yTip: {Object}/{Function, // Y 轴辅助信息的文本样式
xTipBackground: {Object}, // X 轴辅助信息的背景框样式
yTipBackground: {Object}, // Y 轴辅助信息的背景框样式
snap: {Boolean} // 是否将辅助线准确定位至数据点
}
# chart-config (图表配置)
- 是否必须:False
- 参数类型:Object
- 描述:图表样式的配置,比如给图表添加内外边距(padding: [ 0, 10, 40, 100 ] // 分别设置上、右、下、左边距),给画布添加边距:appendPadding。所以chart-config应该为:
{padding:[ 0, 10, 40, 100 ],appendPadding:[20,10,30,12]}
- 默认:{}
# width/height
- 是否必须:False
- 参数类型:Number/String:百分比和像素两种类型
- 描述:图表的宽度和高度
- 默认:图表宽度,默认为:100%;图表高度,默认为:300
- 你可以填:width="100%"/width="100"/ width="100px",如果为width="100"即数字类型,将会转换成100px,默认是整个parent容器的宽度:100%
# backgroundColor
- 是否必须:False
- 参数类型:String
- 描述:图表背景颜色
- 默认:#ffffff (白色)
# scale
- 是否必须:False
- 参数类型:Object
- 描述:度量 Scale,是数据空间到图形空间的转换桥梁,负责原始数据到 [0, 1] 区间数值的相互转换工作。针对不同的数据类型对应不同类型的度量。
- 默认:{}
- 说明:示例请见面积图 (opens new window)
- 本文链接: https://mrgaogang.github.io/article/oview/Chart.html
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 许可协议。转载请注明出处!
← 系统性思考及系统循环图 移动端饼状图 →