<template>
  <div class="main">
    <div class="dChart" style="height: 500px; width: 50%" :id="eChart"></div>
    <div class="dChart" style="height: 500px; width: 50%" :id="eChart1"></div>
  </div>
  <div class="dChart" style="height: 500px; width: 100%" :id="eChart2"></div>
</template>

<script setup>
import { ref, onMounted, reactive, computed, onUnmounted, warn } from "vue";
import * as echarts from "echarts";
onMounted(() => {
  initchat();
  initchat1();
  initchat2();
});
onUnmounted(() => {
  console.warn("onUnmounted,页面销毁定时任务");
  state.echarts?.clear(); //销毁
});

const state = reactive({
  echarts: null,
});
const eChart = ref("eChart" + Date.now() + Math.random());
const eChart1 = ref("eChart1" + Date.now() + Math.random());
const eChart2 = ref("eChart2" + Date.now() + Math.random());

const initchat = async () => {
  let angle = 0; //角度，用来做简单的动画效果的
  let value = 78; //图上角度数据
  let option = {
    backgroundColor: "#0D2753",
    title: {
      text: "{a|" + value + "}{c|%}",
      x: "center",
      y: "center",
      textStyle: {
        rich: {
          a: {
            fontSize: 45,
            color: "#ffffff",
            fontWeight: "bold",
          },
          c: {
            fontSize: 45,
            color: "#ffffff",
            fontWeight: "normal",
          },
        },
      },
    },
    series: [
      //内环
      {
        name: "",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.65,
              startAngle: ((0 + -angle) * Math.PI) / 180,
              endAngle: ((360 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 0.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      //外环
      {
        name: "",
        type: "pie",
        radius: ["85%", "70%"],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center",
          },
        },
        data: [
          {
            value: value,
            name: "",
            itemStyle: {
              normal: {
                //外环发光
                borderWidth: 0.5,
                shadowBlur: 20,
                borderColor: "#4bf3f9",
                shadowColor: "#9bfeff",
                color: {
                  // 圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: "#4bf3f9", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4bf3f9", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
          {
            value: 100 - value,
            name: "",
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#173164",
              },
            },
          },
        ],
      },
    ],
  };

  let chat = echarts.init(document.getElementById(eChart.value));
  state.echarts = await chat.setOption(option);
};

const initchat1 = async () => {
  let dataX = [
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
    "XX街道",
  ]; //名称
  let dataY = [
    20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15, 35, 50, 30, 40, 50, 60,
  ]; //数据
  let zoomShow = false;
  if (dataY.length > 14) {
    zoomShow = true;
  } else {
    zoomShow = false;
  }
  var option = {
    backgroundColor: "#0D2753",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "5%",
      left: "5%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: dataX,
        axisLine: {
          lineStyle: {
            color: "rgba(66, 192, 255, .3)",
          },
        },
        axisLabel: {
          interval: 0,
          margin: 10,
          color: "#05D5FF",
          textStyle: {
            fontSize: 11,
          },
          rotate: "45",
        },
        axisTick: {
          //刻度
          show: false,
        },
      },
    ],
    yAxis: [
      {
        axisLabel: {
          padding: [3, 0, 0, 0],
          formatter: "{value}",
          color: "rgba(95, 187, 235, 1)",
          textStyle: {
            fontSize: 11,
          },
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(66, 192, 255, .3)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0)",
          },
        },
      },
    ],
    dataZoom: [
      //滚动条
      {
        show: zoomShow,
        type: "slider",
        realtime: true,
        startValue: 0,
        endValue: 14,
        xAxisIndex: [0],
        bottom: "10",
        left: "30",
        height: 10,
        borderColor: "rgba(0,0,0,0)",
        textStyle: {
          color: "#05D5FF",
        },
      },
    ],
    series: [
      {
        type: "bar",
        data: dataY,
        barWidth: "10",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
                },
                {
                  offset: 0.98,
                  color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
                },
              ],
              false
            ),
            shadowColor: "rgba(5, 213, 255, 1)",
            shadowBlur: 4,
          },
        },
        label: {
          normal: {
            show: true,
            lineHeight: 10,
            formatter: "{c}",
            position: "top",
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
        },
      },
    ],
  };

  let chat = echarts.init(document.getElementById(eChart1.value));
  await chat.setOption(option);
};
const initchat2 = async () => {
  var res = [];
  let option = {
    xAxis: {
      type: "category",
      boundaryGap: true,
      data: (function () {
        var len = 50;
        while (len--) {
          res[len] = len;
        }
        return res;
      })(),
    },

    yAxis: {
      type: "value",
      scale: true,
      name: "",
      max: 2,
      min: 0,
      boundaryGap: [0.2, 0.2],
    },

    series: {
      name: "",
      type: "line",
      data: (function () {
        var res = [];
        var len = 0;
        while (len < 10) {
          res.push(Math.random());
          len++;
        }
        return res;
      })(),
    },
  };
  let chat = echarts.init(document.getElementById(eChart2.value));
  setInterval(function () {
    var data0 = option.series.data;
    data0.push(Math.random());
    chat.setOption(option);
  }, 1000);
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
}
</style>
