在 ECharts 中显示未映射到 xAxis 的系列数据

Question

我有一个 ECharts 折线图，当 yAxis 系列数组数据与 xAxis 数据具有相同长度时，它可以显示我的数据（在下面的代码和图像中，我认为这意味着它们是“完美匹配”和绑定的，例如

['0', 59.4], ['4', 65.7]

等）。

但我也想做一些没有显示在 xAxis 中的数据也可以绑定。例如像

['3', 60.1]

这样的数据（这意味着当x为3时，y为60.1）也应该被绑定。我如何在 ECharts 中制作它？

var option = {
    xAxis: {
        type: 'category',
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: {
            color: '#333333',
            fontSize: '11',
          }
        },
        boundaryGap: false,
        data: ['0', '4', '8', '12', '16', '20', '24'],
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'A',
        type: 'line',
        smooth: true,
        data: [59.4, 65.7, 69.8, 73.3, 76.5, 77.7, 78.1]
      }, {
        name: 'B',
        type: 'line',
        smooth: true,
        data: [60.7, 67.1, 71.4, 74.9, 78.1, 78.8, 79.2]
    }]
};

Answer 1

中间值应该有一个值（不是类别）x 轴。有两种可能：

1. 更改现有轴，使其成为值轴；这意味着您必须调整原始数据集以包含 x 值：

var option = {
    xAxis: [{
        type: 'value',
        axisLabel: {
            show: true,
            interval: 4,
            textStyle: {
                color: '#333333',
                fontSize: '11',
            }
        },
        min:0,
        max: 24,
        minInterval: 4,
        maxInterval: 4,
        boundaryGap: false,
        data: [0, 4, 8, 12, 16, 20, 24],
    },{
        type: 'value',
        min: 0,
        max: 24,
        show: false
    }],
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'A',
        type: 'line',
        smooth: true,
        data: [[0,59.4], [4,65.7], [8,69.8], [12,73.3], [16,76.5], [20,77.7], [24, 78.1]]
    }, {
        name: 'B',
        type: 'line',
        xAxisIndex: 1,
        smooth: true,
        data: [[3, 60.7], [6,67.1], [9, 71.4], [12, 74.9], [15,78.1], [18, 78.8], [21, 79.2]]
    }]
};
    
const myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="height:350px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

2. 添加第二个值轴，不可见，仅用于新数据。在这种情况下应注意确保新轴与默认类别轴处于相同位置。

var option = {
    xAxis: [{
        type: 'category',
        axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
                color: '#333333',
                fontSize: '11',
            }
        },
        boundaryGap: false,
        data: [0, 4, 8, 12, 16, 20, 24],
    },{
        type: 'value',
        min: 0,
        max: 24,
        show: false
    }],
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'A',
        type: 'line',
        smooth: true,
        data: [59.4, 65.7, 69.8, 73.3, 76.5, 77.7, 78.1]
    }, {
        name: 'B',
        type: 'line',
        xAxisIndex: 1,
        smooth: true,
        data: [[3, 60.7], [6,67.1], [9, 71.4], [12, 74.9], [15,78.1], [18, 78.8], [21, 79.2]]
    }]
};

const myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="height:350px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>