如何在ECharts中根据null值将折线样式改为虚线？

不需要新增第三个系列，ECharts本身提供了两种更合适的实现方式，根据需求选择即可：

方案1：全局判断，系列含null则整体变虚线 #

如果只要系列数据中存在null，就把整个系列的折线设为虚线，可通过动态判断数据是否包含null来设置样式，同时开启connectNulls确保null前后的点被连接：

// 辅助函数：检查数据是否包含null
const hasNullValue = (data) => data.some(item => item === null);

series: [
  {
    name: 'Line 1',
    type: 'line',
    lineStyle: {
      width: 2,
      // 动态设置线条样式：有null则虚线，否则实线
      type: hasNullValue(dataset.map(({ data }) => data)) ? 'dashed' : 'solid'
    },
    data: dataset.map(({ data }) => data),
    symbol: 'none',
    connectNulls: true // 开启null值连接，避免折线中断
  },
  {
    name: 'Line2',
    type: 'line',
    lineStyle: {
      width: 2,
      type: hasNullValue(dataset.map(({ data }) => data)) ? 'dashed' : 'solid'
    },
    data: dataset.map(({ data }) => data),
    symbol: 'none',
    connectNulls: true
  },
],

方案2：精细控制，仅含null的线段变虚线 #

如果希望只有跨越null值的线段才显示为虚线，其他部分保持实线，可预处理数据，将每个数据项转为对象，单独设置线段样式：

// 预处理数据，为含null的线段设置虚线样式
const processLineData = (rawData) => {
  return rawData.map((value, idx, arr) => {
    // 最后一个点无需设置线段样式
    if (idx === arr.length - 1) return value;
    // 判断当前点或下一个点是否为null
    const isNullSegment = value === null || arr[idx + 1] === null;
    return {
      value: value,
      lineStyle: isNullSegment ? { type: 'dashed' } : { type: 'solid' }
    };
  });
};

series: [
  {
    name: 'Line 1',
    type: 'line',
    lineStyle: {
      width: 2,
      type: 'solid' // 默认实线，特殊线段会被覆盖
    },
    data: processLineData(dataset.map(({ data }) => data)),
    symbol: 'none',
    connectNulls: true // 必须开启，否则null处仍会中断
  },
  {
    name: 'Line2',
    type: 'line',
    lineStyle: {
      width: 2,
      type: 'solid'
    },
    data: processLineData(dataset.map(({ data }) => data)),
    symbol: 'none',
    connectNulls: true
  },
],

关键说明 #

• connectNulls属性是核心：默认ECharts遇null会中断折线，开启该属性后会连接null前后的点，此时线段样式设置才会生效。
• 两种方案按需选择：方案1实现简单，适合对样式统一要求的场景；方案2更精准，适合需要区分正常线段和含null线段的场景。

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