ECharts - 折线图 - 实现一半实线一半虚线效果

实现一半实线一半虚线效果

• 分析：需要做数据处理，用‘-’占位
• 数据格式举例：
  • 实际输出：[120, 132, 101, 134, '-', '-', '-']
  • 未来预测：['-', '-', '-', 134, 90, 230, 210]
  • 历史预测：[220, 182, 191,245]

动态设置Y轴最大值和最小值

• 分析：用max和min属性
• 举例：

max:function(value){
    return (value.max*1.5).toFixed(2)
},
min:function(value){
    return (value.min*0.5).toFixed(2)
}

设置x轴基准线（平行于y轴）且去掉箭头

series: [
   {
      name: '平行y轴的基准线',
      type: 'line',
      markLine:{
        symbol: 'none', // 去掉箭头
        data:[[
          {coord: ['2024-6-13',50]},
          {coord: ['2024-6-13',367.5]}
        ]],
        label:{
          normal:{
            show:true,
            position:'end',
          }
        }
      }
    }
]

全部code

option = {
   title: {
    subtext: '耗电量 KWH'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['实际输出', '未来预测','历史预测']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,//使折线尽可能在y轴居中
    data: ['2024-6-11', '2024-6-12', '2024-6-13', '2024-6-14', '2024-6-15', '2024-6-16', '2024-6-17']
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: false, //y轴线隐藏或显示
      },
      max:function(value){
        return (value.max*1.5).toFixed(2)
      },
      min:function(value){
        return (value.min*0.5).toFixed(2)
      }
  },
  series: [
    {
      name: '实际输出',
      type: 'line',
      data: [120, 132, 101, 134, '-','-', '-'],
      smooth: true,
      symbol: 'none', // 标记
    },
     {
      name: '未来预测',
      type: 'line',
      data: ['-', '-', '-', 134, 90, 230, 210],
      smooth: true,
      // symbol: 'none', 
      itemStyle: {
        normal:{
          lineStyle: {
            width: 2,
            type: 'dotted'
          }
        }
      }
    },
    {
      name: '历史预测',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191,245],
      smooth: true,
      itemStyle: {
        normal: {
          lineStyle: {
            width:2,
            type:'dotted',
          }
        }
      }
    },
    {
      name: '平行y轴的基准线',
      type: 'line',
      markLine:{
        symbol: 'none', // 去掉箭头
        data:[[
          {coord: ['2024-6-13',50]},
          {coord: ['2024-6-13',367.5]}
        ]],
        label:{
          normal:{
            show:true,
            position:'end',
          }
        }
      }
    }
  ]
};