const data= [
//名称，y值，x值，x值误差高点，x值误差低点
["Blouse1",
0.2862,
0.2172,
0.3172,
0.1172,
],
["Blouse2",
0.4472,
0.2245,
0.3245,
0.1245,
],
["Blouse3",
0.6513,
0.2284,
0.3284,
0.1284
],
["Blouse4",
1.4909,
0.2286,
0.3286,
0.1286,
]
]
function renderItem(params, api) {
const group = {
type: 'group',
children: []
};
let coordDims = ['x', 'y'];
for (let baseDimIdx = 0; baseDimIdx < 2; baseDimIdx++) {
let otherDimIdx = 1 - baseDimIdx;
let encode = params.encode;
let baseValue = api.value(encode[coordDims[baseDimIdx]][0]);
let param = [];
param[baseDimIdx] = baseValue;
param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]);
let highPoint = api.coord(param);
param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]);
let lowPoint = api.coord(param);
let halfWidth = 5;
var style = api.style({
stroke: api.visual('color'),
fill: undefined
});
group.children.push(
{
type: 'line',
transition: ['shape'],
shape: makeShape(
baseDimIdx,
highPoint[baseDimIdx] - halfWidth,
highPoint[otherDimIdx],
highPoint[baseDimIdx] + halfWidth,
highPoint[otherDimIdx]
),
style: style
},
{
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: style
}
);
}
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 group;
}
option = {
tooltip: {},
legend: {
data: ['bar', 'error']
},
dataZoom: [
{
type: 'slider'
},
{
type: 'inside'
}
],
grid: {
bottom: 80
},
xAxis: {},
yAxis: {},
series: [
{
type: 'scatter',
name: 'error',
smooth:true,
data: data,
encode: {
x: 2,
y: 1
},
},
{
type: 'custom',
name: 'error',
renderItem: renderItem,
encode: {
x: [2, 3, 4],
y: [1, 5, 6],
tooltip: [2, 1, 3, 4, 5, 6],
itemName: 0
},
data: data,
z: 100
}
]
};