有没有办法将错误栏添加到 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++) {

    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,

    }]

};

从这里重做