亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

有沒有辦法將錯誤欄添加到 Echarts 庫

有沒有辦法將錯誤欄添加到 Echarts 庫

小怪獸愛吃肉 2022-06-16 17:18:18
我正在使用 Vue Js 和 Echarts 庫來構建一些圖表。我有一種情況,我需要計算一些數據的標準偏差和平均值。該系列是平均水平。我想添加如下截圖所示的錯誤欄,以在圖表中顯示 STD DEV。無論如何將錯誤欄添加到Echart?感謝您的努力和幫助!
查看完整描述

1 回答

?
狐的傳說

TA貢獻1804條經驗 獲得超3個贊

這可能是你想要的嗎?


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,

    }]

};

從這里重做


查看完整回答
反對 回復 2022-06-16
  • 1 回答
  • 0 關注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號