sisweb/.history/src/tools/echartsToolzm_20210423161147.js

import 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 , xdata) {
  if(data === undefined){
    message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  var 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: xdata,
    },
    series: data,
  };
  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 = 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) {
  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",
      x: "right", //可设定图例在左、右、居中
      y: 0, //可设定图例在上、下、居中
      padding: [0, 50, 200, 0],
      data: [
        "限电损失电量(单位：万kwh)",
        "故障损失电量(单位：万kwh)",
        "检修损失电量(单位：万kwh)",
        "性能损失电量(单位：万kwh)",
        "受累损失电量(单位：万kwh)",
      ],
    },
    xAxis: [
      {
        type: "category",
        data: [
          BASE.getBzDate(new Date(value1.recordDate),0),
          BASE.getBzDate(new Date(value2.recordDate),0),
        ],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "电量",

        interval: 50,
        axisLabel: {
          formatter: "{value} 万kw",
        },
      },
    ],
    series: [
      {
        name: "限电损失电量(单位：万kwh)",
        type: "bar",
        yAxisIndex: 0,
        data: [value1.xdss, value2.xdss],
      },
      {
        name: "故障损失电量(单位：万kwh)",
        type: "bar",
        yAxisIndex: 0,
        data: [value1.zzss, 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);
  }
export default {
  getBar_fdd,
  leida_tc,
  bar_tc,
  bar_tc_2,
  leida_djbhd,
  bar_djbhd,
  bar_DJXNFX,
  qt_DJXNFX,
  color,
}