考虑到后期在做统计时可能还需要用到,在这里就做一个记录吧。
var dimensions = [
'name', '平均值', '', '', '', '最小值', '最大值'
]
var data = [
// 第一个值为点,平均值、第二个值为x轴坐标、第三个值没用、第四个值没用、第五个值为最小值、第六个值为最大值
['< 9.9mm', 98, 50, 0, 0, 76, 120],
['9.9mm-25mm', 155.8, 100, 126.03, 156.03, 129.8, 188.8],
['24.9mm-49.9mm', 203.25, 150, 151.56, 187.56, 183.25, 249.25],
['44.9mm-99.9mm', 256, 200, 98.5, 136.5, 236, 279]
]
function renderItem (params, api) {
var children = []
var coordDims = ['x', 'y']
for (var baseDimIdx = 0; baseDimIdx < 1; baseDimIdx++) {
var otherDimIdx = 1 - baseDimIdx
var encode = params.encode
var baseValue = api.value(encode[coordDims[baseDimIdx]][0])
var param = []
param[baseDimIdx] = baseValue
param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1])
var highPoint = api.coord(param)
param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2])
var lowPoint = api.coord(param)
var halfWidth = 10
var style = api.style({
stroke: api.visual('color'),
fill: null
})
children.push({
type: 'line',
transition: ['shape'],
shape: makeShape(
baseDimIdx,
highPoint[baseDimIdx] - halfWidth, highPoint[otherDimIdx],
highPoint[baseDimIdx] + halfWidth, highPoint[otherDimIdx]
),
style: api.style({
stroke: "#70E0B8",
fill: null
})
}, {
type: 'line',
transition: ['shape'],
shape: makeShape(
baseDimIdx,
highPoint[baseDimIdx], highPoint[otherDimIdx],
lowPoint[baseDimIdx], lowPoint[otherDimIdx]
),
style: style
}, {
type: 'line',
transition: ['shape'],
shape: makeShape(
baseDimIdx,
lowPoint[baseDimIdx] - halfWidth, lowPoint[otherDimIdx],
lowPoint[baseDimIdx] + halfWidth, lowPoint[otherDimIdx]
),
style: api.style({
stroke: "#FF3E3E",
fill: null
})
})
}
function makeShape (baseDimIdx, base1, value1, base2, value2) {
var shape = {}
shape[coordDims[baseDimIdx] + '1'] = base1
shape[coordDims[1 - baseDimIdx] + '1'] = value1
shape[coordDims[baseDimIdx] + '2'] = base2
shape[coordDims[1 - baseDimIdx] + '2'] = value2
return shape
}
return {
type: 'group',
children: children
}
}
let option = {
tooltip: {
},
grid: {
top: '16%',
left: 0,
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis: {},
yAxis: {},
series: [{
type: 'scatter',
name: 'error',
data: data,
dimensions: dimensions,
encode: {
x: 2,
y: 1,
tooltip: [6, 1, 5],
itemName: 0
},
itemStyle: {
color: '#77bef7'
}
}, {
type: 'custom',
name: 'error',
renderItem: renderItem,
dimensions: dimensions,
encode: {
x: [2, 3, 4],
y: [1, 5, 6],
tooltip: [6, 1, 5],
itemName: 0
},
data: data,
z: 100
}]
}