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

<script setup lang="ts">
import * as echarts from "echarts";
function initChart() {
  const chartDom = document.getElementById("diggerDailyDistanceChart");
  const mainChart = echarts.init(chartDom);

  let data1 = [
    {
      name: "1日",
      value: 175,
    },
    {
      name: "2日",
      value: 148,
    },
    {
      name: "3日",
      value: 195,
    },
    {
      name: "4日",
      value: 115,
    },
    {
      name: "5日",
      value: 148,
    },
    {
      name: "6日",
      value: 95,
    },
    {
      name: "7日",
      value: 56,
    },
    {
      name: "8日",
      value: 45,
    },
    {
      name: "9日",
      value: 15,
    },
    {
      name: "10日",
      value: 48,
    },
    {
      name: "11日",
      value: 95,
    },
    {
      name: "12日",
      value: 128,
    },
    {
      name: "13日",
      value: 34,
    },
    {
      name: "14日",
      value: 123,
    },
    {
      name: "15日",
      value: 175,
    },
    {
      name: "16日",
      value: 148,
    },
  ];
  let xAxisData = [];
  let seriesData2 = [];

  data1.forEach((item) => {
    xAxisData.push(item.name);
    seriesData2.push(item.value);
  });
  let option = {
    tooltip: {
      textStyle: {
        color: "#000",
      },
      padding: [10, 10],
      trigger: "axis",
      backgroundColor: "#fff",
      borderColor: "rgba(112, 119, 242, 0.8)",
      borderWidth: 1,
    },
    grid: {
     left: "1%",
      right: "1%",
      bottom: "5%",
        top: "15%",
      containLabel: true,
    },
    toolbox: {
      show: false,
    },

    xAxis: {
      type: "category",
      data: xAxisData,
      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",
        },
      },
    ],
    series: [
      {
        type: "line",
        data: seriesData2,
        symbolSize: 10,
        symbol: "circle",
        smooth: false,
        yAxisIndex: 0,
        label: {
          show: false,
          //   textStyle: {
          //     color: "#FFD15C",
          //     fontSize: 20,
          //     fontFamily: "DIN",
          //     fontWeight: "bold",
          //   },
          position: "top",
          formatter: function (p) {
            return p.value > 0 ? p.value : "";
          },
        },
        lineStyle: {
          width: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 209, 92, 1)",
            },
            {
              offset: 1,
              color: "rgba(255, 209, 92, 1)",
            },
          ]),
          shadowColor: "rgba(255, 209, 92, 0.4)",
          shadowBlur: 10,
          shadowOffsetY: 10,
        },
        itemStyle: {
           color: "rgba(255, 209, 92, 1)",
            borderColor: "",
            borderWidth: 3,
            shadowColor: "rgba(255, 209, 92, 01)",
            shadowBlur: 5,
        },
      },
    ],
  };

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

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