如何让ECharts的X轴宽度与对应数值成比例？

要让X轴区间宽度和数值跨度成正比，你需要调整X轴的类型并修改数据格式，具体操作如下：

问题原因 #

你当前使用的是category类型的X轴，这种类型会将每个数据点视为独立分类，强制所有区间等宽显示，完全忽略数值本身的跨度差异。

解决方案 #

1. 修改X轴类型：将X轴的type从category改为value，这样ECharts会根据数值的实际分布计算轴的刻度和区间宽度。
2. 调整数据格式：将折线图的数据源转换为[x值, y值]的二维数组形式，确保X轴能正确识别数值关系。
3. 优化显示效果：设置boundaryGap: false，让折线从X轴的起点开始绘制，避免不必要的留白。

修改后的核心代码 #

// 合并xData和yData为二维数组
const seriesData = xData.map((x, index) => [x, yData[index]]);

option = {
  xAxis: {
    type: 'value',
    boundaryGap: false
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: seriesData,
    type: 'line',
    smooth: true
  }]
};

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Smoothed Line Chart - Apache ECharts Demo</title>
</head>
<body>
    <div id="chart-container"></div>
    <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <style>
        * {margin: 0;padding: 0;}
        #chart-container {position: relative;height: 100vh;overflow: hidden;}
    </style>
    <script>
        var dom = document.getElementById('chart-container');
        var myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false});
        var app = {};
        var option;

        const xData = [0.0100000000000000,0.0107977516232770,0.0116591440117983,0.0125892541179416,0.0135935639087852,0.0146779926762206,0.0158489319246111,0.0171132830416178,0.0184784979742229,0.0199526231496887,0.0215443469003188,0.0232630506715362,0.0251188643150957,0.0271227257933202,0.0292864456462523,0.0316227766016837,0.0341454887383359,0.0368694506451957,0.0398107170553497,0.0429866234708227,0.0464158883361277,0.0501187233627272,0.0541169526546463,0.0584341413373517,0.0630957344480192,0.0681292069057960,0.0735642254459640,0.0794328234724280,0.0857695898590893,0.0926118728128792,0.0999999999999999,0.1079775162327708,0.1165914401179830,0.1258925411794166,0.1359356390878524,0.1467799267622068,0.1584893192461112,0.1711328304161779,0.1847849797422289,0.1995262314968877,0.2154434690031881,0.2326305067153623,0.2511886431509577,0.2712272579332025,0.2928644564625232,0.3162277660168375,0.3414548873833597,]
        const yData = [0.163994337909158,0.164355359005510,0.164781529248110,0.165290711360058,0.165888614999721,0.166599912595426,0.167449496368629,0.168470163071883,0.169710786849251,0.171197399817278,0.172712533758993,0.174671841558769,0.176975558012239,0.180294513617511,0.184327422956864,0.191100453431249,0.200522213979933,0.211754773758690,0.216565431261549,0.2505493351851847,0.326466853585988,0.347298734251199,0.3523985766254678,0.373650615601135,0.311629700205303,0.280092084112155,0.250131726901599,0.273316888213822,0.266613651947510,0.317070017440979,0.400477619240458,0.3590975138843978,0.4310041008366142,0.5090963720150549,0.4907638864448018,0.5406581161637817,0.56051067203831806,0.5071383683330877,0.5355916724605659,0.5355408618682007,0.3839169258278131,0.2773418659785273,0.2949077335148602,0.2394754641244239,0.2036052621075644,0.2106189314544600,0.2395847208235534,]

        // 合并数据为二维数组
        const seriesData = xData.map((x, index) => [x, yData[index]]);

        option = {
            xAxis: {
                type: 'value',
                boundaryGap: false
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: seriesData,
                type: 'line',
                smooth: true
            }]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
    </script>
</body>
</html>

修改后，X轴会根据数值的实际跨度分配宽度，0.01到0.1的区间宽度会约为0.1到后续区间的1/10，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Dario Ferrai