diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..18ed3ed
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,292 @@
+<script lang="ts" setup name="LineChart">
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+import { formatColor, getAlphaColor } from './utils'
+const props = defineProps({
+  // id
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例是否显示
+  legendShow: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例
+  legend: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // 图表宽
+  width: {
+    type: String,
+    default: '100%',
+  },
+  // 图表高
+  height: {
+    type: String,
+    default: '100%',
+  },
+  // X轴数据
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // X轴类型
+  xAxisType: {
+    type: String,
+    default: 'category',
+    validator: (value: string) => {
+      return ['category', 'value', 'time', 'log'].includes(value)
+    },
+  },
+  // 数据
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  // 单位
+  unit: {
+    type: String,
+    default: '',
+  },
+  // 颜色
+  colors: {
+    type: Array,
+    default: () => { return [] },
+  },
+  // 实虚线
+  axisLineType: {
+    type: String,
+    default: '',
+  },
+  // 轴线颜色
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  // 轴线上文字颜色
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 是否为渐变折线图
+  gradient: {
+    type: Boolean,
+    default: true,
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '',
+  },
+  // 平滑
+  smooth: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: lineOption = {
+    grid: {
+      show: false, // 是否显示直角坐标系网格
+      left: 10,
+      right: 30,
+      bottom: 5,
+      top: 30,
+      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
+    }, // 网格
+    legend: {
+      show: props.legendShow,
+      orient: 'horizontal', // 图例方向
+      align: 'left', // 图例标记和文本的对齐，默认自动
+      top: 5,
+      padding: [0, 0, 0, 120],
+      right: 130,
+    }, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        type: props.xAxisType,
+        boundaryGap: true,
+        axisLine: {
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: props.axisLineType,
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: {
+          color: props.fontColor,
+          fontSize: 14,
+          verticalAlign: 'middle',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    series: [] as lineSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legend.length > 0) {
+    option.legend!.data = props.legend
+  }
+  // x轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴
+    }
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: lineSeriesOption[] = []
+    // 遍历data， 拆分轴线名称，数据和颜色
+    for (const itemIndex in props.data) {
+      const item = props.data[itemIndex]
+      const series: lineSeriesOption = {
+        name: item.name, // 线系列名
+        type: 'line',
+        symbol: 'none', // 去掉折线节点
+        smooth: props.smooth, // 曲线平滑设置
+        lineStyle: {
+          width: 2,
+        },
+        data: item.data,
+      }
+      // 线段颜色
+      if (item.color || props.colors.length > 0) {
+        series.itemStyle = {
+          color: item.color ? formatColor(item.color) : formatColor(props.colors[itemIndex] as string),
+        }
+        // 如果开启渐变
+        if (props.gradient) {
+          series.areaStyle = {
+            color: new echarts.graphic.LinearGradient(
+              0, 0, 0, 1, // 变化度 ,渐变方向
+              [
+                {
+                  offset: 0.1,
+                  color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
+                },
+                {
+                  offset: 1,
+                  color: '#fff',
+                },
+              ],
+            ),
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..18ed3ed
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,292 @@
+<script lang="ts" setup name="LineChart">
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+import { formatColor, getAlphaColor } from './utils'
+const props = defineProps({
+  // id
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例是否显示
+  legendShow: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例
+  legend: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // 图表宽
+  width: {
+    type: String,
+    default: '100%',
+  },
+  // 图表高
+  height: {
+    type: String,
+    default: '100%',
+  },
+  // X轴数据
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // X轴类型
+  xAxisType: {
+    type: String,
+    default: 'category',
+    validator: (value: string) => {
+      return ['category', 'value', 'time', 'log'].includes(value)
+    },
+  },
+  // 数据
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  // 单位
+  unit: {
+    type: String,
+    default: '',
+  },
+  // 颜色
+  colors: {
+    type: Array,
+    default: () => { return [] },
+  },
+  // 实虚线
+  axisLineType: {
+    type: String,
+    default: '',
+  },
+  // 轴线颜色
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  // 轴线上文字颜色
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 是否为渐变折线图
+  gradient: {
+    type: Boolean,
+    default: true,
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '',
+  },
+  // 平滑
+  smooth: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: lineOption = {
+    grid: {
+      show: false, // 是否显示直角坐标系网格
+      left: 10,
+      right: 30,
+      bottom: 5,
+      top: 30,
+      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
+    }, // 网格
+    legend: {
+      show: props.legendShow,
+      orient: 'horizontal', // 图例方向
+      align: 'left', // 图例标记和文本的对齐，默认自动
+      top: 5,
+      padding: [0, 0, 0, 120],
+      right: 130,
+    }, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        type: props.xAxisType,
+        boundaryGap: true,
+        axisLine: {
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: props.axisLineType,
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: {
+          color: props.fontColor,
+          fontSize: 14,
+          verticalAlign: 'middle',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    series: [] as lineSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legend.length > 0) {
+    option.legend!.data = props.legend
+  }
+  // x轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴
+    }
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: lineSeriesOption[] = []
+    // 遍历data， 拆分轴线名称，数据和颜色
+    for (const itemIndex in props.data) {
+      const item = props.data[itemIndex]
+      const series: lineSeriesOption = {
+        name: item.name, // 线系列名
+        type: 'line',
+        symbol: 'none', // 去掉折线节点
+        smooth: props.smooth, // 曲线平滑设置
+        lineStyle: {
+          width: 2,
+        },
+        data: item.data,
+      }
+      // 线段颜色
+      if (item.color || props.colors.length > 0) {
+        series.itemStyle = {
+          color: item.color ? formatColor(item.color) : formatColor(props.colors[itemIndex] as string),
+        }
+        // 如果开启渐变
+        if (props.gradient) {
+          series.areaStyle = {
+            color: new echarts.graphic.LinearGradient(
+              0, 0, 0, 1, // 变化度 ,渐变方向
+              [
+                {
+                  offset: 0.1,
+                  color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
+                },
+                {
+                  offset: 1,
+                  color: '#fff',
+                },
+              ],
+            ),
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
new file mode 100644
index 0000000..3b8fa41
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,169 @@
+import type { LinearGradientObject } from 'echarts'
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+// 标题配置
+export interface titleOption {
+  title?: {
+    show?: boolean // 是否显示标题
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    text: string // 标题
+  }
+}
+
+// 网格配置
+export interface gridOption {
+  grid?: {
+    show?: boolean // 是否显示直角坐标系网格
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    containLabel?: boolean // grid区域是否包含坐标轴的刻度标签
+  }
+}
+// 图例
+export interface legendOption {
+  legend?: {
+    show?: boolean
+    orient?: string // 图例方向
+    align?: string // 图例标记和文本的对齐，默认自动
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    padding?: number | [number, number] | [number, number, number, number] // 内边距
+    data?: string[]
+  }
+}
+// 提示框
+export interface tooltipOption {
+  tooltip: {
+    show?: boolean
+    trigger: 'axis' | 'item' | 'none' // 触发类型
+    textStyle: { // 浮层的文本样式
+      color?: string // 文字颜色，默认白色
+      fontSize?: number // 文字大小， 默认14
+    }
+    axisPointer: { // 坐标轴指示器
+      type: 'cross' | 'line' | 'shadow' | 'none'
+      label: {
+        show?: boolean // axisPointer为cross时默认显示，其他默认不显示
+        fontSize?: number // 文字大小，默认14
+      }
+    }
+    valueFormatter: (value: number | string) => string // 数值显示部分格式化回调函数
+  }
+}
+
+// x轴
+export interface xAxisOption {
+  type: string // 'category' | 'value' | 'time' | 'log'
+  name?: string
+  boundaryGap?: boolean | string[]
+  data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  axisLine?: { // 坐标轴线
+    show?: boolean
+    lineStyle?: {
+      color?: string // 轴线的颜色
+      width?: number // 轴线宽度，默认1
+    }
+  }
+  nameTextStyle?: { // 坐标轴名称的文字样式。
+    color?: string
+    fontSize?: number // 默认12
+    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
+  }
+  axisLabel?: { // 坐标轴刻度标签
+    color?: string // X轴名称颜色
+    fontSize?: number //
+  }
+  splitLine: { // 坐标轴在 grid 区域中的分隔线
+    show: boolean
+    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
+    lineStyle?: {
+      color?: string | Array<string>
+      type?: string // 'dashed' | 'solid' | 'dotted'
+      shadowBlur?: number // 图形阴影的模糊大小
+      shadowColor?: string // 阴影颜色
+      shadowOffsetX?: number // 阴影水平方向的偏移距离
+      shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    }
+    opacity?: number // 透明度，默认1
+  }
+}
+
+// Y轴
+export interface yAxisOption {
+  type: string // 'category' | 'value' | 'time' | 'log'
+  name?: string
+  boundaryGap?: boolean | string[]
+  data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  axisLine?: { // 坐标轴线
+    show?: boolean
+    lineStyle?: {
+      color?: string // 轴线的颜色
+      width?: number // 轴线宽度，默认1
+    }
+  }
+  nameTextStyle?: { // 坐标轴名称的文字样式。
+    color?: string
+    fontSize?: number // 默认12
+    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
+  }
+  axisLabel?: { // 坐标轴刻度标签
+    color?: string // X轴名称颜色
+    fontSize?: number //
+  }
+  splitLine: { // 坐标轴在 grid 区域中的分隔线
+    show?: boolean
+    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
+    lineStyle: {
+      color?: string | Array<string>
+      type?: string // 'dashed' | 'solid' | 'dotted'
+      shadowBlur?: number // 图形阴影的模糊大小
+      shadowColor?: string // 阴影颜色
+      shadowOffsetX?: number // 阴影水平方向的偏移距离
+      shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    }
+    opacity?: number // 透明度，默认1
+  }
+}
+
+export interface lineSeriesOption {
+  name?: string // 系列名称
+  type: 'line'
+  symbol?: string | Function // 标记的图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+  smooth?: boolean // 曲线平滑设置, 默认false
+  itemStyle?: { // 折线拐点样式
+    color?: string // 图形的颜色
+    borderColor?: string // 图形的描边颜色
+    borderWidth?: number // 描边线宽。默认0，无描边。
+    shadowBlur?: number // 图形阴影的模糊大小
+    shadowColor?: string // 阴影颜色
+    shadowOffsetX?: number // 阴影水平方向的偏移距离
+    shadowOffsetY?: number // 阴影垂直方向的偏移距离
+  }
+  lineStyle?: { // 线条样式
+    width: number // 线条宽度，默认2
+    color?: string // 线条颜色， 默认#000
+    type?: 'solid' | 'dashed' | 'dotted' // 默认solid
+  }
+  areaStyle?: { // 区域填充样式
+    color?: string | LinearGradientObject // 填充颜色
+  }
+  data: number[] | string[]
+}
+
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..18ed3ed
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,292 @@
+<script lang="ts" setup name="LineChart">
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+import { formatColor, getAlphaColor } from './utils'
+const props = defineProps({
+  // id
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例是否显示
+  legendShow: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例
+  legend: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // 图表宽
+  width: {
+    type: String,
+    default: '100%',
+  },
+  // 图表高
+  height: {
+    type: String,
+    default: '100%',
+  },
+  // X轴数据
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // X轴类型
+  xAxisType: {
+    type: String,
+    default: 'category',
+    validator: (value: string) => {
+      return ['category', 'value', 'time', 'log'].includes(value)
+    },
+  },
+  // 数据
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  // 单位
+  unit: {
+    type: String,
+    default: '',
+  },
+  // 颜色
+  colors: {
+    type: Array,
+    default: () => { return [] },
+  },
+  // 实虚线
+  axisLineType: {
+    type: String,
+    default: '',
+  },
+  // 轴线颜色
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  // 轴线上文字颜色
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 是否为渐变折线图
+  gradient: {
+    type: Boolean,
+    default: true,
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '',
+  },
+  // 平滑
+  smooth: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: lineOption = {
+    grid: {
+      show: false, // 是否显示直角坐标系网格
+      left: 10,
+      right: 30,
+      bottom: 5,
+      top: 30,
+      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
+    }, // 网格
+    legend: {
+      show: props.legendShow,
+      orient: 'horizontal', // 图例方向
+      align: 'left', // 图例标记和文本的对齐，默认自动
+      top: 5,
+      padding: [0, 0, 0, 120],
+      right: 130,
+    }, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        type: props.xAxisType,
+        boundaryGap: true,
+        axisLine: {
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: props.axisLineType,
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: {
+          color: props.fontColor,
+          fontSize: 14,
+          verticalAlign: 'middle',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    series: [] as lineSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legend.length > 0) {
+    option.legend!.data = props.legend
+  }
+  // x轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴
+    }
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: lineSeriesOption[] = []
+    // 遍历data， 拆分轴线名称，数据和颜色
+    for (const itemIndex in props.data) {
+      const item = props.data[itemIndex]
+      const series: lineSeriesOption = {
+        name: item.name, // 线系列名
+        type: 'line',
+        symbol: 'none', // 去掉折线节点
+        smooth: props.smooth, // 曲线平滑设置
+        lineStyle: {
+          width: 2,
+        },
+        data: item.data,
+      }
+      // 线段颜色
+      if (item.color || props.colors.length > 0) {
+        series.itemStyle = {
+          color: item.color ? formatColor(item.color) : formatColor(props.colors[itemIndex] as string),
+        }
+        // 如果开启渐变
+        if (props.gradient) {
+          series.areaStyle = {
+            color: new echarts.graphic.LinearGradient(
+              0, 0, 0, 1, // 变化度 ,渐变方向
+              [
+                {
+                  offset: 0.1,
+                  color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
+                },
+                {
+                  offset: 1,
+                  color: '#fff',
+                },
+              ],
+            ),
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
new file mode 100644
index 0000000..3b8fa41
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,169 @@
+import type { LinearGradientObject } from 'echarts'
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+// 标题配置
+export interface titleOption {
+  title?: {
+    show?: boolean // 是否显示标题
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    text: string // 标题
+  }
+}
+
+// 网格配置
+export interface gridOption {
+  grid?: {
+    show?: boolean // 是否显示直角坐标系网格
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    containLabel?: boolean // grid区域是否包含坐标轴的刻度标签
+  }
+}
+// 图例
+export interface legendOption {
+  legend?: {
+    show?: boolean
+    orient?: string // 图例方向
+    align?: string // 图例标记和文本的对齐，默认自动
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    padding?: number | [number, number] | [number, number, number, number] // 内边距
+    data?: string[]
+  }
+}
+// 提示框
+export interface tooltipOption {
+  tooltip: {
+    show?: boolean
+    trigger: 'axis' | 'item' | 'none' // 触发类型
+    textStyle: { // 浮层的文本样式
+      color?: string // 文字颜色，默认白色
+      fontSize?: number // 文字大小， 默认14
+    }
+    axisPointer: { // 坐标轴指示器
+      type: 'cross' | 'line' | 'shadow' | 'none'
+      label: {
+        show?: boolean // axisPointer为cross时默认显示，其他默认不显示
+        fontSize?: number // 文字大小，默认14
+      }
+    }
+    valueFormatter: (value: number | string) => string // 数值显示部分格式化回调函数
+  }
+}
+
+// x轴
+export interface xAxisOption {
+  type: string // 'category' | 'value' | 'time' | 'log'
+  name?: string
+  boundaryGap?: boolean | string[]
+  data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  axisLine?: { // 坐标轴线
+    show?: boolean
+    lineStyle?: {
+      color?: string // 轴线的颜色
+      width?: number // 轴线宽度，默认1
+    }
+  }
+  nameTextStyle?: { // 坐标轴名称的文字样式。
+    color?: string
+    fontSize?: number // 默认12
+    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
+  }
+  axisLabel?: { // 坐标轴刻度标签
+    color?: string // X轴名称颜色
+    fontSize?: number //
+  }
+  splitLine: { // 坐标轴在 grid 区域中的分隔线
+    show: boolean
+    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
+    lineStyle?: {
+      color?: string | Array<string>
+      type?: string // 'dashed' | 'solid' | 'dotted'
+      shadowBlur?: number // 图形阴影的模糊大小
+      shadowColor?: string // 阴影颜色
+      shadowOffsetX?: number // 阴影水平方向的偏移距离
+      shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    }
+    opacity?: number // 透明度，默认1
+  }
+}
+
+// Y轴
+export interface yAxisOption {
+  type: string // 'category' | 'value' | 'time' | 'log'
+  name?: string
+  boundaryGap?: boolean | string[]
+  data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  axisLine?: { // 坐标轴线
+    show?: boolean
+    lineStyle?: {
+      color?: string // 轴线的颜色
+      width?: number // 轴线宽度，默认1
+    }
+  }
+  nameTextStyle?: { // 坐标轴名称的文字样式。
+    color?: string
+    fontSize?: number // 默认12
+    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
+  }
+  axisLabel?: { // 坐标轴刻度标签
+    color?: string // X轴名称颜色
+    fontSize?: number //
+  }
+  splitLine: { // 坐标轴在 grid 区域中的分隔线
+    show?: boolean
+    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
+    lineStyle: {
+      color?: string | Array<string>
+      type?: string // 'dashed' | 'solid' | 'dotted'
+      shadowBlur?: number // 图形阴影的模糊大小
+      shadowColor?: string // 阴影颜色
+      shadowOffsetX?: number // 阴影水平方向的偏移距离
+      shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    }
+    opacity?: number // 透明度，默认1
+  }
+}
+
+export interface lineSeriesOption {
+  name?: string // 系列名称
+  type: 'line'
+  symbol?: string | Function // 标记的图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+  smooth?: boolean // 曲线平滑设置, 默认false
+  itemStyle?: { // 折线拐点样式
+    color?: string // 图形的颜色
+    borderColor?: string // 图形的描边颜色
+    borderWidth?: number // 描边线宽。默认0，无描边。
+    shadowBlur?: number // 图形阴影的模糊大小
+    shadowColor?: string // 阴影颜色
+    shadowOffsetX?: number // 阴影水平方向的偏移距离
+    shadowOffsetY?: number // 阴影垂直方向的偏移距离
+  }
+  lineStyle?: { // 线条样式
+    width: number // 线条宽度，默认2
+    color?: string // 线条颜色， 默认#000
+    type?: 'solid' | 'dashed' | 'dotted' // 默认solid
+  }
+  areaStyle?: { // 区域填充样式
+    color?: string | LinearGradientObject // 填充颜色
+  }
+  data: number[] | string[]
+}
+
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+
diff --git a/src/components/Echart/index.vue b/src/components/Echart/index.vue
deleted file mode 100644
index 9efe188..0000000
--- a/src/components/Echart/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts" setup name="Echart">
-import type { Ref } from 'vue'
-import { onMounted, ref } from 'vue'
-import type { ECharts } from 'echarts'
-import { EChartsOption, init } from 'echarts'
-import tdTheme from './theme.json' // 引入默认主题
-const props = defineProps({
-  className: {
-    type: String,
-    default: 'chart',
-  },
-  id: {
-    type: String,
-    default: 'chart',
-  },
-  width: {
-    type: String,
-    default: '100%',
-  },
-  height: {
-    type: String,
-    default: '100%',
-  },
-  options: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-
-// 图表对象
-let chart: ECharts
-const chartRef: Ref<HTMLElement | null> = ref(null)
-
-watch(props.options, (newVal) => {
-  chart.setOption(newVal, true)
-}, { deep: true })
-
-// 初始化
-function initChart() {
-  chart.setOption(props.options, true)
-}
-
-onMounted(() => {
-  chart = init(chartRef.value as HTMLElement, tdTheme)
-  initChart()
-})
-</script>
-
-<template>
-  <div :id="id" ref="chartRef" :class="className" :style="{ height, width }" />
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..18ed3ed
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,292 @@
+<script lang="ts" setup name="LineChart">
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+import { formatColor, getAlphaColor } from './utils'
+const props = defineProps({
+  // id
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例是否显示
+  legendShow: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例
+  legend: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // 图表宽
+  width: {
+    type: String,
+    default: '100%',
+  },
+  // 图表高
+  height: {
+    type: String,
+    default: '100%',
+  },
+  // X轴数据
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // X轴类型
+  xAxisType: {
+    type: String,
+    default: 'category',
+    validator: (value: string) => {
+      return ['category', 'value', 'time', 'log'].includes(value)
+    },
+  },
+  // 数据
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  // 单位
+  unit: {
+    type: String,
+    default: '',
+  },
+  // 颜色
+  colors: {
+    type: Array,
+    default: () => { return [] },
+  },
+  // 实虚线
+  axisLineType: {
+    type: String,
+    default: '',
+  },
+  // 轴线颜色
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  // 轴线上文字颜色
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 是否为渐变折线图
+  gradient: {
+    type: Boolean,
+    default: true,
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '',
+  },
+  // 平滑
+  smooth: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: lineOption = {
+    grid: {
+      show: false, // 是否显示直角坐标系网格
+      left: 10,
+      right: 30,
+      bottom: 5,
+      top: 30,
+      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
+    }, // 网格
+    legend: {
+      show: props.legendShow,
+      orient: 'horizontal', // 图例方向
+      align: 'left', // 图例标记和文本的对齐，默认自动
+      top: 5,
+      padding: [0, 0, 0, 120],
+      right: 130,
+    }, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        type: props.xAxisType,
+        boundaryGap: true,
+        axisLine: {
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: props.axisLineType,
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: {
+          color: props.fontColor,
+          fontSize: 14,
+          verticalAlign: 'middle',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    series: [] as lineSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legend.length > 0) {
+    option.legend!.data = props.legend
+  }
+  // x轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴
+    }
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: lineSeriesOption[] = []
+    // 遍历data， 拆分轴线名称，数据和颜色
+    for (const itemIndex in props.data) {
+      const item = props.data[itemIndex]
+      const series: lineSeriesOption = {
+        name: item.name, // 线系列名
+        type: 'line',
+        symbol: 'none', // 去掉折线节点
+        smooth: props.smooth, // 曲线平滑设置
+        lineStyle: {
+          width: 2,
+        },
+        data: item.data,
+      }
+      // 线段颜色
+      if (item.color || props.colors.length > 0) {
+        series.itemStyle = {
+          color: item.color ? formatColor(item.color) : formatColor(props.colors[itemIndex] as string),
+        }
+        // 如果开启渐变
+        if (props.gradient) {
+          series.areaStyle = {
+            color: new echarts.graphic.LinearGradient(
+              0, 0, 0, 1, // 变化度 ,渐变方向
+              [
+                {
+                  offset: 0.1,
+                  color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
+                },
+                {
+                  offset: 1,
+                  color: '#fff',
+                },
+              ],
+            ),
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
new file mode 100644
index 0000000..3b8fa41
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,169 @@
+import type { LinearGradientObject } from 'echarts'
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+// 标题配置
+export interface titleOption {
+  title?: {
+    show?: boolean // 是否显示标题
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    text: string // 标题
+  }
+}
+
+// 网格配置
+export interface gridOption {
+  grid?: {
+    show?: boolean // 是否显示直角坐标系网格
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    containLabel?: boolean // grid区域是否包含坐标轴的刻度标签
+  }
+}
+// 图例
+export interface legendOption {
+  legend?: {
+    show?: boolean
+    orient?: string // 图例方向
+    align?: string // 图例标记和文本的对齐，默认自动
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    padding?: number | [number, number] | [number, number, number, number] // 内边距
+    data?: string[]
+  }
+}
+// 提示框
+export interface tooltipOption {
+  tooltip: {
+    show?: boolean
+    trigger: 'axis' | 'item' | 'none' // 触发类型
+    textStyle: { // 浮层的文本样式
+      color?: string // 文字颜色，默认白色
+      fontSize?: number // 文字大小， 默认14
+    }
+    axisPointer: { // 坐标轴指示器
+      type: 'cross' | 'line' | 'shadow' | 'none'
+      label: {
+        show?: boolean // axisPointer为cross时默认显示，其他默认不显示
+        fontSize?: number // 文字大小，默认14
+      }
+    }
+    valueFormatter: (value: number | string) => string // 数值显示部分格式化回调函数
+  }
+}
+
+// x轴
+export interface xAxisOption {
+  type: string // 'category' | 'value' | 'time' | 'log'
+  name?: string
+  boundaryGap?: boolean | string[]
+  data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  axisLine?: { // 坐标轴线
+    show?: boolean
+    lineStyle?: {
+      color?: string // 轴线的颜色
+      width?: number // 轴线宽度，默认1
+    }
+  }
+  nameTextStyle?: { // 坐标轴名称的文字样式。
+    color?: string
+    fontSize?: number // 默认12
+    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
+  }
+  axisLabel?: { // 坐标轴刻度标签
+    color?: string // X轴名称颜色
+    fontSize?: number //
+  }
+  splitLine: { // 坐标轴在 grid 区域中的分隔线
+    show: boolean
+    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
+    lineStyle?: {
+      color?: string | Array<string>
+      type?: string // 'dashed' | 'solid' | 'dotted'
+      shadowBlur?: number // 图形阴影的模糊大小
+      shadowColor?: string // 阴影颜色
+      shadowOffsetX?: number // 阴影水平方向的偏移距离
+      shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    }
+    opacity?: number // 透明度，默认1
+  }
+}
+
+// Y轴
+export interface yAxisOption {
+  type: string // 'category' | 'value' | 'time' | 'log'
+  name?: string
+  boundaryGap?: boolean | string[]
+  data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  axisLine?: { // 坐标轴线
+    show?: boolean
+    lineStyle?: {
+      color?: string // 轴线的颜色
+      width?: number // 轴线宽度，默认1
+    }
+  }
+  nameTextStyle?: { // 坐标轴名称的文字样式。
+    color?: string
+    fontSize?: number // 默认12
+    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
+  }
+  axisLabel?: { // 坐标轴刻度标签
+    color?: string // X轴名称颜色
+    fontSize?: number //
+  }
+  splitLine: { // 坐标轴在 grid 区域中的分隔线
+    show?: boolean
+    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
+    lineStyle: {
+      color?: string | Array<string>
+      type?: string // 'dashed' | 'solid' | 'dotted'
+      shadowBlur?: number // 图形阴影的模糊大小
+      shadowColor?: string // 阴影颜色
+      shadowOffsetX?: number // 阴影水平方向的偏移距离
+      shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    }
+    opacity?: number // 透明度，默认1
+  }
+}
+
+export interface lineSeriesOption {
+  name?: string // 系列名称
+  type: 'line'
+  symbol?: string | Function // 标记的图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+  smooth?: boolean // 曲线平滑设置, 默认false
+  itemStyle?: { // 折线拐点样式
+    color?: string // 图形的颜色
+    borderColor?: string // 图形的描边颜色
+    borderWidth?: number // 描边线宽。默认0，无描边。
+    shadowBlur?: number // 图形阴影的模糊大小
+    shadowColor?: string // 阴影颜色
+    shadowOffsetX?: number // 阴影水平方向的偏移距离
+    shadowOffsetY?: number // 阴影垂直方向的偏移距离
+  }
+  lineStyle?: { // 线条样式
+    width: number // 线条宽度，默认2
+    color?: string // 线条颜色， 默认#000
+    type?: 'solid' | 'dashed' | 'dotted' // 默认solid
+  }
+  areaStyle?: { // 区域填充样式
+    color?: string | LinearGradientObject // 填充颜色
+  }
+  data: number[] | string[]
+}
+
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+
diff --git a/src/components/Echart/index.vue b/src/components/Echart/index.vue
deleted file mode 100644
index 9efe188..0000000
--- a/src/components/Echart/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts" setup name="Echart">
-import type { Ref } from 'vue'
-import { onMounted, ref } from 'vue'
-import type { ECharts } from 'echarts'
-import { EChartsOption, init } from 'echarts'
-import tdTheme from './theme.json' // 引入默认主题
-const props = defineProps({
-  className: {
-    type: String,
-    default: 'chart',
-  },
-  id: {
-    type: String,
-    default: 'chart',
-  },
-  width: {
-    type: String,
-    default: '100%',
-  },
-  height: {
-    type: String,
-    default: '100%',
-  },
-  options: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-
-// 图表对象
-let chart: ECharts
-const chartRef: Ref<HTMLElement | null> = ref(null)
-
-watch(props.options, (newVal) => {
-  chart.setOption(newVal, true)
-}, { deep: true })
-
-// 初始化
-function initChart() {
-  chart.setOption(props.options, true)
-}
-
-onMounted(() => {
-  chart = init(chartRef.value as HTMLElement, tdTheme)
-  initChart()
-})
-</script>
-
-<template>
-  <div :id="id" ref="chartRef" :class="className" :style="{ height, width }" />
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/components/Echart/theme.json b/src/components/Echart/theme.json
index 58a1f46..9488751 100644
--- a/src/components/Echart/theme.json
+++ b/src/components/Echart/theme.json
@@ -255,7 +255,7 @@
     "axisLabel": {
       "show": true,
       "textStyle": {
-        "color": "#fff"
+        "color": "#222"
       }
     },
     "splitLine": {
@@ -292,7 +292,7 @@
     "axisLabel": {
       "show": true,
       "textStyle": {
-        "color": "#fff"
+        "color": "#333"
       }
     },
     "splitLine": {

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..18ed3ed
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,292 @@
+<script lang="ts" setup name="LineChart">
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { lineDataI, lineOption, lineSeriesOption } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+import { formatColor, getAlphaColor } from './utils'
+const props = defineProps({
+  // id
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例是否显示
+  legendShow: {
+    type: Boolean,
+    default: false,
+  },
+  // 图例
+  legend: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // 图表宽
+  width: {
+    type: String,
+    default: '100%',
+  },
+  // 图表高
+  height: {
+    type: String,
+    default: '100%',
+  },
+  // X轴数据
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  // X轴类型
+  xAxisType: {
+    type: String,
+    default: 'category',
+    validator: (value: string) => {
+      return ['category', 'value', 'time', 'log'].includes(value)
+    },
+  },
+  // 数据
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  // 单位
+  unit: {
+    type: String,
+    default: '',
+  },
+  // 颜色
+  colors: {
+    type: Array,
+    default: () => { return [] },
+  },
+  // 实虚线
+  axisLineType: {
+    type: String,
+    default: '',
+  },
+  // 轴线颜色
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  // 轴线上文字颜色
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 是否为渐变折线图
+  gradient: {
+    type: Boolean,
+    default: true,
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '',
+  },
+  // 平滑
+  smooth: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: lineOption = {
+    grid: {
+      show: false, // 是否显示直角坐标系网格
+      left: 10,
+      right: 30,
+      bottom: 5,
+      top: 30,
+      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
+    }, // 网格
+    legend: {
+      show: props.legendShow,
+      orient: 'horizontal', // 图例方向
+      align: 'left', // 图例标记和文本的对齐，默认自动
+      top: 5,
+      padding: [0, 0, 0, 120],
+      right: 130,
+    }, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        type: props.xAxisType,
+        boundaryGap: true,
+        axisLine: {
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: props.axisLineType,
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: {
+          color: props.fontColor,
+          fontSize: 14,
+          verticalAlign: 'middle',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    series: [] as lineSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legend.length > 0) {
+    option.legend!.data = props.legend
+  }
+  // x轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴
+    }
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: lineSeriesOption[] = []
+    // 遍历data， 拆分轴线名称，数据和颜色
+    for (const itemIndex in props.data) {
+      const item = props.data[itemIndex]
+      const series: lineSeriesOption = {
+        name: item.name, // 线系列名
+        type: 'line',
+        symbol: 'none', // 去掉折线节点
+        smooth: props.smooth, // 曲线平滑设置
+        lineStyle: {
+          width: 2,
+        },
+        data: item.data,
+      }
+      // 线段颜色
+      if (item.color || props.colors.length > 0) {
+        series.itemStyle = {
+          color: item.color ? formatColor(item.color) : formatColor(props.colors[itemIndex] as string),
+        }
+        // 如果开启渐变
+        if (props.gradient) {
+          series.areaStyle = {
+            color: new echarts.graphic.LinearGradient(
+              0, 0, 0, 1, // 变化度 ,渐变方向
+              [
+                {
+                  offset: 0.1,
+                  color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
+                },
+                {
+                  offset: 1,
+                  color: '#fff',
+                },
+              ],
+            ),
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
new file mode 100644
index 0000000..3b8fa41
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,169 @@
+import type { LinearGradientObject } from 'echarts'
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+// 标题配置
+export interface titleOption {
+  title?: {
+    show?: boolean // 是否显示标题
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    text: string // 标题
+  }
+}
+
+// 网格配置
+export interface gridOption {
+  grid?: {
+    show?: boolean // 是否显示直角坐标系网格
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    containLabel?: boolean // grid区域是否包含坐标轴的刻度标签
+  }
+}
+// 图例
+export interface legendOption {
+  legend?: {
+    show?: boolean
+    orient?: string // 图例方向
+    align?: string // 图例标记和文本的对齐，默认自动
+    left?: number | string // 上边距
+    right?: number | string // 右边距
+    bottom?: number | string // 下边距
+    top?: number | string // 顶部边距
+    padding?: number | [number, number] | [number, number, number, number] // 内边距
+    data?: string[]
+  }
+}
+// 提示框
+export interface tooltipOption {
+  tooltip: {
+    show?: boolean
+    trigger: 'axis' | 'item' | 'none' // 触发类型
+    textStyle: { // 浮层的文本样式
+      color?: string // 文字颜色，默认白色
+      fontSize?: number // 文字大小， 默认14
+    }
+    axisPointer: { // 坐标轴指示器
+      type: 'cross' | 'line' | 'shadow' | 'none'
+      label: {
+        show?: boolean // axisPointer为cross时默认显示，其他默认不显示
+        fontSize?: number // 文字大小，默认14
+      }
+    }
+    valueFormatter: (value: number | string) => string // 数值显示部分格式化回调函数
+  }
+}
+
+// x轴
+export interface xAxisOption {
+  type: string // 'category' | 'value' | 'time' | 'log'
+  name?: string
+  boundaryGap?: boolean | string[]
+  data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  axisLine?: { // 坐标轴线
+    show?: boolean
+    lineStyle?: {
+      color?: string // 轴线的颜色
+      width?: number // 轴线宽度，默认1
+    }
+  }
+  nameTextStyle?: { // 坐标轴名称的文字样式。
+    color?: string
+    fontSize?: number // 默认12
+    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
+  }
+  axisLabel?: { // 坐标轴刻度标签
+    color?: string // X轴名称颜色
+    fontSize?: number //
+  }
+  splitLine: { // 坐标轴在 grid 区域中的分隔线
+    show: boolean
+    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
+    lineStyle?: {
+      color?: string | Array<string>
+      type?: string // 'dashed' | 'solid' | 'dotted'
+      shadowBlur?: number // 图形阴影的模糊大小
+      shadowColor?: string // 阴影颜色
+      shadowOffsetX?: number // 阴影水平方向的偏移距离
+      shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    }
+    opacity?: number // 透明度，默认1
+  }
+}
+
+// Y轴
+export interface yAxisOption {
+  type: string // 'category' | 'value' | 'time' | 'log'
+  name?: string
+  boundaryGap?: boolean | string[]
+  data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  axisLine?: { // 坐标轴线
+    show?: boolean
+    lineStyle?: {
+      color?: string // 轴线的颜色
+      width?: number // 轴线宽度，默认1
+    }
+  }
+  nameTextStyle?: { // 坐标轴名称的文字样式。
+    color?: string
+    fontSize?: number // 默认12
+    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
+  }
+  axisLabel?: { // 坐标轴刻度标签
+    color?: string // X轴名称颜色
+    fontSize?: number //
+  }
+  splitLine: { // 坐标轴在 grid 区域中的分隔线
+    show?: boolean
+    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
+    lineStyle: {
+      color?: string | Array<string>
+      type?: string // 'dashed' | 'solid' | 'dotted'
+      shadowBlur?: number // 图形阴影的模糊大小
+      shadowColor?: string // 阴影颜色
+      shadowOffsetX?: number // 阴影水平方向的偏移距离
+      shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    }
+    opacity?: number // 透明度，默认1
+  }
+}
+
+export interface lineSeriesOption {
+  name?: string // 系列名称
+  type: 'line'
+  symbol?: string | Function // 标记的图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+  smooth?: boolean // 曲线平滑设置, 默认false
+  itemStyle?: { // 折线拐点样式
+    color?: string // 图形的颜色
+    borderColor?: string // 图形的描边颜色
+    borderWidth?: number // 描边线宽。默认0，无描边。
+    shadowBlur?: number // 图形阴影的模糊大小
+    shadowColor?: string // 阴影颜色
+    shadowOffsetX?: number // 阴影水平方向的偏移距离
+    shadowOffsetY?: number // 阴影垂直方向的偏移距离
+  }
+  lineStyle?: { // 线条样式
+    width: number // 线条宽度，默认2
+    color?: string // 线条颜色， 默认#000
+    type?: 'solid' | 'dashed' | 'dotted' // 默认solid
+  }
+  areaStyle?: { // 区域填充样式
+    color?: string | LinearGradientObject // 填充颜色
+  }
+  data: number[] | string[]
+}
+
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+
diff --git a/src/components/Echart/index.vue b/src/components/Echart/index.vue
deleted file mode 100644
index 9efe188..0000000
--- a/src/components/Echart/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts" setup name="Echart">
-import type { Ref } from 'vue'
-import { onMounted, ref } from 'vue'
-import type { ECharts } from 'echarts'
-import { EChartsOption, init } from 'echarts'
-import tdTheme from './theme.json' // 引入默认主题
-const props = defineProps({
-  className: {
-    type: String,
-    default: 'chart',
-  },
-  id: {
-    type: String,
-    default: 'chart',
-  },
-  width: {
-    type: String,
-    default: '100%',
-  },
-  height: {
-    type: String,
-    default: '100%',
-  },
-  options: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-
-// 图表对象
-let chart: ECharts
-const chartRef: Ref<HTMLElement | null> = ref(null)
-
-watch(props.options, (newVal) => {
-  chart.setOption(newVal, true)
-}, { deep: true })
-
-// 初始化
-function initChart() {
-  chart.setOption(props.options, true)
-}
-
-onMounted(() => {
-  chart = init(chartRef.value as HTMLElement, tdTheme)
-  initChart()
-})
-</script>
-
-<template>
-  <div :id="id" ref="chartRef" :class="className" :style="{ height, width }" />
-</template>
-
-<style lang="scss" scoped>
-// 样式
-</style>
diff --git a/src/components/Echart/theme.json b/src/components/Echart/theme.json
index 58a1f46..9488751 100644
--- a/src/components/Echart/theme.json
+++ b/src/components/Echart/theme.json
@@ -255,7 +255,7 @@
     "axisLabel": {
       "show": true,
       "textStyle": {
-        "color": "#fff"
+        "color": "#222"
       }
     },
     "splitLine": {
@@ -292,7 +292,7 @@
     "axisLabel": {
       "show": true,
       "textStyle": {
-        "color": "#fff"
+        "color": "#333"
       }
     },
     "splitLine": {
diff --git a/src/components/Echart/utils.ts b/src/components/Echart/utils.ts
new file mode 100644
index 0000000..0acd088
--- /dev/null
+++ b/src/components/Echart/utils.ts
@@ -0,0 +1,38 @@
+/**
+ * 格式化颜色
+ * @param value 颜色值 #aaa格式或rgb格式
+ * @returns 颜色值
+ */
+export function formatColor(value: string): string {
+  const rgbReg = /((2[0-4]\\d|25[0-5]|[01]?[0-9]?[0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[0-1]?[0-9]?[0-9])$/
+  if (value.startsWith('#')) { // #号开头的颜色值
+    return value
+  }
+  else if (rgbReg.test(value)) { // 数字开头的颜色值
+    return `rgb(${value})`
+  }
+  else {
+    return ''
+  }
+}
+
+/**
+ * 获取某颜色的透明度颜色
+ * @param color 颜色
+ * @param alpha 透明度
+ * @returns 透明度颜色
+ */
+export function getAlphaColor(color: string, alpha: number): string {
+  const rgbReg = /((2[0-4]\\d|25[0-5]|[01]?[0-9]?[0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[0-1]?[0-9]?[0-9])$/
+  if (color.startsWith('#')) { // #号开头的颜色值
+    let alpha2 = Math.floor(alpha * 255)
+    alpha2 = alpha > 255 ? 255 : alpha2
+    return color + alpha2.toString(16) // 转换为16进制
+  }
+  else if (rgbReg.test(color)) { // 数字开头的颜色值
+    return `rgba(${color}, ${alpha})`
+  }
+  else {
+    return ''
+  }
+}