echarts官网

echarts官网

折线图

实际开发场景一：

只有一条折线，一半实线，一半虚线。

option = {
	tooltip: {
	     trigger: "axis",
	      formatter: (params: any) => {
	          const { name, seriesName, value } = params.find((item: any) => item.value !== "-");
	          return `${name}<br/>${seriesName}: ${value}元`;
	      },
	  },
	  xAxis: {
	    type: 'category',
	    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	  },
	  yAxis: {
	     type: "value",
	     name: "金额(元)"
	 },
	  series: [
	    {
	      name: "近30天金额",
	      data: [120, 132, 191, 234, '-', '-', '-'],
	      type: 'line',
	      lineStyle: { type: 'solid', color: '#5470C6', width: 2 },
	      itemStyle: { opacity: 0 }
	    },
	    // 虚线部分（后三天）
	    {
	      name: "未来7天预估金额",
	      data: ['-', '-', '-', 234, 190, 220, 210],
	      type: 'line',
	      lineStyle: { type: 'dashed', color: '#5470C6', width: 2 },
	      itemStyle: { opacity: 0 }
	    }
	  ]
};