eCharts 折线图 实线虚线混合效果的实现

eCharts 折线图 实线虚线混合效果的实现

引用

CSDN

1.

https://blog.csdn.net/galaxyJING/article/details/138059103

在使用eCharts绘制折线图时，有时需要实现一个特殊效果：即一条折线图中的一部分为实线，另一部分为虚线。这种效果在某些场景下非常实用，比如需要区分数据的不同阶段或状态时。

实现思路

要实现这种效果，可以通过数据拼接的方式，将实线部分和虚线部分的数据分别配置到两个不同的series中。具体步骤如下：

1. 准备数据：将实线部分和虚线部分的数据分别存储在两个数组中。
2. 配置option：在option中配置两个series，一个用于实线部分，另一个用于虚线部分，并在虚线部分的series中设置lineStyle.type为"dashed"。
3. 数据拼接：通过在实线部分数据的末尾填充null值，确保虚线部分从正确的位置开始绘制。

代码示例

以下是具体的代码实现：

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

实际效果

通过上述配置，可以得到如下效果：

数据拼接实现

在实际项目中，如果需要动态生成这种效果，可以通过以下方式实现：

let array = [];
var yclist  = [218, 135, 147, 260];
for (let i = 0; i < 3; i++) {
  array[i] = null; // 创建一个对应长度的null数组
}
yc = array.concat(yclist); // 拼接上对应长度的null

这样，通过在实线部分数据的末尾填充null值，可以确保虚线部分从正确的位置开始绘制。

总结

通过上述方法，可以轻松实现eCharts折线图中一部分为实线、另一部分为虚线的效果。这种方法不仅简单易行，而且具有很好的灵活性，可以根据实际需求动态调整虚线和实线的分界点。