Отрегулируйте положение символа серии линейного графика с помощью echarts - PullRequest
Новая
       110

Отрегулируйте положение символа серии линейного графика с помощью echarts

0 голосов
/ 30 января 2020

Я создал диаграмму в E-Chart. Он имеет две вертикальные полосы с двумя линиями над ними. Мне нужно разместить символы на пересечении столбцов и линий. Это должно быть похоже на первый график на рисунке

Но на моем графике позиция символа размещена на значении оси x. Пожалуйста, обратитесь ко второму графику. Есть ли возможный способ изменить положение символов.

Ссылка на изображение: https://i.stack.imgur.com/rh1Tc.jpg

1 Ответ

0 голосов
/ 30 января 2020

Вы можете выровнять столбцы и линейные символы, добавив пустые значения или пустые значения в каждую серию данных. Вот пример варианта: 

option = {
    xAxis: [
        {
            // true axis for all bar and line series
            type: 'category',
            show: false,
            data: [1,1,2,2,3,3,4,4,5,5]
        },
        {
            // axis used for display; not associated with any series
            type: 'category',
            show: true,
            position: 'bottom',
            data: [1,2,3,4,5]
        }
    ],
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        // xAxisIndex associates the series with the first (real) x-axis; may not be strictly necessary, but included for clarity
        xAxisIndex: 0,
        itemStyle: {
            barBorderRadius: 12
        },
        color: '#1ab7c8',
        // barGap is used to center the bar over the x-axis value, in line with the line symbol
        barGap: '-100%',
        barWidth: 32,
        data: [50, '-', 40, '-', 55, '-', 65, '-', 50]
    },
{
        type: 'bar',
        xAxisIndex: 0,
        itemStyle: {
            barBorderRadius: 12
        },
        color: '#fa6176',
        barWidth: 32,
        data: ['-', 50, '-', 40, '-', 64, '-', 25, '-', 50]
    },
    {
        type: 'line',
        xAxisIndex: 0,
        color: '#1ab7c8',
        symbolSize: 16,
        // connectNulls is used to connect lines across the blank values
        connectNulls: true,
        data: [53, '-', 52, '-', 79, '-', 68, '-', 79]
    },
    {
        type: 'line',
        xAxisIndex: 0,
        color: '#fa6176',
        symbolSize: 16,
        connectNulls: true,
        data: ['-', 53, '-', 55, '-', 75, '-', 90, '-', 75]
    }
    ]
};

Вот изображение отрендеренной диаграммы .

Здесь приведены ссылки на документы по некоторым из соответствующих параметров конфигурации диаграммы echarts:

...