如何在ECharts中实现散点与Y轴零点连线（类似PACF图）

要实现散点与X轴0值位置的垂直连线，只需修正连线数据的生成逻辑并调整系列配置，以下是修改后的完整代码：

let data = {
    "schema": {
      "fields": [
        {
          "name": "tamaño",
          "type": "string"
        },
        {
          "name": "expo",
          "type": "number"
        },
        {
          "name": "impo",
          "type": "number"
        },
        {
          "name": "saldo",
          "type": "number"
        }
      ],
      "pandas_version": "1.4.0"
    },
    "data": [
      {
        "tamaño": "Micro",
        "expo": 1988766908.4407976,
        "impo": 4256928697.57,
        "saldo": -2268161789.129203
      },
      {
        "tamaño": "Pequeña",
        "expo": 3681585633.166469,
        "impo": 7548231175.14,
        "saldo": -3866645541.9735312
      },
      {
        "tamaño": "Mediana",
        "expo": 7626112142.6330385,
        "impo": 12756460382.520002,
        "saldo": -5130348239.886964
      },
      {
        "tamaño": "Grande",
        "expo": 64637850302.33969,
        "impo": 38622133149.46996,
        "saldo": 26015717152.869728
      }
    ]
  }

let categories = data.data.map(item => item.tamaño);
let expoData = data.data.map(item => item.expo/ 1_000_000);
let impoData = data.data.map(item => -item.impo/ 1_000_000);
let saldoData = data.data.map(item => item.saldo/ 1_000_000);

// 修正连线数据生成：每个类别对应X=0到散点位置的线段，用null分隔独立线段
let lineData = [];
saldoData.forEach((d, i) => {
  lineData.push([0, i]);       // X轴0值位置，对应第i个Y类别
  lineData.push([d, i]);       // 散点所在位置
  lineData.push(null);         // 插入null，避免不同线段之间连接
});
lineData.pop(); // 移除最后一个多余的null

export var optionActividadIntercambio = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
        bottom: 10,
    },
    xAxis: [
      {
        type: 'value',
      },
    ],
    yAxis: [
        {
          type: 'category',
          data: categories,
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          name: 'Exportaciones',
          type: 'bar',
          data: expoData,
          stack: 'Total',
          emphasis: {
            focus: 'series'
          },
          label: {
            show: false,
            position: 'inside'
          },
          itemStyle:{color:"rgba(238,178,9,1)"}
        },
        {
          name: 'Importaciones',
          type: 'bar',
          data: impoData,
          stack: 'Total',
          emphasis: {
            focus: 'series'
          },
          label: {
            show: false
          },
          itemStyle:{color:"rgba(163,133,165,1)"}
        },
        {
          name: 'Saldo',
          type: 'scatter',
          data: saldoData,
          emphasis: {
            focus: 'series'
          },
          label: {
            show: false,
            position: 'left'
          }
        },
        {
            name: 'Saldo Line',
            type: 'line',
            data: lineData,
            showSymbol: false, // 隐藏线的符号，只显示线段
            connectNulls: false, // 不连接null分隔的线段
            lineStyle: {
              width: 1, // 设置合适的线宽
              color: '#333' // 设置线段颜色
            }
          }
      ]      
  };

关键修改说明： #

• 连线数据生成：遍历每个散点数据，生成[0, i]（X轴0点）和[saldoData[i], i]（散点位置）两个点，并用null分隔，确保每条连线独立
• 线系列配置：设置showSymbol: false隐藏线上的符号，connectNulls: false禁止连接不同线段，调整lineStyle的宽度和颜色让线段更贴合需求
• 坐标对应：Y轴为类别轴，索引i对应每个categories的位置，确保连线和散点的Y坐标完全匹配

内容的提问来源于stack exchange，提问作者Keynes is not dead