5G-Loading-Bay-Web/src/components/Charts/diggerHourlyDistanceChart.vue

<script setup lang="ts">
import * as echarts from "echarts";
function generateData(totalNum, bigvalue, smallvalue, color) {
  let dataArr = [];
  for (var i = 0; i < totalNum; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: bigvalue,
        itemStyle: {
          color: color,
          borderWidth: 0,
        },
      });
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: smallvalue,
        itemStyle: {
          color: "rgba(0,0,0,0)",
          borderWidth: 0,
        },
      });
    }
  }
  return dataArr;
}
function initChart() {
  const chartDom = document.getElementById("diggerHourlyDistanceChart");
  const mainChart = echarts.init(chartDom);

  let data1 = [
    {
      name: "05:00",
      value: 175,
    },
    {
      name: "06:00",
      value: 148,
    },
    {
      name: "07:00",
      value: 95,
    },
    {
      name: "08:00",
      value: 175,
    },
    {
      name: "09:00",
      value: 148,
    },
    {
      name: "10:00",
      value: 95,
    },
    {
      name: "11:00",
      value: 56,
    },
    {
      name: "12:00",
      value: 45,
    },
    {
      name: "13:00",
      value: 34,
    },
    {
      name: "14:00",
      value: 123,
    },
    {
      name: "15:00",
      value: 175,
    },
    {
      name: "16:00",
      value: 148,
    },
    {
      name: "17:00",
      value: 95,
    },
    {
      name: "18:00",
      value: 123,
    },
    {
      name: "19:00",
      value: 175,
    },
    {
      name: "20:00",
      value: 148,
    },
    {
      name: "21:00",
      value: 95,
    },
    {
      name: "22:00",
      value: 148,
    },
    {
      name: "23:00",
      value: 95,
    },
  ];
  let xAxisData = [];
  let seriesData1 = [];

  data1.forEach((item) => {
    xAxisData.push(item.name);
    seriesData1.push(item.value);
  });
  const yList = [80, 100, 100, 100];
  const xList = ["寿命≤100", "100<寿命≤200", "200<寿命≤300", "寿命>300"];
  const color = ["#00FEEE", "#2fd28d", "#c4742d", "#c42d2d"];
  const xData = xList.map((item, index) => {
    return {
      value: item,
      textStyle: {
        color: color[index],
      },
    };
  });
  const dom = 200;
  const barWidth = dom / 10;
  const colors = [
    {
      type: "linear",
      x: 1,
      x2: 1,
      y: 0,
      y2: 1,
      colorStops: [
        {
          offset: 1,
          color: "rgba(216,216,216,0)",
        },
        {
          offset: 0.5,
          color: "rgba(103,236,228,0.53)",
        },
        {
          offset: 0,
          color: "#00FEEE",
        },
      ],
    },
  ];
  const colors1 = [
    {
      type: "linear",
      x: 0,
      x2: 0,
      y: 1,
      y2: 0,
      colorStops: [
        {
          offset: 0.3,
          color: "#4bcde4",
        },
        {
          offset: 1,
          color: "#4b88e4",
        },
      ],
    },
  ];
  const option = {
    backgroundColor: "transparent",
    //X轴
    xAxis: {
      name: "X",
      nameTextStyle: {
        color: "#FFFFFF",
        padding: [0, 0, 0, 50],
      },

      data: xAxisData,
      show: true,
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#B4C0CC",
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#35414D",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "#B4C0CC",
      },
    },
    /**区域位置*/
    grid: {
      // Adjust grid for spacing
      left: "1%",
      right: "1%",
      bottom: "5%",
      top: "15%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },

    series: [
      {
        type: "bar",
        barWidth: barWidth,
        symbolOffset: ["10%", "50%"],
        itemStyle: {
          color: function (params) {
            return colors[0];
          },
        },
        data: seriesData1,
        tooltip: {
          show: false,
        },
      },

      {
        // 实体柱状图底部
        z: 4,
        type: "pictorialBar",
        data: seriesData1,

        symbolOffset: ["0%", "0%"],
        symbolSize: [barWidth, barWidth * 0.3],
        itemStyle: {
          color: function (params) {
            return "rgba(0,255,252,0.1)";
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        // 实体柱状图顶部
        z: 3,
        type: "pictorialBar",
        symbolPosition: "end",
        data: seriesData1,
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth, barWidth * 0.3],
        itemStyle: {
          borderWidth: 0,
          color: function (params) {
            return colors1[0];
          },
        },
      },
    ],
  };

  mainChart.setOption(option);
}
onMounted(() => {
  initChart();
});
</script>

<template>
  <div id="diggerHourlyDistanceChart" style="width: 100%; height: 100%"></div>
</template>