screenFront/src/views/generalEnvironmentMechanical/components/power2023.vue

<!--
 * @FilePath: \code\gitscreenFront\src\views\generalEnvironmentMechanical\components\power2023.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 15:04:23
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div ref="power" class="power-class"></div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, onUpdated, reactive, ref } from "vue";
import { EDataPerson, EDataPersonItem } from "@/type/energyConsume";
import { accAdd } from "@/utils/precision";
import border4 from "@/components/borderBox/border6.vue";
const { proxy } = getCurrentInstance() as any;
let props = defineProps<{
  title: string;
  seriesVal: any[];
  httpValue: any;
}>();
let power = ref();

let refborder4 = ref();

const echartsData = reactive<EDataPerson>({
  power: {
    div: null,
    data: null,
    title: "",
    box: null,
  },
});
let year = new Date().getFullYear()
const initEchart = () => {
  if (props.httpValue.listData) {
    
    let series = [];
    props.httpValue.listData.forEach((res) => {
      if (res.years == year) {
        for (let key in res.month) {
          series.push({
            name: key + "月",
            type: "bar",
            stack: res.years,
            emphasis: {
              focus: "coordinateSystem",
              label: {
                show: true,
                formatter: function (value, index) {
                  return value.value.toLocaleString();
                },
              },
            },
            data: res.month[key],
          });
        }
      }
    });
    //data0用于初始化计算的数据
    let data0 = [];

    for (let i = 1; i <= props.httpValue.name.length; i++) {
      data0.push(0);
    }

    series.push({
      name: "",
      type: "bar",
      data: data0,
      color: "#bbf",
      stack: props.httpValue.listData[1].years,
      barWidth: 40,
      label: {
        show: true,

        position: "right",
        color: "#fff",
      },
    });
  }

  echartsData.power!.div = power.value;
  echartsData.power!.title = props.title;
  echartsData.power!.data = {
    title: {
      text: echartsData.power!.title,
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
      top: "3%",
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
        axis: "auto",
      },
    },
    // color:color,
    legend: {
      type: "scroll",
      // width:400,
      // right:20,
      top: "11%",
      // itemStyle:{
      //     data:yue
      //   },
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "10%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: props.httpValue?.name,
    },
    series: props.seriesVal,
  };

  change(echartsData.power, props.httpValue);
};
const change = (item: EDataPersonItem, value: any) => {
  let Ebox;
  if (!item.box) {
    Ebox = proxy.$echarts.init(item.div, "dark");
  } else {
    Ebox = item.box;
  }
  clacChartsSum(item.data, value);
  Ebox.setOption(item.data);
  item.box = Ebox;
  changeecharts(item.data, value);
};

/**
 * @函数功能: 修改用电量总数数值的标签
 * @param {*} option echarts数据
 * @param {*} value api接收数据
 * @出口参数:
 * @函数备注:
 */
const clacChartsSum = (option: any, value: any) => {
  var series = option.series;
  // function getSum1 (params) {
  //     let stack=value.listData[0].years
  //       var datavalue = 0
  //       for (var i = 0; i < series.length; i++) {
  //         if(series[i].stack==stack){
  //           // datavalue += series[i].data[params.dataIndex]
  //           datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
  //         }

  //       }
  //       return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
  //     }
  function getSum2(params) {
    let stack = value.listData[1].years;
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
      if (series[i].stack == stack) {
        // datavalue += series[i].data[params.dataIndex]
        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
      }
    }
    return datavalue ? datavalue.toLocaleString() : null;
  }

  if (series.length) {
    series[series.length - 1].label.formatter = getSum2;
  }

  // series[series.length - 2].label.formatter = getSum1
};

/**
 * @函数功能: 修改用电量总数数值的标签
 * @param {*} option echarts数据
 * @param {*} value api接收数据
 * @出口参数:
 * @函数备注:
 */
const changeecharts = (option: any, value: any) => {
  var series = option.series;

  echartsData.power.box.on("legendselectchanged", (obj) => {
    //重新计算今年年数据
    function getSum2(params) {
      let stack = value.listData[1].years;
      var datavalue = 0;
      for (var i = 0; i < series.length; i++) {
        if (obj.selected[series[i].name]) {
          if (series[i].stack == stack) {
            // datavalue += series[i].data[params.dataIndex]
            datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
          }
        }
      }
      return datavalue ? datavalue.toLocaleString() : null;
    }
    if(series.length){
      series[series.length - 1].label.formatter = getSum2;
    }

    // series[series.length - 2].label.formatter = getSum1
    echartsData.power.box.setOption(option);
  });

  function getSum2(params) {
    let stack = value.listData[1].years;
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
      if (series[i].stack == stack) {
        // datavalue += series[i].data[params.dataIndex]
        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
      }
    }
    return datavalue ? datavalue.toLocaleString() : null;
  }

  if (series.length) {
    series[series.length - 1].label.formatter = getSum2;
  }

  // series[series.length - 2].label.formatter = getSum1
};
let boxWH = reactive({
  width: "0px",
  height: "0px",
});
function setchartWH(width: any, height: any) {
  echartsData.power!.div = power.value;
  power.value.style.height = height + "px";
  power.value.style.width = width + "px";
  boxWH.height = height + 30 + "px";
  boxWH.width = width + "px";
  refborder4.value.resetWH();
  if (echartsData.power.box) {
    echartsData.power.box.resize();
  }
}

onUpdated(() => {
  initEchart();
});
onMounted(() => {
  initEchart();
});

// return{setchartWH}
defineExpose({
  setchartWH,
});
</script>

<style scoped>
.power-class {
  width: 100%;
  height: 100%;
}
</style>