utils-echart/dist/types/utils-echarts/methods/methods.ts

Echart component

import * as echarts from "echarts";
import { com } from "../assets/common";

/**
 * 生成无名称数据
 * @param xAxis x轴
 * @param range 数据范围
 * @returns obj
 */
export const getDataWithoutName = (xAxis: string[], range?: number[]) => {
  const x = xAxis ? xAxis : com.xAxis;
  const r = range ? range : [10, 100];
  const obj = {} as any;

  x.forEach((e: any) => {
    obj[e] = Math.round(Math.random() * (r[1] - r[0]) + r[0]);
  });
  return obj;
};
/**
 * 生成带名称单数据
 * @param name 名称
 * @param range 数据范围
 * @returns arr
 */
export const getSingleDataWithName = (name: string[], range?: number[]) => {
  const r = range ? range : [10, 100];
  const arr: {}[] = [];

  for (let i = 0; i < name.length; i++) {
    arr.push({
      value: Math.round(Math.random() * (r[1] - r[0]) + r[0]),
      name: name[i],
    });
  }
  return arr;
};
/**
 * 生成带名称多数据
 * @param xAxis x轴
 * @param name 名称
 * @param range 数据范围
 * @returns obj
 */
export const getMultipleDataWithName = (xAxis: string[], name: string[], range?: number[]) => {
  const r = range ? range : [10, 100];
  const obj = {
    xAxis: xAxis,
    data: [] as {}[],
  };
  let n: number[] = [];

  name.forEach((e) => {
    n = [];
    xAxis.forEach(() => {
      n.push(Math.round(Math.random() * (r[1] - r[0]) + r[0]));
    });
    obj.data.push({
      value: n,
      name: e,
    });
  });
  return obj;
};
/**
 * x轴时间轴数据
 * @param timeLength 时间长度（今日为起点，向前推算）
 * @returns array
 */
export const xAxisTimeline = (timeLength: number) => {
  const xAxis: string[] = [];
  const date = new Date();
  //今天加上前dateRange-1天
  for (let i = 0; i <= 24 * (timeLength - 1); i += 24) {
    // 使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
    const dateItem = new Date(date.getTime() - i * 60 * 60 * 1000);
    //获取日期
    const y = dateItem.getFullYear();
    let m: string | number = dateItem.getMonth() + 1;
    let d: string | number = dateItem.getDate();
    // 补零
    m = m.toString().length === 1 ? "0" + m.toString() : m;
    d = d.toString().length === 1 ? "0" + d.toString() : d;

    const val = y + "-" + m + "-" + d;
    xAxis.push(val);
  }
  return xAxis.reverse();
};
/**
 * x轴分割线
 * @returns obj
 */
export const splitLineX = () => {
  return {
    show: val("splitLine_x_show"),
    lineStyle: {
      color: val("splitLine_x_color"),
      width: val("splitLine_x_width"),
      type: val("splitLine_x_type"),
    },
  };
};
/**
 * y轴分割线
 * @returns obj
 */
export const splitLineY = () => {
  return {
    show: val("splitLine_y_show"),
    lineStyle: {
      color: val("splitLine_y_color"),
      width: val("splitLine_y_width"),
      type: val("splitLine_y_type"),
    },
  };
};
/**
 * 区间设置
 * @param pieceRange 分割区间
 * @param color 区间颜色
 * @returns pieces
 */
export const pieceWise = (pieceRange?: number[][], color?: any) => {
  const _pr = pieceRange
    ? pieceRange
    : [
        [1, 2],
        [3, 4],
      ];
  const _color = color ? color : val("colorData")[0];
  const p: {}[] = [];

  _pr.forEach((e) => {
    p.push({ gt: e[0], lt: e[1], label: "", color: _color });
  });
  return p;
};
/**
 * 渐变
 * @param colorArr 颜色组(length >= 2)
 * @param x 终点x坐标
 * @param y 终点y坐标
 * @param x2 起点x坐标
 * @param y2 起点y坐标
 * @returns LinearGradient
 */
export const linearGradient = (colorArr: string[], x?: number, y?: number, x2?: number, y2?: number) => {
  const cs: { offset: any; color: any }[] = []; // colorStops
  const _colorArr: any = colorArr ? colorArr : val("colorData"); // 颜色组
  const length = _colorArr.length;

  for (let i = 0; i < length; i++) {
    cs.push({
      offset: (1 / (length - 1)) * i,
      color: _colorArr[i],
    });
  }

  // 渐变
  const gradientColor: any = new echarts.graphic.LinearGradient(x ? x : 0, y ? y : 0, x2 ? x2 : 0, y2 ? y2 : 1, cs);

  return gradientColor;
};

/**
 * 颜色透明度
 * @param color 颜色
 * @param opacity 不透明度
 * @return rgba
 */
export const colorOpacity = (color: string, opacity: number) => {
  let rgba = "";
  const c = color.replace(/\s+/g, ""); // 去掉空格

  // 颜色格式为HEX
  if (/^#/.test(c)) {
    rgba = "rgba(" + parseInt("0x" + c.slice(1, 3)) + "," + parseInt("0x" + c.slice(3, 5)) + "," + parseInt("0x" + c.slice(5, 7)) + "," + opacity + ")";
  }
  // 颜色格式为rgb
  if (/^rgb\(/.test(c)) {
    rgba = "rgba" + c.slice(3, c.length - 1) + `,${opacity})`;
  }
  // 颜色格式为rgba
  if (/^rgba\(/.test(c)) {
    rgba = c.substring(0, c.lastIndexOf(",")) + `,${opacity})`;

    rgba = c;
  }

  return rgba !== "" ? rgba : c;
};

export const designWidth = 1920; // 设计稿宽度

/** echart自适应 */
export const adaptiveS = (size: number) => {
  const cw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

  if (!cw) return;

  const fs = cw / designWidth;

  return size * fs;
};

/**
 * 获取公共配置项属性值
 * @param key 属性名称
 * @returns 属性值
 */
export const val = (key: string) => {
  const value: any = { ...com };
  const objKeys = Object.keys(com);
  let returnData: any = "";

  if (objKeys.indexOf(key) != -1) {
    returnData = value[key];
  } else {
    return;
  }
  return returnData;
};

/**
 * 加载及更新
 * @param id 元素id
 * @param data 图表配置项
 * @return 图表实例
 */
export const chartsLoad = (id: string, data: any) => {
  const element = document.getElementById(id);
  if (element == null) {
    return;
  }
  const existInstance = echarts.getInstanceByDom(element);
  if (echarts.getInstanceByDom(element)) {
    existInstance?.setOption(data, true);
  } else {
    const myChart = echarts.init(element);
    myChart.setOption(data, true);

    return myChart;
  }
};

/**
 * 销毁实例
 * @param id 图表id
 */
export const dispose = (id: string) => {
  const d = document.getElementById(id);
  if (d) {
    echarts.dispose(d);
  } else {
    return "error";
  }
};