配置项
option = {
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘shadow’
}
},
title: {
text: ‘区间图’
},
legend: {
data: [‘平均值’]
},
xAxis: {
type: ‘value’,
},
yAxis: {
data:categoryData
},
series: [
{
type: ‘scatter’,
name: ‘average’,
data: pointData,
seriesLayoutBy:‘row’,
encode: {
x: [2,3],
y: 1
},
itemStyle: {
color: ‘#77bef7’
}
},
{
type: ‘custom’,
name: ‘平均值’,
renderItem: function renderItem(params, api) {
var yValue = api.value(0); //对应几个y轴上的项
var lowPoint = api.coord([api.value(2),yValue]); // 左起点【15,‘平均数’】【20,中位数】
var highPoint = api.coord([api.value(3),yValue]); // 右终点【156,‘平均数’】【180,中位数】
var halfWidth = 15
var style = api.style({
stroke: api.visual(‘color’),
fill: null
});
return {
type: 'group', //左边
children: [
{
type: 'line',
shape: {
x1: lowPoint[0],
y1: lowPoint[1]+halfWidth,
x2: lowPoint[0],
y2: lowPoint[1]-halfWidth
},
style: style
},
{
//中间横线
type: 'line',
shape: {
x1: lowPoint[0],//[15]
y1: highPoint[1],//[中位数]
x2: highPoint[0],//[156]
y2: lowPoint[1]//[中位数]
},
style: style
},
{
//右边
type: 'line',
shape: {
x1: highPoint[0],
y1: highPoint[1]+halfWidth,
x2: highPoint[0],
y2: highPoint[1]-halfWidth
},
style: style
}
]
};
},
seriesLayoutBy:'row',
encode: {
x: [2,3],
y: 1,
tooltip: [ 2,3],
},
data: msgData,
z: 100,
}
]
};
数据结构
const dimensions = categoryData = [
'平均数',
'中位数'
];
// prettier-ignore
const pointData = [
[0, ‘平均数’,115],
[1, ‘中位数’,122.5],
];
const msgData = [
[0,‘平均数’,15, 156],
[1,‘中位数’,20,180],
];
option = {
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘shadow’
}
},
title: {
text: ‘区间图’
},
legend: {
data: [‘平均值’]
},
xAxis: {
data: categoryData
},
yAxis: {},
series: [
{
type: 'scatter',
name: 'average',
data: pointData,
encode: {
single: 3
},
itemStyle: {
color: '#77bef7'
}
},
{
type: 'custom',
name: '平均值',
renderItem: function renderItem(params, api) {
var xValue = api.value(0);
var lowPoint = api.coord([xValue, api.value(1)]); //得到下面线的中心坐标
var highPoint = api.coord([xValue, api.value(2)]); //得到上面线的中心坐标
var halfWidth = api.size([1, 0])[0] * 0.1; //根据x轴索引为1的数值得到所在的映射宽度*0.1
var style = api.style({
stroke: api.visual('color'),
fill: null
});
return {
type: 'group', //上面那条线
children: [
{
type: 'line',
shape: {
x1: highPoint[0] - halfWidth,
y1: highPoint[1],
x2: highPoint[0] + halfWidth,
y2: highPoint[1]
},
style: style
},
{
//中间垂直线
type: 'line',
shape: {
x1: highPoint[0],
y1: highPoint[1],
x2: lowPoint[0],
y2: lowPoint[1]
},
style: style
},
{
//下面那条线
type: 'line',
shape: {
x1: lowPoint[0] - halfWidth,
y1: lowPoint[1],
x2: lowPoint[0] + halfWidth,
y2: lowPoint[1]
},
style: style
}
]
};
},
encode: {
x: [2],
y: [1, 2],
},
data: msgData,
z: 100,
}
]
};
数据类型
var categoryData = [
"2023-2-12",
"2023-2-13",
"2023-2-14",
"2023-2-15"]
var pointData = [
[0, 115],
[1, 122.5],
[2, 106],
[3,106.5],
]
var msgData = [
[0, 74, 156],
[1, 90, 155],
[2, 77, 135],
[3, 68, 145]
]