Sis_Search/src/tools/echartsToolzm.js

import * as EC from 'echarts';
import BASE from '@tools/base';
const color = ["#00FFF0", "#014EB5", "#A800FF", "#e82edb", "#B5454C", "#443bff", "#e8cb25", "#3dffb0", "#e8a425", "#ff7aab", "#e84b1e", "#552ce2", "#ffae21", "#e8861e", "#d441ff", "#35e8e4", "#9c7aff", "#e86fd8", "#ffee38"];

/*
 *  柱状图(非堆叠柱状图)
 *  id: 元素ID
 *  data 数据
 * [
          {
            name: "限电损失电量(单位：万kwh)",
            type: "bar",
            data: this.histogram.xdss,
          },
          {
            name: "故障损失电量(单位：万kwh)",
            type: "bar",
            data: this.histogram.gzss,
          },
          ,
          {
            name: "检修损失电量(单位：万kwh)",
            type: "bar",
            data: this.histogram.jxss,
          },
          {
            name: "性能损失电量(单位：万kwh)",
            type: "bar",
            data: this.histogram.xnss,
          },
          {
            name: "受累损失电量(单位：万kwh)",
            type: "bar",
            data: this.histogram.slss,
          },
        ]
 *  xdata :  横坐标数据
 * */
export function getBar_fdd (id, data) {
  if (data === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  var option;
  option = {
    title: {
      text: "损失电量分析",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: [
        "限电损失电量(单位：万kwh)",
        "故障损失电量(单位：万kwh)",
        "检修损失电量(单位：万kwh)",
        "性能损失电量(单位：万kwh)",
        "受累损失电量(单位：万kwh)",
      ],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    xAxis: {
      type: "category",
      data: data.date,
    },
    series: [
      {
        name: "限电损失电量(单位：万kwh)",
        type: "bar",
        data: data.xdss,
      },
      {
        name: "故障损失电量(单位：万kwh)",
        type: "bar",
        data: data.gzss,
      },
      ,
      {
        name: "检修损失电量(单位：万kwh)",
        type: "bar",
        data: data.jxss,
      },
      {
        name: "性能损失电量(单位：万kwh)",
        type: "bar",
        data: data.xnss,
      },
      {
        name: "受累损失电量(单位：万kwh)",
        type: "bar",
        data: data.slss,
      },
    ],
  };
  myChart.setOption(option, true);
}
/**
 * 对标分析弹出雷达图--->
 * @param {id名称} id 
 * @param {第一台风机数据} value1 
 * @param {第一台风机名字} name1 
 * @param {第二台风机数据} value2 
 * @param {第二台风机名字} name2 
 * @returns 
 */
export function leida_tc (id, value1, name1, value2, name2) {
  if (value1 === undefined || value2 === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart;
  if (document.getElementById(id) != null) {
    myChart = EC.init(document.getElementById(id));

  }

  var option;

  option = {
    title: {
      text: "对标排名分析",
      left: 400,
      top: -5,
      textStyle: {
        fontSize: 13,
      },
    },
    grid: {
      top: "10%",
      left: "10%",
      right: "10%",
      bottom: "0",
    },
    tooltip: {},
    legend: {
      orient: "vertical",
      x: "left", //可设定图例在左、右、居中
      y: "0", //可设定图例在上、下、居中
      padding: [0, 50, 0, 0],
    },
    radar: {
      // shape: 'circle',
      name: {
        textStyle: {
          color: "#fff",
          backgroundColor: "#999",
          borderRadius: 3,
          padding: [3, 5],
        },
      },
      indicator: [
        { name: "风能利用率", max: 100 },
        { name: "故障损失率", max: 100 },
        { name: "检修损失率", max: 100 },
        { name: "弃风率", max: 100 },
        { name: "性能损失率", max: 100 },
        { name: "受累损失率", max: 100 },
        { name: "复位及时率", max: 100 },
        { name: "状态转换率", max: 100 },
        { name: "消缺及时率", max: 100 },
      ],
    },
    series: [
      {
        name: "预算 vs 开销（Budget vs spending）",
        type: "radar",
        // areaStyle: {normal: {}},
        data: [
          {
            value: value1,
            name: name1,
          },
          {
            value: value2,
            name: name2,
          },
        ],
      },
    ],
  };
  myChart.setOption(option, true);

}
/**
 * 
 * @param {id名称} id 
 * @param {第一台风机数据} value1 
 * @param {第二台风机数据} value2 
 * @returns 
 */
export function bar_tc (id, value1, value2, n1, n2) {
  if (value1 === undefined || value2 === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  var option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    title: {
      text: "损失电量分析",
      left: 100,
      top: 8,
      textStyle: {
        fontSize: 13,
      },
    },
    grid: {
      top: "90",
      left: "10%",
      right: "10%",
      bottom: "30",
    },
    legend: {
      orient: "vertical",
      right: "0%",
      padding: [6, 99, 9, 5],
      data: [
        "限电损失电量(单位：万kwh)",
        "故障损失电量(单位：万kwh)",
        "检修损失电量(单位：万kwh)",
        "性能损失电量(单位：万kwh)",
        "受累损失电量(单位：万kwh)",
      ],
    },
    xAxis: [
      {
        type: "category",
        data: [
          BASE.getBzDate(new Date(value1.recordDate), 0) + "/" + n1,
          BASE.getBzDate(new Date(value2.recordDate), 0) + "/" + n2,
        ],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "电量",

        axisLabel: {
          formatter: "{value} 万kw",
        },
      },
    ],
    series: [
      {
        name: "限电损失电量(单位：万kwh)",
        type: "bar",
        yAxisIndex: 0,
        data: [value1.xdss, value2.xdss],
      },
      {
        name: "故障损失电量(单位：万kwh)",
        type: "bar",
        yAxisIndex: 0,
        data: [value1.gzss, value2.gzss],
      },
      {
        name: "检修损失电量(单位：万kwh)",
        type: "bar",
        yAxisIndex: 0,
        data: [value1.jxss, value2.jxss],
      },
      {
        name: "性能损失电量(单位：万kwh)",
        type: "bar",
        yAxisIndex: 0,
        data: [value1.xnss, value2.xnss],
      },
      {
        name: "受累损失电量(单位：万kwh)",
        type: "bar",
        yAxisIndex: 0,
        data: [value1.slss, value2.slss],
      },
    ],
  };



  myChart.setOption(option, true);
}
/**
 * 
 * @param {id名称} id 
 * @param {数据} value 
 * @returns 
 */
export function bar_tc_2 (id, value) {
  if (value === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    legend: {
      orient: "vertical",
      left: "right",
    },
    tooltip: {},
    dataset: {
      dimensions: [
        "product",
        "限电损失电量单位:万KWh",
        "故障损失电量单位:万KWh",
        "检修损失电量单位:万KWh",
        "性能损失电量单位:万KWh",
        "受累损失电量单位:万KWh",
      ],
      source: value,
    },
    xAxis: { type: "category" },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
        // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
        type: "bar",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "#D201D8",
          },
        },
      },
      {
        type: "bar",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "#FD0100",
          },
        },
      },
      {
        type: "bar",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "#FF7B16",
          },
        },
      },
      {
        type: "bar",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "#8085E9",
          },
        },
      },
      {
        type: "bar",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "#A6A6A6",
          },
        },
      },
    ],
  };
  myChart.setOption(option, true);
}
/**
 * 用在单机饱和度分体  表格内雷达图
 * @param {id名称} id 
 * @param {雷达图数据} value 
 * @param {雷达图名称} name 
 * @returns 
 */
export function leida_djbhd (id, value, name) {
  if (value === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  myChart.resize({ height: 300 });
  let option = {
    tooltip: {},
    legend: {
      top: "93%",
      left: "10%",
    },
    tooltip: {
      triggerOn: "none",
      alwaysShowContent: true,
      position: function (pt) {
        return [pt[0], 130];
      },
    },
    radar: {
      name: {
        textStyle: {
          color: "#fff",
          backgroundColor: "#999",
          borderRadius: 3,
          padding: [3, 5],
        },
      },
      indicator: [
        { name: "北", max: 99 },
        { name: "北北东", max: 99 },
        { name: "北东", max: 99 },
        { name: "东北东", max: 99 },
        { name: "东", max: 99 },
        { name: "东南东", max: 99 },
        { name: "南东", max: 99 },
        { name: "南南东", max: 99 },
        { name: "南", max: 99 },
        { name: "南南西", max: 99 },
        { name: "南西", max: 99 },
        { name: "西南西", max: 99 },
        { name: "西", max: 99 },
        { name: "西北西", max: 99 },
        { name: "北西", max: 99 },
        { name: "北北西", max: 99 },
      ],
    },
    series: [
      {
        type: "radar",
        // areaStyle: {normal: {}},
        data: [
          {
            value: value,
            name: name,
            label: {
              show: true,
              position: "insideBottomRight",
              distance: 14.5,
              //rotate: -45,
              offset: [11, 0],
              formatter: function (params) {
                let list = ["北", "北北东", "北东", "东北东", "东", "东南东", "南东", "南南东", "南", "南南西", "南西", "西南西", "西", "西北西", "北西", "北北西"]
                if (params.value < 10) {
                  return ''
                } else {
                  return list[params.dimensionIndex] + ':' + params.value;
                }
              }
            },
            areaStyle: {
              opacity: 0.9,
              color: new EC.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  color: "#B8D3E4",
                  offset: 0,
                },
                {
                  color: "#72ACD1",
                  offset: 1,
                },
              ]),
            },
          },
        ],
        itemStyle: { normal: { label: { show: true } } },
      },
    ],
    tooltip: {
      show: false,
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 100];
      },
      // formatter: function (params) {
      //   //其中p为当前鼠标的位置
      //   debugger
      //    let fanhui = [];
      //    let str ='';
      //    let list = ["北","北北东","北东","东北东","东","东南东","南东","南南东","南","南南西","南西","西南西","西","西北西","北西","北北西"]
      //    for(let i=1;i<Object.keys(params.value).length;i++){
      //           if(params.value[i]>10){
      //             fanhui.push(params.value[i]+':'+list[i]);
      //           }
      //    }
      //    for(let j = 1 ;j<fanhui.length;j++){
      //       str.concat(fanhui[j]);
      //    }
      //    return str;
      // },
      textStyle: {
        fontWeight: "16px",
        fontSize: 16,
        lineHeight: 0,
      },
    },
  };

  myChart.setOption(option, true);
}
/**
 * 单机饱和度---->
 * @param {id名称} id 
 * @param {风机集合} fj 
 * @param {曲线数据} lineDate 
 * @returns 
 */
export function bar_djbhd (id, fj, lineDate) {
  if (lineDate === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    title: {
      text: "日功率曲线",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: fj,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,

      data: lineDate.speed,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: fj[0],
        type: "line",
        stack: "总量",
        smooth: true,
        data: lineDate.value1,
      },
      {
        name: fj[1],
        type: "line",
        stack: "总量",
        smooth: true,
        data: lineDate.value2,
      },
      {
        name: fj[2],
        type: "line",
        stack: "总量",
        smooth: true,
        data: lineDate.value3,
      },
      {
        name: fj[3],
        type: "line",
        stack: "总量",
        smooth: true,
        data: lineDate.value3,
      },
      {
        name: fj[4],
        type: "line",
        stack: "总量",
        smooth: true,
        data: lineDate.value4,
      },
    ],
  };
  myChart.setOption(option, true);
}
/**
 * 用于单机性能分析--->可定义显示属性位置
 * @param {id名称} id 
 * @param {数据} value 
 * @param {名} name 
 * @returns 
 */
export function bar_DJXNFX (id, value, name) {
  if (value === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  var option;

  option = {
    title: {},
    tooltip: {},
    legend: {
      top: "93%",
      left: "10%",
    },
    radar: {
      // shape: 'circle',
      name: {
        textStyle: {
          color: "#fff",
          backgroundColor: "#999",
          borderRadius: 3,
          padding: [3, 5],
        },
      },
      indicator: [
        { name: "北", max: 99 },
        { name: "北北东", max: 99 },
        { name: "北东", max: 99 },
        { name: "东北东", max: 99 },
        { name: "东", max: 99 },
        { name: "东南东", max: 99 },
        { name: "南东", max: 99 },
        { name: "南南东", max: 99 },
        { name: "南", max: 99 },
        { name: "南南西", max: 99 },
        { name: "南西", max: 99 },
        { name: "西南西", max: 99 },
        { name: "西", max: 99 },
        { name: "西北西", max: 99 },
        { name: "北西", max: 99 },
        { name: "北北西", max: 99 },
      ],
    },
    series: [
      {
        type: "radar",
        // areaStyle: {normal: {}},
        data: [
          {
            value: value,
            name: name,
            // label: {
            //   show: true,
            //   formatter: function (params) {
            //     return params.value;
            //   },
            // },
            areaStyle: {
              opacity: 0.9,
              color: new EC.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  color: "#B8D3E4",
                  offset: 0,
                },
                {
                  color: "#72ACD1",
                  offset: 1,
                },
              ]),
            },
          },
        ],

      },
    ],
    tooltip: {
      position: function (p) { //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 100];
      },
      textStyle: {
        fontWeight: "16px",
        fontSize: 16,
        lineHeight: 0,

      }
      // formatter: (params) => {
      //   for(var i=0;i<Object.keys(params.data.value).length;i++){
      //   return params.data.name[0]+':'+params.data.value[0];
      //   }
      // },
    },
  };

  myChart.setOption(option, true);
}
/**
 * 
* 用于单机性能分析--->
 * @param {id名称} id 
 * @param {数据} value 
 * @returns 
 */
export function qt_DJXNFX (id, value) {
  if (value === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  var option;
  option = {
    title: {
      text: "",
    },

    tooltip: {
      trigger: "item",
    },
    grid: {
      left: 99,
      top: 66,
    },
    legend: {
      orient: "vertical",
      left: "left",
    },

    series: [
      {
        type: "pie",
        radius: ["35%", "70%"],
        center: ["58%", "50%"],
        data: value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  myChart.setOption(option, true);
}

/**
 * 散点图
 * @param {名称} id 
 * @param {数据} value 
 */

export function sdt (id, value) {
  if (value === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  var option;


  option = {
    title: {
      text: "风机功率排布情况",
      lft: "300px",
    },
    legend: {
      data: ["功率"],
      right: "66px",
    },

    tooltip: {
      show: false,
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    xAxis: {
      type: "value",
      scale: true,
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: "{value} m/s",
      },
      splitNumber: 20,
    },
    yAxis: {
      type: "value",
      scale: true,
      min: -40,
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: "{value} 万kw",
      },
    },
    series: [
      {
        name: "功率",
        type: "scatter",
        color: "#FF7F50",
        data: value,
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            { type: "min", name: "最小值" },
          ],
          symbol: "pin",
          symbolSize: 50,
          silent: true,
        },
        markLine: {
          data: [{ type: "average", name: "平均值" }],
        },
      },
      {
        name: "line",
        type: "line",
        smooth: true,
        datasetIndex: 1,
        symbolSize: 0.1,
        symbol: "circle",
        color: "#87CEFA",
        label: { show: false },
        labelLayout: { dx: -20 },
        encode: { label: 2, tooltip: 1 },
      },
    ],
  };

  myChart.setOption(option, true);
}

/**
* 数据长度固定曲线图（多曲线，传service整体）
*/

export function zzt_cdbqd (id, value, name) {
  if (value === undefined) {
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  var option;
  option = {
    title: {
      text: "折线图堆叠",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: value
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
    },
    yAxis: {
      type: "value",
    },
    series: name,
  };

  myChart.setOption(option, true);
}

export default {
  getBar_fdd,
  leida_tc,
  bar_tc,
  bar_tc_2,
  leida_djbhd,
  bar_djbhd,
  bar_DJXNFX,
  qt_DJXNFX,
  zzt_cdbqd,
  sdt,
  color,
}