How to remove the display of the upper border of the chart grid in ngx-echarts?

Discussão em 'Angular' iniciado por Vlad, Março 18, 2025.

  1. Vlad

    Vlad Guest

    I am trying to create a beautiful chart to visualize the dynamics of school students' performance.

    I am using Angular version 17.3.0, ECharts version 5.5.1, and ngx-echarts version 17.2.0.

    I have this config:

    {
    grid: {
    left: 20,
    right: 25,
    top: 0,
    bottom: 40,
    },
    xAxis: {
    type: 'category',
    data: [
    '9 фев',
    '16 фев',
    '23 фев',
    '1 мар',
    '8 мар',
    '15 мар',
    '22 мар',
    '29 мар',
    '5 апр',
    '12 апр',
    ],
    boundaryGap: false,
    axisLabel: {
    interval: 0,
    overflow: 'truncate',
    color: '#86909C',
    fontSize: 14,
    fontWeight: 'normal',
    margin: 10,
    formatter: (value: string) => {
    const [day, month] = value.split(' ');
    return `{a|${day}}\n{b|${month}}`;
    },
    rich: {
    a: {
    fontSize: 14,
    align: 'center',
    },
    b: {
    fontSize: 14,
    align: 'center',
    },
    },
    },
    axisLine: {
    show: false,
    },
    axisTick: {
    show: false,
    },
    splitLine: {
    show: true,
    lineStyle: {
    type: 'dashed',
    },
    },
    },
    yAxis: {
    type: 'value',
    min: 1,
    max: 6,
    interval: 1,
    position: 'right',
    splitLine: {
    show: true,
    lineStyle: {
    type: 'solid',
    },
    },
    axisLabel: {
    color: '#0B1F33',
    fontSize: 16,
    fontWeight: 'bold',
    margin: 12,
    formatter: (value: number) => {
    if (value < 2 || value > 5) {
    return '';
    } else {
    return value.toString();
    }
    },
    },
    },
    series: [
    {
    name: 'Test',
    type: 'line',
    smooth: true,
    data: [null, 4, null, null, 4.57, 5, 4],
    connectNulls: true,
    emphasis: {
    focus: 'series',
    },
    itemStyle: {
    color: '#0E69D5',
    borderColor: '#ffffff',
    borderWidth: 1,
    },
    lineStyle: {
    color: '#185AC5',
    },
    symbol: 'circle',
    symbolSize: 7,
    markLine: {
    symbol: 'none',
    tooltip: { show: false },
    label: { show: false },
    data: [
    {
    xAxis: 6,
    lineStyle: {
    color: '#0E69D5',
    width: 1,
    type: 'solid',
    },
    emphasis: {
    disabled: true,
    },
    },
    ],
    },
    areaStyle: {
    color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
    { offset: 0, color: 'rgba(192, 216, 253, 0.80)' },
    { offset: 1, color: 'rgba(237, 247, 255, 0.08)' },
    ],
    },
    },
    },
    ],
    }



    This is how it looks: [​IMG] How can I hide the line I marked in red? Or is this impossible to do with ECharts? If it’s impossible, could you please recommend other libraries?

    Continue reading...

Compartilhe esta Página