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

问：

我正在使用 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
            }
          }
      ]      
  };

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

此致敬意

JavaScript 线散点图 echarts

答：

1赞 kikon 10/28/2023 #1

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

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

这将创建一个从第一个数据到最后一个数据连续的多段。为了摆脱关卡之间不需要的连接，可以简单地在两者之间引入一个点：null

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

它会按预期中断该行，同时保留默认的 conectNulls： false。

通过调整线条的视觉属性，可以有这个片段：

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 中也是如此。

现在，由于我们有了线系列，我们可以使用它来创建线和点（因此删除散点系列）。唯一的困难是只显示行尾的一个点;可以使用（以及）可以作为值赋予函数，因此它们可以从点对点。例如symbolsymbolSize

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]}]);

因此，该系列中的选项将是：markLinescatter

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

jsFiddle 中的完整代码。

上一个：将一个表的点绘制到另一个表的折线图上

下一个：如何在 reactjs 中使用这个隔离块编辑器库从我们的本地库启用图像上传选项

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

Echarts: scatter connected to the axis with a line (similar to the PACF plot)

评论