记录使用vue + ts echarts生成图表（折线图）

首先安装echarts
工程依赖与声明依赖

npm install echarts --save
npm install --save-dev @types/echarts

创建配置项
折线图，x轴为时间轴，y轴为数值轴，有提示框

options(seriesdata: Array<
      | (string | number | Date)[]
      | {
          value: (number | Date)[];
          symbol: string;
          symbolSize: number;
        }
      | {
          value: (number | Date)[];
        }
      | (string | Date)[]
      | {
          value: (string | Date)[];
        }
    >,//传入的折线数据，因为里面有对数据点的设置，所以数据类型有点杂
    max: number,//y轴最大值
    min: number,//y轴最小值
    maxtime: Date,//x轴最大值
    mintime: Date,//x轴最小值
    monthEnglish:string[]//这些是需要传入的数据，在这个函数里面无法调用本地数据的话，可以通过形参的方式传值进来
    ):EChartOption<echarts.EChartOption.SeriesLine>//这是类型声明，如果没有警告或报错，不用管 {
return {
  grid: {
    width:'auto',//图表的宽 可以使用数字代表px
    height:'auto',//图表的长
    top: 8,//距离容器上下左右的距离，可以类比为padding
    bottom: 30,
    left: 35,
    right: 35
  }
  tooltip: {//提示框
        trigger: 'axis',//提示框的格式，axis适用于折线图，由坐标轴触发，还有'item'适用于散点图，饼图等
        axisPointer: {//坐标轴指示器，这里不需要
          type: 'none'
        },
        backgroundColor: '#11cbd9',//背景颜色
        textStyle: {//字体设置
          fontSize: 8//字体大小
        },
        position: function (//提示框的位置，如果不设置，提示框会随着鼠标移动
          point: (number | string)[],//鼠标的位置
          params: EChartOption.Tooltip.Format[] | EChartOption.Tooltip.Format,//数据集
          dom: HTMLElement,
          rect: object,
          size:
            | { viewSize: (number | string)[]; contentSize: number | string }
            | object//这个图表盒子的尺寸以及提示框的尺寸
        ): number[]//类型声明，同上一样 {
          dom;
          point;
          rect;//暂时用不到
          function twoTime(TimeOne: Date, TimeTwo: Date) {
            const OneYear = TimeOne.getFullYear();
            const TwoYear = TimeTwo.getFullYear();
            const OneMOnth = TimeOne.getMonth();
            const TwoMonth = TimeTwo.getMonth();
            const OneDay = TimeOne.getDate();
            const TwoDay = TimeTwo.getDate();
            const OneHour = TimeOne.getHours();
            const TwoHour = TimeTwo.getHours();
            const OneMin = TimeOne.getMinutes();
            const TwoMin = TimeTwo.getMinutes();
            const OneSecond = TimeOne.getSeconds();
            const TwoSecond = TimeTwo.getSeconds();
            const year = OneYear - TwoYear;
            const month = year * 12 + OneMOnth - TwoMonth;
            const day = month * 30 + OneDay - TwoDay;
            const hour = day * 24 + OneHour - TwoHour;
            const min = hour * 60 + OneMin - TwoMin;
            const second = min * 60 + OneSecond - TwoSecond;
            return second;
          }//这里是因为我的x轴是时间轴，为了保证我的提示框所在地方是数据点的位置，用这个比例来算距离，如果有更好的方法，希望能交流一下
          let dataY:
            | string
            | number = ((params as EChartOption.Tooltip.Format[])[0]
            .value as number[])[1]; //获取y轴的数据
          const dataX: Date = ((params as EChartOption.Tooltip.Format[])[0]
            .value as Date[])[0];//获取x轴的数据
          dataY = +dataY;//将y轴的类型转为数字
          const boxWidth = (size as {
            viewSize: number[];
            contentSize: number[];
          }).viewSize[0];//获取盒子宽度
          const boxHeight = (size as {
            viewSize: number[];
            contentSize: number[];
          }).viewSize[1];//获取盒子高度
          const domWidth = (size as {
            viewSize: number[];
            contentSize: number[];
          }).contentSize[0];//获取提示框宽度
          const domHeight = (size as {
            viewSize: number[];
            contentSize: number[];
          }).contentSize[1];//获取提示框长度
          let pointY = ((max + 1 - dataY) / (max + 1 - min)) * boxHeight;//初始化提示框位置的y坐标，max和min是y轴的最大值与最小值，y坐标是以图表左上角为原点，向下增大
          if (pointY > boxHeight - domHeight - 37.5) {
            pointY = boxHeight - domHeight - 37.5;//保证提示框在图表里面，因为这个坐标的位置是以提示框的左上角为点，所以不用担心跳到上面。37.5是提示框高度，可以根据实际高度调整
          }
          let pointX =
            (twoTime(maxtime, dataX) / twoTime(maxtime, mintime)) * boxWidth;//初始化x坐标
          if (pointX < domWidth / 2) {
            pointX = 0;//保证不超出图表左边
          } else if (pointX > boxWidth - domWidth) {
            pointX = boxWidth - domWidth;//不超出图标右边
          } else {
            pointX = pointX - domWidth / 2;
          }
          return [pointX, pointY];//返回的坐标，可以是数字，也可以是百分比
        },
        extraCssText: 'text-align:left;padding-left:1rem;padding-right:1rem;',//附加在提示框的css属性
        formatter: function (//这是提示框展示的内容
          params: EChartOption.Tooltip.Format[] | EChartOption.Tooltip.Format//数据集
        ): string {
          const date = new Date(
            ((params as EChartOption.Tooltip.Format[])[0].value as Date[])[0]
          );//获取数据集里面的信息，在这里我获取的是日期类型的数据，as 后面的类型，如果不是必需，可以去掉。
          const month = date.getMonth();
          let day: number | string = date.getDate();
          const year = date.getFullYear();
          const monthEnglish = [
            'January',
            'February ',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
          ];
          if (day < 10) {
            day = '0' + day;
          }
          const Month = monthEnglish[month];
          const length = ((params as EChartOption.Tooltip.Format[])[0]
            .value as (number | string)[])[1];
          if (length === '-') {
            return '';
          }//这一段是我根据我获取的信息，再得出我想要的信息，如果不想要这里出现提示框，可以返回数据为空
          const time =
            '
' +
            day +
            ' ' +
            Month +
            ' ' +
            year +
            '
' +
            '
' +
            length +
            '
';
          return time;//这是返回的字符床，可以在这里写入一些css样式
        }
      },
    xAxis: {//设置x轴
        type: 'time' as 'time',//时间轴，另外还有数值轴，类目轴
        boundaryGap: false,
        axisTick: {//坐标轴刻度的设置，但因为我这里的特殊需求，不显示刻度
          show: false
        },
        axisLine: {//坐标线的设置，但因为我这里的特殊需求，不显示刻度
          show: false
        },
        splitLine: {//区域分割线
          show: true,
          lineStyle: {
            color: '#11cbd9',
            type: 'dashed',
            width: 2
          }
        },
        axisLabel: {//坐标轴刻度标签 
          show: true,
          formatter: function (value: string) {//回调函数的控制，这里传入的就是x轴的值,根据x轴的值显示相应的信息
            const texts = [];
            const date = new Date(value);
            const month = date.getMonth();
            const day = date.getDate();
            const Day = +day;
            const Month = monthEnglish[month].substring(0,3);
            const time = Month + ' ' + Day;
            texts.push(time);
            return texts;
          },
          color: '#6f6f6f',
          fontWeight: 600
        }
      },
      yAxis: {//y轴的设置
        type: 'value' as 'value',//数值轴
        boundaryGap: false,
        min: min,//最小值
        max: max + 1,//最大值
        minInterval: 2,//最小间隔
        axisLine: {//坐标轴线的设置
          lineStyle: {
            width: 2,
            color: '#e9ebec'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          color: '#6f6f6f',
          fontWeight: 600
        }
      },
      series: [//这是折线的设置
        {
          animation: true,//初始动画
          symbol: 'none',//每个点的样式，这里我关了
          hoverAnimation: false,
          data: seriesdata as
            | (string | number | void | EChartOption.SeriesLine.DataObject)[]
            | (string | number | void | EChartOption.SeriesLine.DataObject)[][],//获取传入的数据
          type: 'line',//统计图的展示方式，折线图用'line'
          lineStyle: {//折线的样式
            color: '#11cbd9',
            width: 5
          },
          itemStyle: {//每个折点的样式
            color: '#11cbd9'
          },
          smooth: true,//是否开启平滑，默认不开启，是直线，开启后，绘制曲线
          areaStyle: {//阴影部分
            color: {//线性渐变颜色
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#b1eef2'
                },
                {
                  offset: 0.7,
                  color: '#FFFFFF'
                }
              ],

              global: false
            }
          }
        }
      ],
      textStyle: {
        color: '#7e7e7e',
        fontSize: 100
      }
}
}

配置项之后，调用

const ele = document.getElementById('hrvChart');//根据Id获取容器
 const chart = echarts.init(ele as HTMLCanvasElement);	
 chart.setOption(
        this.options(
          this.seriesData,
          this.max,
          this.min,
          this.maxtime,
          this.mintime,
          this.month
        ),
        true
      );
      //绘制图表
      //seriesData是以数组形式，具体可以看下前面函数写的类型，制作一个参考用，其余的数据都是在获取之后在传入进去