ECharts 折线图虚线实线首尾相交

1.起因项目中需要绘制折线图

刚开始觉得还想，越听越超纲了... 是在折线图中加入 实线虚线相融合的

来来回回试了好多次

最终可以了，

先补充代码睡觉了···

2.例如后端接口返回

const a = [
  {
    name: '张三01',
    value: 4
  },
  {
    name: '张三02',
    value: 5
  },
  {
    name: '张三03',
    value: 5
  },
  {
    name: '张三04',
    value: 4
  },
  {
    name: '张三07',
    value: 4
  },
  {
    name: '张三05',
    value: 2
  }
]

3. 图表所需格式

const b = [  {    data: [4, 5],
    type: 'line',
  },
  {
    data: ['', 2, 3],
    type: 'line',
    lineStyle: {
      type: 'dashed'
    },
  },
  {
    data: ['','',3, 4],
    type: 'line',
  },
  {
    data: ['','',4, 2],
    type: 'line',
  }
]

4. 函数转换

function convertDataToSeries(source) {  
  const result = [];  
  const length = source.length;  
  
  for (let i = 0; i < length; i++) {  
    const data = [];  
    for (let j = 0; j < i; j++) {  
      data.push('');  
    }  
    for (let k = i; k < Math.min(i + 2, length); k++) {
      data.push(source[k].value);  
    }  
    result.push({ 
      data: data,
      type: 'line',
      lineStyle: {
        color: '#5470C6',
        width: 4,
        type: source[i].value !== source[i+1]?.value ? 'line' : 'dashed'
      },
    });  
  }  
  
  return result;  
} 

最终效果

完整代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const a = [
  {
    name: '张三01',
    value: 4
  },
  {
    name: '张三02',
    value: 3
  },
  {
    name: '张三03',
    value: 5
  },
  {
    name: '张三04',
    value: 4
  },
  {
    name: '张三07',
    value: 4
  },
  {
    name: '张三05',
    value: 2
  }
];

function convertDataToSeries(source) {
  const result = [];
  const length = source.length;

  for (let i = 0; i < length; i++) {
    const data = [];
    for (let j = 0; j < i; j++) {
      data.push('');
    }
    for (let k = i; k < Math.min(i + 2, length); k++) {
      data.push(source[k].value);
    }
    result.push({
      data: data,
      type: 'line',
      lineStyle: {
        color: '#5470C6',
        width: 4,
        type: source[i].value !== source[i + 1]?.value ? 'line' : 'dashed'
      }
    });
  }

  return result;
}

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: convertDataToSeries(a)
};

option && myChart.setOption(option);