使用echarts调整折线图系列符号的位置

使用echarts调整折线图系列符号的位置,charts,bar-chart,linechart,echarts,Charts,Bar Chart,Linechart,Echarts,我在电子海图中创建了一个图表。它有两个竖条,上面有两条线。 我需要把符号放在横线和直线的交叉处。它应该像图片中的第一张图表 但在我的图表中,符号位置位于xaxis值上。请参考第二张图表。 有没有可能改变符号位置的方法 图像链接:您可以通过在每个数据系列中插入空值或空白值来对齐条形和线条符号。下面是一个示例选项: option = { xAxis: [ { // true axis for all bar and line series

我在电子海图中创建了一个图表。它有两个竖条,上面有两条线。 我需要把符号放在横线和直线的交叉处。它应该像图片中的第一张图表

但在我的图表中,符号位置位于xaxis值上。请参考第二张图表。 有没有可能改变符号位置的方法


图像链接:

您可以通过在每个数据系列中插入空值或空白值来对齐条形和线条符号。下面是一个示例选项:

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]
    }
    ]
};
这是一个例子

以下是一些相关eChart图表配置选项的文档链接: