<template>
  <div class="echart-container">
    <!-- 百度地图 -->
    <div ref="bmap" class="bmap-box"></div>
    <div class="title-box">
      <div>
        {{ currentTime }}
      </div>
      <h2>echart大数据屏幕</h2>
      <div>🌤 多云转晴东南风 26~30℃</div>
    </div>
    <div class="top">
      <div class="top-left" ref="topLeft"></div>
      <div class="top-right" ref="topRight"></div>
    </div>
    <div class="bottom">
      <div class="bottom-left" ref="bottomLeft"></div>
      <div class="bottom-middle" ref="bottomMiddle"></div>
      <div class="bottom-right" ref="bottomRight"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { getCurrentDate } from "../../utils/formatTime";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";

let bmap = ref();
let topLeft = ref();
let topRight = ref();
let bottomLeft = ref();
let bottomMiddle = ref();
let bottomRight = ref();

// 显示当前时间
let currentTime = ref("");
// 定时器实例
let interval = null;
// 存放echarts实例
let myEcharts = reactive([]);

let initTime = () => {
  interval = setInterval(() => {
    currentTime.value = getCurrentDate(new Date());
  }, 1000);
};
// 百度地图初始化
let initBMap = () => {
  let chart = echarts.init(bmap.value);

  let option = {
    backgroundColor: "transparent",
    tooltip: {
      trigger: "item",
    },
    bmap: {
      center: [106.55, 29.57],
      zoom: 7,
      roam: true,
      mapStyle: {
        styleJson: [
          {
            featureType: "water",
            elementType: "all",
            stylers: {
              color: "#357f88",
            },
          },
          {
            featureType: "land",
            elementType: "all",
            stylers: {
              color: "#eeeeee",
            },
          },

          {
            featureType: "highway",
            elementType: "all",
            stylers: {
              visibility: "off",
            },
          },
        ],
      },
    },
    series: [],
  };
  chart.setOption(option);
  myEcharts.push(chart);
};

// 图表自适应resize
let resize = () => {
  window.addEventListener("resize", () => {
    for (let i = 0; i < myEcharts.length; i++) {
      myEcharts[i].resize();
    }
  });
};
// 图表销毁
let clearEcharts = () => {
  for (let i = 0; i < myEcharts.length; i++) {
    myEcharts[i].dispose();
  }
};
// 左上echart图初始化
let initLeftTop = () => {
  let chart = echarts.init(topLeft.value);
  const option = {
    grid: {
      top: 50,
      right: 0,
      bottom: 50,
      left: 30,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      axisLine: {
        lineStyle: {
          color: "rgba(22, 207, 208, 0.1)",
          width: 1,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#16cfd0",
      },
    },
    yAxis: [
      {
        type: "value",
        name: "价格",
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.1)",
          },
        },
        axisLabel: {
          color: "#16cfd0",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.3)",
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(22, 207, 208, 0.02)",
          },
        },
        nameTextStyle: {
          color: "#16cfd0",
        },
      },
    ],
    series: [
      {
        name: "预购队列",
        type: "line",
        data: [200, 85, 112, 275, 305, 415],
        itemStyle: {
          color: "#16cfd0",
        },
      },
      {
        name: "最新成交价",
        type: "line",
        data: [50, 85, 22, 155, 170, 25],
        itemStyle: {
          color: "#febb50",
        },
      },
    ],
  };
  chart.setOption(option);
  myEcharts.push(chart);
};
// 右上echart图初始化
let initRightTop = () => {
  let chart = echarts.init(topRight.value);
  const option = {
    grid: {
      top: 50,
      right: 10,
      bottom: 40,
      left: 30,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1月", "2月", "3月", "4月", "5月"],
      axisLine: {
        lineStyle: {
          color: "rgba(22, 207, 208, 0.1)",
          width: 1,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: "#16cfd0",
      },
    },
    yAxis: [
      {
        type: "value",
        name: "销量",
        axisLabel: {
          color: "#16cfd0",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.3)",
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(22, 207, 208, 0.02)",
          },
        },
        nameTextStyle: {
          color: "#16cfd0",
        },
      },
    ],
    series: [
      {
        name: "客流",
        type: "line",
        stack: "总量",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgba(1, 191, 236)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [140, 232, 101, 264, 90],
      },
      {
        name: "天数",
        type: "line",
        stack: "总量",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(0, 221, 255)",
            },
            {
              offset: 1,
              color: "rgba(77, 119, 255)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [120, 282, 111, 234, 220],
      },
    ],
  };
  chart.setOption(option);
  myEcharts.push(chart);
};
// 左下echart图初始化
let initLeftBottom = () => {
  let chart = echarts.init(bottomLeft.value);
  const option = {
    grid: {
      top: 50,
      right: 30,
      bottom: 50,
      left: 20,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      axisLine: {
        lineStyle: {
          color: "rgba(22, 207, 208, 0.5)",
          width: 1,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#16cfd0",
      },
    },
    yAxis: [
      {
        type: "value",
        name: "亿元",
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.1)",
          },
        },
        axisLabel: {
          color: "#16cfd0",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.3)",
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(22, 207, 208, 0.02)",
          },
        },
        nameTextStyle: {
          color: "#16cfd0",
        },
      },
      {
        type: "value",
        name: "同比",
        position: "right",
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          formatter: "{value}%",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(22, 207, 208, 0.02)",
          },
        },
        nameTextStyle: {
          color: "#16cfd0",
        },
      },
    ],
    series: [
      {
        name: "销售水量",
        type: "line",
        yAxisIndex: 1,
        smooth: true,
        showAllSymbol: true,
        symbol: "circle",
        itemStyle: {
          color: "#058cff",
        },
        lineStyle: {
          color: "#058cff",
        },
        areaStyle: {
          color: "rgba(5,140,255, 0.2)",
        },
        data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
      },
      {
        name: "主营业务",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#00FFE3",
              },
              {
                offset: 1,
                color: "#4693EC",
              },
            ]),
          },
        },
        data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
      },
    ],
  };
  chart.setOption(option);
  myEcharts.push(chart);
};
// 中下echart图初始化
let initMiddleBottom = () => {
  let chart = echarts.init(bottomMiddle.value);
  const min = 100;
  const max = 1000;
  const option = {
    grid: {
      top: 50,
      right: 10,
      bottom: 66,
      left: 38,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: [
      {
        type: "category",
        data: [
          "地区",
          "地区",
          "地区",
          "地区",
          "地区",
          "地区",
          "地区",
          "地区",
          "地区",
          "地区",
        ],
        axisLabel: {
          color: "#16cfd0",

          interval: 0,
          rotate: -45,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(22, 207, 208, 0.1)",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "天数",
        nameGap: 25,
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.1)",
          },
        },
        axisLabel: {
          color: "#16cfd0",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.3)",
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(22, 207, 208, 0.02)",
          },
        },
        nameTextStyle: {
          color: "#16cfd0",
        },
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#de682e",
              },
              {
                offset: 1,
                color: "#ecc232",
              },
            ]),
          },
        },
        label: {
          normal: {
            show: true,
            position: "top",
            formatter: function (param) {
              if (param.value == max || param.value == min) {
                return "";
              }
              return param.value;
            },
          },
        },
        markPoint: {
          symbolSize: 30,
          label: {
            normal: {},
          },
          data: [
            { name: "年最低", value: min, xAxis: 0, yAxis: 100 },
            { name: "年最高", value: max, xAxis: 9, yAxis: 1000 },
          ],
        },
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
      },
    ],
  };
  chart.setOption(option);
  myEcharts.push(chart);
};
// 右下echart图初始化
let initRightBottom = () => {
  let chart = echarts.init(bottomRight.value);
  const option = {
    grid: {
      top: 50,
      right: 10,
      bottom: 40,
      left: 30,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      axisLine: {
        lineStyle: {
          color: "rgba(22, 207, 208, 0.1)",
          width: 1,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#16cfd0",
      },
    },
    yAxis: [
      {
        type: "value",
        name: "人数(万)",
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.1)",
          },
        },
        axisLabel: {
          color: "#16cfd0",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(22, 207, 208, 0.3)",
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(22, 207, 208, 0.02)",
          },
        },
        nameTextStyle: {
          color: "#16cfd0",
        },
      },
    ],
    series: [
      {
        name: "预购队列",
        type: "line",
        data: [20, 15, 40, 55, 65, 85],
        smooth: true,
        itemStyle: {
          color: "#EA7CCC",
        },
      },
      {
        name: "最新成交价",
        type: "line",
        data: [30, 45, 65, 85, 60, 105],
        smooth: true,
        itemStyle: {
          color: "#FAC958",
        },
      },
    ],
  };
  chart.setOption(option);
  myEcharts.push(chart);
};

onMounted(async () => {
  initTime();

  await initBMap();
  await initLeftTop();
  await initRightTop();
  await initLeftBottom();
  await initMiddleBottom();
  await initRightBottom();
  await resize();
});
onUnmounted(() => {
  clearInterval(interval);
  clearEcharts();
});
</script>
<style scoped lang="scss">
$width: 340px;
$height: 300px;
.echart-container {
  position: relative;
  width: 100%;
  height: 100%;
  .bmap-box {
    width: 100%;
    height: 100%;
  }
  .title-box {
    color: darkblue;
    font-style: italic;
    position: absolute;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  // .top {
  //   position: absolute;
  //   top: 60px;
  //   width: 100%;
  //   height: calc((100% - 60px) / 2);
  //   display: flex;
  //   justify-content: space-between;
  //   .top-left,
  //   .top-right {
  //     width: $width;
  //     height: 100%;
  //   }
  // }
  .top {
    .top-left,
    .top-right {
      width: $width;
      height: calc((100% - 60px) / 2);
      position: absolute;
      top: 60px;
    }
    .top-left {
      left: 0;
    }
    .top-right {
      right: 0;
    }
  }

  .bottom {
    position: absolute;
    height: calc((100% - 60px) / 2);
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    .bottom-left,
    .bottom-right {
      width: $width;
      height: 100%;
    }
    .bottom-middle {
      width: calc(100% - #{$width * 2} - 50px);
      height: $height;
    }
  }
}
</style>
