LNYD_Web/src/views/screen1/components/charts/LineChart1.vue

<template>
  <div style="width: 100%; height: 180px">
    <div class="chart-style" style="width: 100%; height: 100%">
      <vue-chart :option="chartOption" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import VueChart from "../../components/VueChart.vue";
import * as echarts from "echarts";

import { computed } from "vue";

const props = defineProps({
  time_type: {
    type: String,
    default: "month"
  },
  month_data: {
    type: Array,
    default: () => []
  },
  day_data: {
    type: Array,
    default: () => []
  },
  week_data: {
    type: Array,
    default: () => []
  },
  data: {
    type: Array,
    default: () => []
  }
});
const name_list = computed(() => {
  if (props.time_type === "month") {
    return ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
  } else if (props.time_type === "week") {
    return ["一", "二", "三", "四", "五", "六", "日"];
  } else {
    return [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
      "20",
      "21",
      "22",
      "23",
      "24",
      "25",
      "26",
      "27",
      "28",
      "29",
      "30",
      "31"
    ];
  }
});

const value1_list = computed(() => {
  if (props.time_type === "month") {
    return props.month_data[0].data.map((item: any) => {
      return item.value;
    });
  } else if (props.time_type === "week") {
    return props.week_data[0].data.map((item: any) => {
      return item.value;
    });
  } else {
    return props.day_data[0].data.map((item: any) => {
      return item.value;
    });
  }
});
const value2_list = computed(() => {
  if (props.time_type === "month") {
    return props.month_data[1].data.map((item: any) => {
      return item.value;
    });
  } else if (props.time_type === "week") {
    return props.week_data[1].data.map((item: any) => {
      return item.value;
    });
  } else {
    return props.day_data[1].data.map((item: any) => {
      return item.value;
    });
  }
});
const value3_list = computed(() => {
  if (props.time_type === "month") {
    return props.month_data[2].data.map((item: any) => {
      return item.value;
    });
  } else if (props.time_type === "week") {
    return props.week_data[2].data.map((item: any) => {
      return item.value;
    });
  } else {
    return props.day_data[2].data.map((item: any) => {
      return item.value;
    });
  }
});

// const xLabel = ["9.14", "9.15", "9.16", "9.17", "9.18"];

const chartOption = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "rgb(126,199,255)"
        }
      }
    },
    legend: {
      show: true,
      bottom: 10,
      itemWidth: 30, // 图例标记的图形宽度。
      //   itemGap: 20, // 图例每项之间的间隔。
      itemHeight: 10, //  图例标记的图形高度。
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: 12,
        padding: [0, 8, 0, 8]
      }
    },
    grid: {
      top: "30",
      left: "60",
      right: "40",
      bottom: "60"
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.20)"
          }
        },
        axisLabel: {
          color: "#rgba(255, 255, 255, 0.80)",
          fontSize: 12,
          fontWeight: 400
          //坐标轴刻度标签的相关设置
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#233653"
          }
        },
        axisTick: {
          show: false
        },
        data: name_list.value
      }
    ],
    yAxis: [
      {
        name: "",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          padding: [0, 60, 0, 0]
        },
        // minInterval: 1,
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.20)"
          }
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          color: "rgba(255, 255, 255, 0.80)",
          fontSize: 14
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "厚度达标",
        type: "line",
        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
        smooth: true,
        lineStyle: {
          width: 1,
          color: "#E19056"
        },
        itemStyle: {
          color: "#E19056", //拐点颜色
          // borderColor: '#fff600',//拐点边框颜色
          // borderWidth: 13//拐点边框大小
          label: {
            show: false
          }
        },
        symbolSize: 6, //设定实心点的大小
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(221,120,47, 0.40)"
              },
              {
                offset: 1,
                color: "rgba(221,120,47, 0)"
              }
            ],
            false
          )
        },
        data: value1_list.value
      },
      {
        name: "表面缺陷",
        type: "line",
        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
        smooth: false,
        lineStyle: {
          width: 1,
          color: "#FCD67C"
        },
        itemStyle: {
          color: "#FCD67C", //拐点颜色
          // borderColor: '#fff600',//拐点边框颜色
          // borderWidth: 13//拐点边框大小
          label: {
            show: false
          }
        },
        symbolSize: 6, //设定实心点的大小
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(255,207,95, 0.4)"
              },
              {
                offset: 1,
                color: "rgba(255,207,95, 0)"
              }
            ],
            false
          )
        },
        data: value2_list.value
      },
      {
        name: "间隙警告",
        type: "line",
        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
        smooth: false,
        lineStyle: {
          width: 1,
          color: "#79BF86" // 线条颜色
        },
        itemStyle: {
          color: "#79BF86", //拐点颜色
          // borderColor: '#fff600',//拐点边框颜色
          // borderWidth: 13//拐点边框大小
          label: {
            show: false
          }
        },
        symbolSize: 6, //设定实心点的大小
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(91,179,107, 0.4)"
              },
              {
                offset: 1,
                color: "rgba(91,179,107, 0)"
              }
            ],
            false
          )
        },
        data: value3_list.value
      }
    ]
  };
});
</script>