使用vue2+echarts实现的误差线图
option = {
title: {
text: '误差线图'
},
legend: { top: '5%', left: 'center' },
xAxis: {
data: ['x1', 'x2', 'x3']
},
yAxis: {
// 选取合适的yAxis取值范围, 保证曲线展示在图表中心位置
min: function (value) {
let yRange = 3;
return Math.floor(value.min > yRange ? value.min - yRange : value.min);
},
max: function (value) {
let yRange = 3;
//取最大值向上取整为最大刻度
return Math.ceil(value.max + yRange);
}
},
series: [
{
type: 'custom',
// name: '误差范围',
// 误差线样式
itemStyle: {
borderWidth: 2,
color: 'green'
},
renderItem: function (params, api) {
let xValue = api.value(0);
// 下面线的中心坐标
let lowPoint = api.coord([xValue, api.value(1)]);
// 上面线的中心坐标
let highPoint = api.coord([xValue, api.value(2)]);
console.log(highPoint, lowPoint);
let style = api.style({
stroke: api.visual('color'),
fill: undefined
});
return {
type: 'group',
children: [
// 误差线上方点
{
type: 'ring',
transition: ['shape'],
shape: {
cx: highPoint[0],
cy: highPoint[1] - 6,
r: 6,
},
style: {
fill: '#fff',
stroke: 'pink',
lineWidth: 2,
}
},
// 误差线条
{
type: 'line',
transition: ['shape'],
shape: {
x1: highPoint[0],
y1: highPoint[1],
x2: lowPoint[0],
y2: lowPoint[1],
},
style: style
},
// 误差线下方点
{
type: 'ring',
transition: ['shape'],
shape: {
cx: lowPoint[0],
cy: lowPoint[1] + 6,
r: 6,
},
style: {
fill: '#fff',
stroke: 'purple',
lineWidth: 2,
}
},
]
};
},
// 定义数据和图形元素的映射关系
// 如data[0] = [0, 160.79363960585394, 167.03636039414604]
// 0会被映射在x轴上, 剩余的两个索引1,2对应的数字会映射在y轴上
encode: {
x: 0,
y: [1, 2]
},
// 误差线数据-实际情况需要根据后端返回的high、low数据进行组合计算
data: [
[0, 160.79363960585394, 167.03636039414604],
[1, 154.6824268539158, 159.5025731460842],
[2, 155.6824268539158, 165.6025731460842]
],
// z: 100
},
{
type: 'line',
name: '均值',
data: [163.915, 157.0925, 160.0925],
// splitLine: {
// show: false
// },
symbol: 'none',
// 折线样式
lineStyle: {
borderWidth: 2,
color: 'red',
},
}
]
}
效果如下: