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

【问题标题】：Is there a way to add Error bar to Echarts library有没有办法将错误栏添加到 Echarts 库
【发布时间】：2020-04-06 10:38:47
【问题描述】：

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

有没有在 Echart 中添加错误栏？感谢您的努力和帮助！

【问题讨论】：

标签： javascript vue.js charts echarts

【解决方案1】：

这就是你想要的吗？

var categoryData = [];
var errorData = [];
var barData = [];
var dataCount = 50;
for (var i = 0; i < dataCount; i++) {
    var val = Math.random() * 1000;
    categoryData.push('category' + i);
    errorData.push([
        i,
        echarts.number.round(Math.max(0, val - Math.random() * 100)),
        echarts.number.round(val + Math.random() * 80)
    ]);
    barData.push(echarts.number.round(val, 2));
}

function renderItem(params, api) {
    var xValue = api.value(0);
    var highPoint = api.coord([xValue, api.value(1)]);
    var lowPoint = api.coord([xValue, api.value(2)]);
    var halfWidth = api.size([1, 0])[0] * 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
        }]
    };
}

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    title: {
        text: 'Avg/Error chart'
    },
    legend: {
        data: ['avg', 'error']
    },
    dataZoom: [{
        type: 'slider',
        start: 50,
        end: 70
    }, {
        type: 'inside',
        start: 50,
        end: 70
    }],
    xAxis: {
        data: categoryData
    },
    yAxis: {},
    series: [{
        type: 'scatter',
        name: 'avg',
        data: barData,
        itemStyle: {
            color: '#77bef7'
        }
    }, {
        type: 'custom',
        name: 'error',
        itemStyle: {
            normal: {
                borderWidth: 1.5
            }
        },
        renderItem: renderItem,
        encode: {
            x: 0,
            y: [1, 2]
        },
        data: errorData,
    }]
};

从here重做

【讨论】：

【解决方案2】：

我不确定我是否理解正确，但您需要添加带有错误数据的新系列并将符号更改为圆圈。像这样：https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity

您是如何尝试做到这一点的？请出示代码。

【讨论】：