ehcart4 自定义 箱型图(盒须图)

为了解决自带的箱线图无法设置median线的颜色，所以决定通过接口自己来绘制箱线图

准备：如果echart定制下载的必须包含自定义功能模块

自定义回调函数代码如下：

var customBoxPlotMedianColor = "red";

function renderCustomBoxPlotItem(params, api) {
    //[min,  Q1,  median (or Q2),  Q3,  max]

    var xValue = api.value(0);
    var minPoint = api.coord([xValue, api.value(1)]);//根据数据点，获取点实际坐标
    var q1 = api.coord([xValue, api.value(2)]);
    var median = api.coord([xValue, api.value(3)]);
    var q3 = api.coord([xValue, api.value(4)]);
    var maxPoint = api.coord([xValue, api.value(5)]);
    var width = api.size([1, 0])[0] * 0.8;
    var halfWidth = width * 0.5;
    var itemStyle = api.style();
    var medianStyle = api.style({
        stroke: customBoxPlotMedianColor,
        fill: null
    });

    var x1 = maxPoint[0] - halfWidth;
    var x2 = maxPoint[0] + halfWidth;


    return {
        type: 'group',
        children: [{
                type: 'line',
                shape: {
                    x1: x1,
                    y1: maxPoint[1],
                    x2: x2,
                    y2: maxPoint[1]
                },
                style: itemStyle
            }, {
                type: 'line', //上面连接线
                shape: {
                    x1: maxPoint[0],
                    y1: maxPoint[1],
                    x2: q3[0],
                    y2: q3[1]
                },
                style: itemStyle
            },
            {
                type: 'rect', //box
                shape: {
                    x: q3[0] - halfWidth,
                    y: q3[1],
                    width: width,
                    height: q1[1] - q3[1]
                },
                style: itemStyle
            },
            {
                type: 'line', //下面连接线
                shape: {
                    x1: q1[0],
                    y1: q1[1],
                    x2: minPoint[0],
                    y2: minPoint[1]
                },
                style: itemStyle
            }, {
                type: 'line', //底部线
                shape: {
                    x1: x1,
                    y1: minPoint[1],
                    x2: x2,
                    y2: minPoint[1]
                },
                style: itemStyle
            },
            {
                type: 'line', //中间线median最后绘制来保证在最上层
                shape: {
                    x1: x1,
                    y1: median[1],
                    x2: x2,
                    y2: median[1]
                },
                style: medianStyle
            }
        ]
    };
}

注意一定要设置series里面的encode映射，否则会干扰tooltips等参数使用：

 {
            name: 'box',
            type: 'custom',
            showSymbol: false,
            encode: {
                x: 0,
                y: [1, 2, 3, 4, 5],
                tooltip: [1, 2, 3, 4, 5]
            },
            itemStyle: {
                borderColor: "#666",
                color: "yellow"
            },
            renderItem: renderCustomBoxPlotItem,
            animation: false,
            data: plotData
        }

完整代码查看echarts作品

https://gallery.echartsjs.com/editor.html?c=xyoARBmEPV