之前只看过，没写过，来了个新需求了解下echarts功能

官网：https://echarts.apache.org/handbook/zh/get-started
官方参数文档：https://echarts.apache.org/zh/option.html#title

其实大部分问题，去官方参数文档里面都能搜得到，下面记录下几个常用的

如何避免x轴重叠
如何让上面的实线变成虚线
如果添加线下面的颜色

下面是代码
interval可以设置x轴间隔，避免文字重叠，设置0是全显示，但是这个时候文字会叠加在一起
splitLine.lineStyle.type可以设置x轴上面实线改成虚线
areaStyle里面可以设置折现下面的填充颜色

javascript"> const option = {smooth: false,xAxis: {type: 'category',data: ['07:10', '07:11', '07:12', '07:13', '07:14', '07:15', '07:16', '07:17', '07:18'],axisLabel: {interval: 2, // 显示所有标签，如果需要可以设置为1或更大的值来间隔显示标签},},yAxis: {type: 'value',splitLine: {lineStyle: {type: 'dashed',},},},series: [{data: ['33', '22', '11', '99', '87', '0', '55', '21', '66'],type: 'line',symbol: 'none',smooth: false,color: '#1477FF',areaStyle: {color: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(21,115,245,0.15)',},],},},},],grid: {left: '12%',top: '3%',right: '0%',bottom: '10%',width: 'auto',height: 'auto',},};const chartsDom = document.getElementById('xxxxxx');
this.myChart = echarts.init(chartsDom);
this.myChart.setOption(option);

如果遇到动态加载的，折线图需要根据界面大小动态改变，那么需要写个监听事件来渲染

javascript">import { fromEvent, takeUntil, Subject } from 'rxjs';destroyed$ = new Subject();ngOnInit() {fromEvent(window, 'resize').pipe(takeUntil(this.destroyed$)).subscribe(() => {this.myChart && this.myChart.resize();});
}ngOnDestroy(): void {this.destroyed$.next(true);this.destroyed$.complete();
}