<script setup>
import calendar from '@/components/calendar/index.vue'
import * as echarts from 'echarts'
import {onMounted} from "vue";
onMounted(()=>{
  drawPowerEcharts()
  //碳排放
  getCarbonEmission()
})
const drawPowerEcharts = () =>{
  let myChart = echarts.init(document.getElementById('power'))
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {},
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [

      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "rgba(1, 39, 37, .3)",
            // color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#DDFFFD",
            margin: 40,
          },

        },

        axisTick: { show: false },
        boundaryGap: true,
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name:"单位:kW/h",
        nameTextStyle:{
          color: "#DDFFFD",
        },
        min: 0,
        max: 500,
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type:'dashed',
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "异常流量",
        type: "line",
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,

        lineStyle: {
          normal: {
            color: "#5BFAF1", // 线条颜色
          },
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
                  { offset: 1, color: "rgba(91, 250, 241, 0)" },
                ],
                false
            ),

            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
        },
        data: [110, 200, 300,325, 400, 322, 250],
      },
    ],
  };
  myChart.setOption(option)
}
//碳排放
function getCarbonEmission() {
  const offsetX = 10; //bar宽
  const offsetY = 5; //倾斜角度
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x - 7, shape.y];
      const c1 = [shape.x + 7, shape.y];
      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
      const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x + 7, shape.y];
      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
      const c4 = [shape.x + 7 + 7, shape.y - 5];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x - 7, shape.y];
      const c2 = [shape.x + 8, shape.y];
      const c3 = [shape.x + 15, shape.y - 5];
      const c4 = [shape.x - 2, shape.y - 5];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
      ctx.stroke();
    },
  });
  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);
  let xAxisData = [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
  ];
  let seriesData = [100, 200, 300, 400, 200, 250,];
  // 绿色渐变
  // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
  // 蓝色渐变
  let colorArr = [
    ["rgba(0, 193, 113, 1)"],
    ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
    ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
  ];
  let myChart = echarts.init(
    document.getElementById("carbonEmission")
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params, ticket, callback) {
        const item = params[1];
        return item.name + " : " + item.value;
      },
    },
    grid: {
      left: "4%",
      right: "5%",
      top: "18%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: "solid",
          color: "rgba(255, 255, 255, 0.20)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "rgba(221, 255, 253, 1)",
        fontSize: 14,
        interval: 0,
        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
        // formatter: function (value) {
        //   const length = value.length;
        //   if (length > 3) {
        //     const start = Math.floor(length / 2);
        //     const str =
        //       value.slice(0, start) + "\n" + value.slice(start, length);
        //     return str;
        //   }
        //   return value;
        // },
      },
    },
    yAxis: {
      type: "value",
      name: "单位:kW/h",
      nameTextStyle: {
        color: "#DDFFFD",
      },
      //   minInterval: 1,
      // y轴（竖直线）
      axisLine: {
        show: false,
      },
      // y轴横向 标线
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(1, 39, 37, 0.30)",
        },
      },
      // y轴刻度线
      axisTick: {
        show: false,
      },
      // y轴文字
      axisLabel: {
        fontSize: 14,
        color: "#DDFFFD",
      },
    },
    series: [
      {
        type: "custom",
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              // 左侧面
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[1][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[1][1],
                    },
                  ]),
                },
              },
              // 右侧面
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[2][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[2][1],
                    },
                  ]),
                },
              },
              // 顶部
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[0][0],
                    },
                    {
                      offset: 1,
                      color: colorArr[0][0],
                    },
                  ]),
                },
              },
            ],
          };
        },
        data: seriesData,
      },
      {
        type: "bar",
        label: {
          normal: {
            show: false,
            position: "top",
            formatter: (e) => {
              return e.value;
            },
            fontSize: 16,
            color: "#43C4F1",
            offset: [0, -5],
          },
        },
        itemStyle: {
          color: "transparent",
        },
        tooltip: {},
        data: seriesData,
      },
    ],
  };
  myChart.setOption(option);
}
</script>

<template>

  <div class="overview m100">

    <div class="overview-left-box">
      <!--  用电量-->
      <div class="title">
        <span>用电量</span>
        <p>
          <span class="year">年</span>
          <span class="month">月</span>
        </p>
      </div>
      <div class="margin10 box-bg" id="power">

      </div>
      <!--  日历-->
      <div class="title margin10">
        <span>能耗日历</span>
        <p>
          <span>单位：kgce</span>
        </p>
      </div>
      <div class="margin10 box-bg">
        <calendar />
      </div>
      <!--  碳排放-->
      <div class="title margin10">
        <span>碳排放</span>
        <p>
          <span class="year">年</span>
          <span class="month">月</span>
        </p>
      </div>
      <div class="margin10 box-bg" id="carbonEmission">

      </div>
    </div>
    <div class="overview-right-box">
      <!--  实时负荷 -->
      <div class="title">
        <span>实时负荷</span>
      </div>
      <div class="margin10 box-bg">
          <div class="">

          </div>
      </div>
      <!--  气象站-->
      <div class="title margin10">
        <span>气象站</span>

      </div>
      <div class="margin10 box-bg">

      </div>
      <!--  系统用电排名-->
      <div class="title margin10">
        <span>系统用电排名</span>

      </div>
      <div class="margin10 box-bg">

      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.overview {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
    &-right-box,&-left-box {
      height: 100%;
      width: vw(450);
  }
  &-right-box{padding-right: 2.375rem;}
  &-left-box{padding-left: 2.375rem;}


}
</style>