有没有办法将错误栏添加到 Echarts 库

Question

我正在使用 Vue Js 和 Echarts 库来构建一些图表。我有一种情况，我需要计算一些数据的标准偏差和平均值。该系列是平均水平。我想添加如下截图所示的错误栏，以在图表中显示 STD DEV。

无论如何将错误栏添加到Echart？感谢您的努力和帮助！

Answer 1

这可能是你想要的吗？var categoryData = [];var errorData = [];var barData = [];var dataCount = 50;for (var i = 0; i < dataCount; i++) {&nbsp; &nbsp; var val = Math.random() * 1000;&nbsp; &nbsp; categoryData.push('category' + i);&nbsp; &nbsp; errorData.push([&nbsp; &nbsp; &nbsp; &nbsp; i,&nbsp; &nbsp; &nbsp; &nbsp; echarts.number.round(Math.max(0, val - Math.random() * 100)),&nbsp; &nbsp; &nbsp; &nbsp; echarts.number.round(val + Math.random() * 80)&nbsp; &nbsp; ]);&nbsp; &nbsp; barData.push(echarts.number.round(val, 2));}function renderItem(params, api) {&nbsp; &nbsp; var xValue = api.value(0);&nbsp; &nbsp; var highPoint = api.coord([xValue, api.value(1)]);&nbsp; &nbsp; var lowPoint = api.coord([xValue, api.value(2)]);&nbsp; &nbsp; var halfWidth = api.size([1, 0])[0] * 0.1;&nbsp; &nbsp; var style = api.style({&nbsp; &nbsp; &nbsp; &nbsp; stroke: api.visual('color'),&nbsp; &nbsp; &nbsp; &nbsp; fill: null&nbsp; &nbsp; });&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; type: 'group',&nbsp; &nbsp; &nbsp; &nbsp; children: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x1: highPoint[0] - halfWidth, y1: highPoint[1],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x2: highPoint[0] + halfWidth, y2: highPoint[1]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style: style&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x1: highPoint[0], y1: highPoint[1],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x2: lowPoint[0], y2: lowPoint[1]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style: style&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shape: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x1: lowPoint[0] - halfWidth, y1: lowPoint[1],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x2: lowPoint[0] + halfWidth, y2: lowPoint[1]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style: style&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; };}option = {&nbsp; &nbsp; tooltip: {&nbsp; &nbsp; &nbsp; &nbsp; trigger: 'axis',&nbsp; &nbsp; &nbsp; &nbsp; axisPointer: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'shadow'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; &nbsp; text: 'Avg/Error chart'&nbsp; &nbsp; },&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; &nbsp; data: ['avg', 'error']&nbsp; &nbsp; },&nbsp; &nbsp; dataZoom: [{&nbsp; &nbsp; &nbsp; &nbsp; type: 'slider',&nbsp; &nbsp; &nbsp; &nbsp; start: 50,&nbsp; &nbsp; &nbsp; &nbsp; end: 70&nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; type: 'inside',&nbsp; &nbsp; &nbsp; &nbsp; start: 50,&nbsp; &nbsp; &nbsp; &nbsp; end: 70&nbsp; &nbsp; }],&nbsp; &nbsp; xAxis: {&nbsp; &nbsp; &nbsp; &nbsp; data: categoryData&nbsp; &nbsp; },&nbsp; &nbsp; yAxis: {},&nbsp; &nbsp; series: [{&nbsp; &nbsp; &nbsp; &nbsp; type: 'scatter',&nbsp; &nbsp; &nbsp; &nbsp; name: 'avg',&nbsp; &nbsp; &nbsp; &nbsp; data: barData,&nbsp; &nbsp; &nbsp; &nbsp; itemStyle: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: '#77bef7'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; type: 'custom',&nbsp; &nbsp; &nbsp; &nbsp; name: 'error',&nbsp; &nbsp; &nbsp; &nbsp; itemStyle: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; normal: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1.5&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; renderItem: renderItem,&nbsp; &nbsp; &nbsp; &nbsp; encode: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: [1, 2]&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; data: errorData,&nbsp; &nbsp; }]};从这里重做