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

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps({
  datas: {
    type: Object,
    default: () => {},
  },
});
function initChart() {
  const chartDom = document.getElementById("diggerDailyDistanceChart");
  const mainChart = echarts.init(chartDom);
  let finalData = [];

  for (let key in props.datas) {
    finalData.push({
      name: key + "日",
      value: props.datas[key],
    });
  }
  // let finalData = [
  //   {
  //     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 = [];

  finalData.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);
}
watch(
  () => props.datas,
  (newVal) => {
    if (newVal) {
      initChart();
    }
  },
  {
    deep: true,
  }
);
</script>

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