如何利用ECharts visualMap根据X轴值区分折线样式（实线/虚线）？

由于ECharts的visualMap仅支持基于Y轴维度配置视觉样式，要实现按X轴值（比如大于"2016-8"）将单条折线拆分为实线和虚线，推荐以下两种可行方法：

方法一：拆分数据为两个系列 #

这是最直观的方案，将原始数据按X轴阈值拆分为两组，分别对应两个折线系列，配置不同的线条样式即可。

示例代码：

// 原始数据示例
const rawData = [
  ["2016-6", 120],
  ["2016-7", 132],
  ["2016-8", 101],
  ["2016-9", 134],
  ["2016-10", 90]
];

// 按X轴阈值拆分数据
const splitThreshold = "2016-8";
const solidLineData = rawData.filter(item => item[0] <= splitThreshold);
const dashedLineData = rawData.filter(item => item[0] > splitThreshold);

// ECharts配置项
const option = {
  xAxis: {
    type: "category",
    data: rawData.map(item => item[0]) // 保留完整X轴刻度
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "指标",
      type: "line",
      data: solidLineData,
      lineStyle: { type: "solid" }, // 实线样式
      itemStyle: { color: "#5470c6" } // 统一标记点颜色
    },
    {
      name: "指标",
      type: "line",
      data: dashedLineData,
      lineStyle: { type: "dashed" }, // 虚线样式
      itemStyle: { color: "#5470c6" },
      legendHoverLink: false, // 取消图例联动，避免重复触发
      symbol: dashedLineData.length ? "circle" : "none" // 无数据时隐藏标记点
    }
  ]
};

这种方法的优势是实现简单，无需复杂自定义逻辑，且能完美兼容ECharts的交互功能。

方法二：使用自定义系列（Custom Series） #

如果不想拆分数据系列，可以通过自定义系列的renderItem方法，逐个判断线段两端的X轴值，动态设置线条样式。

示例代码：

const rawData = [
  ["2016-6", 120],
  ["2016-7", 132],
  ["2016-8", 101],
  ["2016-9", 134],
  ["2016-10", 90]
];
const splitThreshold = "2016-8";

const option = {
  xAxis: {
    type: "category",
    data: rawData.map(item => item[0])
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      type: "custom",
      renderItem: (params, api) => {
        // 获取当前和下一个数据点的坐标
        const currX = api.value(0);
        const currPoint = api.coord([currX, api.value(1)]);
        const nextPoint = api.coord([api.value(0, 1), api.value(1, 1)]);
        
        // 判断是否使用虚线
        const useDashed = currX > splitThreshold;
        
        return {
          type: "line",
          shape: {
            x1: currPoint[0],
            y1: currPoint[1],
            x2: nextPoint[0],
            y2: nextPoint[1]
          },
          style: {
            stroke: "#5470c6",
            lineWidth: 2,
            type: useDashed ? "dashed" : "solid"
          }
        };
      },
      // 自定义标记点（可选）
      itemStyle: {
        color: "#5470c6"
      },
      data: rawData
    }
  ]
};

这种方法适合需要保留单一系列结构的场景，但需要自行处理标记点、tooltip等交互细节，相对复杂一些。

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