折线图里如何设置折线的分段样式，比如 末尾虚线？

Question

我有一个折线图的需求，折线的最后一个数据点是预测数据，所以想要折线最后一段能显示成虚线，类似下面这张图。这个要怎么实现更方便？

Answer 1

解决方案 Solution

推荐你使用 VChart，官网 demo 正有你需要的效果：https://visactor.io/vchart/demo/line-chart/dash-line

可以在 line 的图元样式回调里，根据数据返回不同的样式。

• lineDash：虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。

  line: {
    style: {
      stroke: (data) => data.latest ? 'blue': 'green',
      lineDash: data => data.latest ? [5, 5]: [0]
    }
  },
  point: {
    style: {
      fill: (data) => data.latest ? 'blue': 'green',
    }
  }

代码示例 Code Example

const spec = {
  type: 'line',
  data: {
    values: [
      {
        x: '1st',
        y: 0.012
      },
      {
        x: '2nd',
        y: -0.01
      },
      {
        x: '3rd',
        y: 0.005
      },
      {
        x: '4th',
        y: 0.007
      },
      {
        x: '5th',
        y: 0.01
      },
      {
        x: '6th',
        y: 0.017
      },
      {
        x: '7th',
        y: 0.022
      },
      {
        x: '8th (prediction)',
        y: 0.033,
        latest: true
      }
    ]
  },
  xField: 'x',
  yField: 'y',
  line: {
    style: {
      stroke: (data) => data.latest ? 'blue': 'green',
      lineDash: data => data.latest ? [5, 5]: [0]
    }
  },
  point: {
    style: {
      fill: (data) => data.latest ? 'blue': 'green',
    }
  }
};

结果展示 Results

在线效果参考：https://codesandbox.io/s/line-style-s2ns8s

相关文档 Related Documentation

相关 demo：https://visactor.io/vchart/demo/line-chart/dash-line

相关 api：https://visactor.io/vchart/option/lineChart#line.style

github：https://github.com/VisActor/VChart

related demo：https://visactor.io/vchart/demo/line-chart/dash-line

related api：https://visactor.io/vchart/option/lineChart#line.style

github：https://github.com/VisActor/VChart

Answer 2

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [ ,,,,, 260,77],
      type: 'line',
      lineStyle:{
        type:"dashed"
      }
    },
    {
      data: [150,  224, 218, 135, 147, 260],
      type: 'line'
    },
  ]
};

最后两个点单独一组数据，设置样式。