echarts快速入门

之前只看过，没写过，来了个新需求了解下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里面可以设置折现下面的填充颜色

 const option = {
      smooth: false,
      tooltip: {
        trigger: 'axis', // 指上去会有数值提示
      },
      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或更大的值来间隔显示标签
          // formatter: item => {  // 把这里注释去掉，x轴显示的内容就是根据函数计算返回得到的值
          //   return item.substr(0,2);
          // },
        },
      },
      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);

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

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();
}

2024年7月9日16:01:46：如果遇到一张折线图里面需要多跟折线呢？那就series数组里面多push几个对象就行