shuimu-dashboard-h5/src/components/Charts/LineChart.vue

<!-- 圆饼图 -->
<template>
  <div :id="id" :class="className" :style="{height, width}" />
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "lineChart",
    required: true,
  },
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "300px",
  },
  title: {
    type: String,
    default: "",
  },
  //[20, 30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60]
  data: {
    type: Array,
    default: [] as Array<number>,
  },
});
/**
 * 配置项
 */
const options = {
  grid: {
    x: "8%",
    y: "8%",
    x2: "12%",
    y2: "12%",
  },
  xAxis: {
    type: "category",
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    boundaryGap: true,
    axisLabel: {
      color: "#09132e",
      interval: (value: number, index: number) => {
        return index % 4 == 0;
      },
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#aaaaaa",
      },
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
  },
  yAxis: {
    type: "value",
    max: 100,
    interval: 10,
    axisLabel: {
      color: "#09132e",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#aaaaaa",
      },
    },
    splitNumber: 10,
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
  },
  series: [
    {
      data: props.data,
      type: "line",
      symbol: "circle",
      symbolSize: 10,
      lineStyle: {
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#ffd223",
              },
              {
                offset: 1,
                color: "#9685fb",
              },
            ],
          },
        },
      },
    },
  ],
  visualMap: {
    type: "continuous",
    min: 0,
    max: 100,
    text: ["HIGH", "LOW"],
    realtime: false,
    calculable: false,
    color: ["#ffd223", "#9685fb"],
    itemWidth: 30,
    right: "5%",
    bottom: "8%",
  },
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(document.getElementById(<string>props.id) as HTMLDivElement);
  chart.setOption(options);
  // 大小自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>