核心点

    1. 分段显示不同的颜色，明显的强调区别的作用
    2. 拆分为多个series，2个数据源实现在线，离线状态
      1. 第一个实现在线状态
      2. 第二个实现离线状态，不同的折线显示不同的颜色即可
      3. 若是不想让某个点展示，则这个点对应的data数值 null, 或 ‘-‘ 来表示
    3. yAxis的 type，设置为 category，设置数据源

    image.png

    2. function onlineToOffline({ dataSource, xAxisData, color = ['#41c669', '#ff6160'] }) {
    3.   const _options = {
    4.     color,
    5.     tooltip: {
    6.       // trigger: 'item',
    7.       // formatter: '{a} <br/>{b} : {c}',
    8.     },
    9.     xAxis: {
    10.       type: 'category',
    11.       boundaryGap: true,
    12.       data: xAxisData,
    13.       axisTick: {
    14.         lineStyle: { color: '#c1c5ca41' },
    15.         alignWithLabel: true,
    16.       },
    17.       axisLine: { lineStyle: { color: '#c1c5ca41' }},
    18.       axisLabel: { color: '#9da5b2', fontSize: '11' },
    19.     },
    20.     grid: {
    21.       top: 24,
    22.       right: 8,
    23.       bottom: 0,
    24.       left: 0,
    25.       containLabel: true, // 防止标签溢出
    26.     },
    27.     yAxis: {
    28.       type: 'category',
    29.       data: ['离线', '在线'],
    30.       axisLine: { lineStyle: { color: '#c1c5ca41' }},
    31.       // 改为虚线网格
    32.       splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
    33.       axisLabel: { color: '#9da5b2', fontSize: 11 },
    35.     },
    36.     series: [
    37.       {
    38.         name: '在线',
    39.         type: 'line',
    40.         step: 'online',
    41.         data: [0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0],
    42.         itemStyle: {
    43.           color: color[0],
    44.         },
    45.       },
    46.       {
    47.         name: '离线',
    48.         type: 'line',
    49.         step: 'offline',
    50.         data: [0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0].map(it => {
    51.           return (it === 1) ? null : it
    52.         }),
    53.         itemStyle: {
    54.           color: color[1],
    55.         },
    56.       },
    57.     ],
    58.   };
    60.   return _options;
    61. }
    63. export default onlineToOffline;