使用系列中的某些特定值更改线条外观

Question

我正在使用 Echarts 显示带有 2 个系列的简单折线图。

两个系列的值可以是0到1之间的数字。 其中一个系列有时可能会出现 null 值并导致线路中断。

我更愿意在空值的情况下更改虚线的外观，有正确的方法来实现这一点吗？

 series: [
      {
        name: 'Line 1',
        type: 'line',
        lineStyle: {
          width: 2,
        },
        data: dataset.map(({ data }) => data),
        symbol: 'none',
      },
      {
        name: 'Line2',
        type: 'line',
        lineStyle: {
          width: 2,
        },
        data: dataset.map(({ data }) => data),
        symbol: 'none',
      },
    ],

我想到的一个可能的解决方案是添加第三个系列，并用虚线过滤原始系列，但我想知道是否有正确的方法来做到这一点。

Answer 1

我认为对于您的用例来说，没有一些很好的内置方法。您可以使用 markLine 来表示

null

间隔。 这里是一个例子：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: [1,4,7,4,8,9,2],
    },
    {
      type: 'line',
      data: [5,3,null,6,7,null,1],
      markLine: {
        symbol: 'none',
        lineStyle: {
          opacity: 0.5,
          width: 2
        },
        data: [
          [
            {
              coord: [1,3],
            },
            {
              coord: [3,6],
            }
          ],
          [
            {
              coord: [4,7],
            },
            {
              coord: [6,1],
            }
          ]
        ]
      }
    }
  ]
};

---

我还可以想象工作是将您的数据放入数据集中，用一些插值填充

null

值，添加一个跟踪

null

值的维度，并将该维度用于visaul地图。