// 使用 "custom series" 实现 OHLC 图
option = {
...,
series: [{
name: 'Dow-Jones index (OHLC)',
type: 'custom',
dimensions: [null, 'open', 'close', 'lowest', 'highest'],
encode: {
x: 0,
y: [1, 2, 3, 4],
tooltip: [1, 2, 3, 4]
},
data: [...],
// 在 renderItem 表达自定义的逻辑。
renderItem: renderItem
}]
}
// 为每个数据项调用一次
function renderItem(params, api) {
// 取得数值
var xValue = api.value(0);
// 数值转换为坐标系的点
var openPoint = api.coord([xValue, api.value(1)]);
var closePoint = api.coord([xValue, api.value(2)]);
var lowPoint = api.coord([xValue, api.value(3)]);
var highPoint = api.coord([xValue, api.value(4)]);
var halfWidth = api.size([1, 0])[0] * 0.35;
var style = api.style({
stroke: api.visual('color')
});
// 构造图形元素
return {
type: 'group',
children: [{
type: 'line',
shape: {
x1: lowPoint[0], y1: lowPoint[1],
x2: highPoint[0], y2: highPoint[1]
},
style: style
}, {
type: 'line',
shape: {
x1: openPoint[0], y1: openPoint[1],
x2: openPoint[0] - halfWidth, y2: openPoint[1]
},
style: style
}, {
type: 'line',
shape: {
x1: closePoint[0], y1: closePoint[1],
x2: closePoint[0] + halfWidth, y2: closePoint[1]
},
style: style
}]
};
}