Echarts：散点图用线连接到轴（类似于PACF图）

Question

我使用的是echarts（js）。有没有办法将散点图的点与y轴的0值连接起来？它应该像 pacf 图 (https://www.statsmodels.org/stable/_images/graphics_tsa_plot_pacf.png)

应该是这样的：

为了实现可重复性，这是图表选项：

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);
let lineData = saldoData.map((d, i) => [[0, d], [0, i]]);
console.log(lineData)
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,
        //   stack: 'Total',
          emphasis: {
            focus: 'series'
          },
          label: {
            show: false,
            position: 'left'
          }
        },
        {
            name: 'Saldo Line',
            type: 'line',
            data: lineData,
            showSymbol: true, // don't show symbols for line series
            lineStyle: {
              width: 10 // thinner line
            }
          }
      ]      
  };

非常感谢您的帮助，因为我已经花了几个小时阅读文档😢。

致以诚挚的问候

Answer 1

您已经在图表中定义了线条，但坐标错误；在第一次尝试中，坐标 可以认为是：

let lineData = saldoData.flatMap((d, i) => [[d, i], [0, i]]);

这将创建一个从第一个数据连续到最后一个数据的多段。为了消除级别之间不需要的连接，可以简单地在之间引入一个

null

点：

let lineData = saldoData.flatMap((d, i) => [[d, i], [0, i], []]);

通过调整线条的视觉属性，可以得到以下片段：

const dom = document.getElementById('chart-container');
const myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

const 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);
let lineData = saldoData.flatMap((d, i) => [[d, i], [0, i], []]);
const 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', // no name to exclude from legend
            type: 'line',
            data: lineData,
            showSymbol: false,
            itemStyle: {
                opacity: 0 // to remove line ends from legend
            },
            lineStyle: {
                color: '#000',
                width: 2
            },
            tooltip: {
                show: false // remove redundant info from tooltip
            },
            label: {
                show: false
            }
        }
    ]
};

myChart.setOption(optionActividadIntercambio);
window.addEventListener('resize', myChart.resize);

#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

与jsFiddle相同。

---

现在，由于我们有了线系列，我们可以使用它来创建线和点（因此删除散点 系列）。唯一的困难是仅显示线末端的一个点；可以使用 事实上

symbol

（以及

symbolSize

）可以被赋予函数作为值，因此它们可以从 点对点。例如，

symbol: value => value[0] ? 'circle' : 'none'

只会为那些具有非零值的点制作一个圆。完整代码在jsFiddle

如果日期值可能为零， 更安全的解决方案是在数据点中添加符号，作为第三个坐标：

let lineData = saldoData.flatMap((d, i) => [[d, i, 'circle'], [0, i], []]);

与

symbol: value => value[2] || 'none',

完整代码在jsFiddle。

---

另一种可能性，具有一些优点，是将生产线作为

markLine

的分散系列。

markLine

的数据可以构造为：

let markLineData = saldoData.map((d, i) => [{coord: [d, i]}, {coord: [0, i]}]);

因此

markLine

系列中的

scatter

选项将是：

 markLine:{
    symbol: 'none',
    lineStyle:{
        color: '#000',
        type: 'solid',
        width: 2
    },
    data: markLineData
}

完整代码在jsFiddle。