vent-template/src/utils/echartsUtil.ts

import echarts from '/@/utils/lib/echarts';
export default class echartsUtil {
  option: any;
  type: string;

  constructor(option) {
    this.option = option;
  }
  /**
   * 获取数据渲染echarts图表
   * @param type 类型目前两种 listMonitor(实时检测对应的图表)、history(历史数据对应的图表)
   * @param echartsComponent echarts组件类
   * @param chartcolumns EnumData文件对应图表类型配置属性
   * @param listData 从后台获取到的数据
   * @param devicetype 设备类型
   * @param columnname 某些特定设备类型下，从后台获取到的数据中，属性名为columnname的属性值存放的是x轴的信息
   */
  initChartOption(type, chartColumns: any[] = []) {
    if (!this.option) {
      return;
    }
    const xdata = [], // 存放x轴的数据
      ydata = [],
      yAxis: any[] = [], // 存放图表y轴样式、数据
      colors: string[] = [], // 存放每个图表系列的颜色
      legends: string[] = [], // 存放每个图表系列的名字
      series: any[] = []; // 存放每个图表系列的样式

    let xAxis: any[] = [], //存放图表x轴样式、数据
      timeline: any = null, //
      grid = {},
      tooltip = {},
      dataZoom: any = null; //进度条
    const columns = JSON.parse(JSON.stringify(chartColumns));
    columns.forEach((column: any) => {
      const ylist = [];
      if (type == 'detail' || type == 'history') {
        column.linetype = 'line';
      }
      if (column.color) {
        colors.push(column.color); //获取每个图表系列的颜色
      }
      // ydata.push(ylist);
      /** 获取静态文件配置的图表样式信息 */

      if (column.legend) {
        legends.push(column.legend + (column.yname ? '(' + column.yname + ')' : '')); //获取每个图表系列的名字
      }

      series.push(this.getSeries(column, ylist)); //获取每个图表系列的样式

      if (column.seriesName || column.seriesName == undefined) {
        yAxis.push(this.getYAxis(column));
      }
    });

    /* 如果是历史记录的话需要添加进度条 */
    grid = this.getGrid(yAxis, type);
    // timeline = this.getTimeline(xdata, ydata);
    tooltip = this.getTooltip();
    xAxis = this.getXAxis(xdata, series, type);

    dataZoom = this.getDataZoom(type);

    if (this.option) {
      if (!this.option['tooltip']) this.option['tooltip'] = {};
      Object.assign(this.option['tooltip'], tooltip);
      // this.option['tooltip'] = tooltip;
      this.option['grid'] = grid;
      // this.option['legend'] = this.getLegend(legends);
      if (!this.option['legend']) this.option['legend'] = {};
      Object.assign(this.option['legend'], this.getLegend(legends));
      this.option['xAxis'] = xAxis;
      this.option['yAxis'] = yAxis;
      this.option['series'] = series;
      this.option['dataZoom'] = dataZoom;
    }
  }
  getDataZoom(type) {
    if (type == 'history') {
      return [
        {
          bottom: '10',
          height: 20,
          start: 100,
          end: 0,
          textStyle: {
            color: '#ffffff',
          },
        },
      ];
    } else if (type == 'listMonitor' || type == 'detail') {
      return {
        start: 0,
        type: 'inside',
      };
    }
    return null;
  }

  getLegend(legend) {
    const legendObj = {
      textStyle: {
        color: '#ffffff', // 字体颜色
      },
      data: legend,
      top: '20',
    };
    return legendObj;
  }

  getXAxis(xdata, series, type) {
    let rotate = 0;
    const isHasBar = series.findIndex((item) => {
      if (item.xRotate != undefined) rotate = item.xRotate;
      return item.type == 'bar';
    });
    const xAxis = [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: '#006c9d',
            width: 1, // 这里是为了突出显示加上的
          },
        },
        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.3)', type: 'dashed' } },
        axisLabel: {
          show: true,
          color: '#ffffffbb',
          rotate: rotate,
          formatter: function (params) {
            var newParamsName = '';
            const paramsNameNumber = params.length;
            const provideNumber = 10; // 单行显示文字个数
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (let p = 0; p < rowNumber; p++) {
                var tempStr = '';
                var start = p * provideNumber;
                var end = start + provideNumber;
                if (p === rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + '\n';
                }
                newParamsName += tempStr;
              }
            } else {
              newParamsName = params;
            }
            return newParamsName;
          },
        },
        axisPointer: {
          type: isHasBar > -1 ? 'shadow' : 'line',
          shadowStyle: {
            color: 'rgba(0,0,0,0.1)',
          },
        },
        // prettier-ignore
        data: xdata,
      },
    ];
    return xAxis;
  }
  getYAxis(item) {
    const yAxisobj = {
      type: 'value',
      name: item.seriesName ? item.seriesName : item.legend,
      min: 0,
      max: item.ymax,
      position: item.yaxispos ? item.yaxispos : 'right',
      offset: item.yaxispos == 'right' ? (item.sort - 2) * 60 : 0,
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#006c9d',
        },
      },
      axisLabel: {
        show: true,
        color: '#ffffffcc',
        // formatter: '{value}' + item.yname
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(21,80,126,.3)',
          type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
        },
        // show: item.linetype == 'line' ? true : false,
        show: true,
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(205, 95, 255, 1)',
      },
    };
    return yAxisobj;
  }
  getSeries(item, ylist) {
    const seriesObj = {
      name: item.legend + (item.yname ? '(' + item.yname + ')' : ''),
      type: item.linetype,
      yAxisIndex: item.sort - 1,
      barCategoryGap: '30%',
      data: [...ylist],
      barMaxWidth: '20',
      itemStyle: {
        color:
          item.linetype == 'bar'
            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: item.color + 'ff',
                },
                {
                  offset: 1,
                  color: item.color + '33',
                },
              ])
            : item.color,
        borderRadius: [15, 15, 0, 0],
      },
      lineStyle: {
        shadowColor: '#ffffff99',
        shadowBlur: 3,
      },
      smooth: true,
    };
    return seriesObj;
  }
  getGrid(yAxis, type) {
    if (!this.option.grid) {
      let rightnum = 0,
        leftnum = 0;
      yAxis.forEach((item) => {
        if (item.position == 'right') {
          ++rightnum;
        } else if (item.position == 'left') {
          ++leftnum;
        }
      });
      const grid = {
        top: '60px',
        bottom: type == 'history' ? '40px' : '15px',
        right: rightnum * 30 + 20 + 'px',
        left: leftnum * 40 + 'px',
        containLabel: true,
      };
      return grid;
    } else {
      return this.option.grid;
    }
  }
  getTooltip() {
    const tooltip = {
      backgroundColor: '#00000005',
      borderColor: '#74E9FE44',
      extraCssText: 'backdrop-filter: blur(15px); box-shadow: 0 0 0 rgba(0, 0, 0, 0);',
      textStyle: {
        color: '#ffffff', // 字体颜色
      },
      trigger: 'axis',
      axisPointer: {
        label: {
          backgroundColor: 'rgba(30,120,50,0.8)',
        },
        type: 'cross',
      },
    };
    return tooltip;
  }
  // 分页显示数据
  getTimeline(xdata, ydata) {
    // 结合x、y轴的数据量判断是否要分页（x轴分页）ydata长度的倍数就是X轴要显示的数量n
    const n = Math.floor(20 / ydata.length);
    const size = Math.ceil(xdata.length / n); //分页数量
    if (size > 2) {
      // 设置时间轴
      const timeline = {
        axisType: 'category',
        // realtime: false,
        // loop: false,
        autoPlay: true,
        // currentIndex: 2,
        playInterval: 1000,
        // controlStyle: {
        //     position: 'left'
        // },
        data: [],
      };
      timeline.data = Array.from(new Array(size).keys());
      return timeline;
    } else {
      return null;
    }
  }
}