diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..3fec782
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,350 @@
+<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,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 10,
+        right: 20,
+        bottom: 5,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 0,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    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)
+    },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        '#2d8cf0',
+        '#19be6b',
+        '#ff9900',
+        '#E46CBB',
+        '#9A66E4',
+        '#ed3f14',
+        '#01C2F9',
+      ]
+    },
+  },
+  /**
+   * 实虚线
+   */
+  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: props.grid,
+    legend: props.legend, // 图例
+    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.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 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..3fec782
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,350 @@
+<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,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 10,
+        right: 20,
+        bottom: 5,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 0,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    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)
+    },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        '#2d8cf0',
+        '#19be6b',
+        '#ff9900',
+        '#E46CBB',
+        '#9A66E4',
+        '#ed3f14',
+        '#01C2F9',
+      ]
+    },
+  },
+  /**
+   * 实虚线
+   */
+  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: props.grid,
+    legend: props.legend, // 图例
+    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.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 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/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..032ee81
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup name="PieChart">
+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 { Grid } from '@element-plus/icons-vue'
+import type { lineSeriesOption, pieDataI, pieOption, pieSeriesOption } 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,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 图例是否显示
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: false,
+        orient: 'vertical',
+        right: '20%',
+        top: 'center',
+        icon: 'circle',
+        itemWidth: 12,
+        itemHeight: 12,
+        itemStyle: {
+          fontSize: 18,
+        },
+      }
+    },
+  },
+  /**
+   * 文本标签是否显示
+   */
+  labelShow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 饼图的半径[内半径，外半径]
+   */
+  radius: {
+    type: Array,
+    default: () => {
+      return ['30%', '45%']
+    },
+  },
+  /**
+   * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+   */
+  roseType: {
+    type: [String, Boolean],
+    default: false,
+  },
+  /**
+   * 显示值类型：percentage百分比|value数值
+   */
+  valueType: {
+    type: String,
+    default: 'percentage',
+  },
+  /**
+   * 数据，格式为 [{name:'xxx'，value:0},...]
+   */
+  data: {
+    type: Array<pieDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => { return ['#3d7eff', '#caddff'] },
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: '10%',
+        left: '5%',
+        right: '5%',
+        bottom: 20,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 标签文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 标签位置, outside饼图扇区外侧， inside饼图扇区内部， center饼图中心位置
+   */
+  labelPosition: {
+    type: String,
+    default: 'center',
+  },
+  /**
+   * 悬停格式化
+   */
+  hoverFormatter: {
+    type: String,
+    default: '{b}<br/>数量:{c}<br/>占比:{d}%',
+  },
+
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.data], ([newNums], [oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: pieOption = {
+    grid: props.grid, // 网格
+    legend: props.legend, // 图例
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: props.hoverFormatter,
+      textStyle: {
+        fontSize: 15,
+      },
+    }, // 提示框
+    series: [] as pieSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 标题
+  if (props.colors) {
+    option.color = props.colors as string[]
+  }
+  // 数据
+  if (props.data) {
+    const series: pieSeriesOption = {
+      animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+      type: 'pie',
+      avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+      roseType: props.roseType, // 玫瑰图类型
+      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+      startAngle: 140,
+      label: {
+        show: props.labelShow,
+        position: 'center',
+        formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
+        fontSize: 22,
+        fontWeight: 'bolder',
+        rich: {
+          style1: {
+            color: props.fontColor,
+            fontSize: 16,
+          },
+          style2: {
+            color: props.fontColor,
+            fontWeight: 'bolder',
+            fontSize: 19,
+          },
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 'bold',
+          },
+        },
+      },
+      data: props.data,
+    }
+    option.series = [series]
+  }
+  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..3fec782
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,350 @@
+<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,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 10,
+        right: 20,
+        bottom: 5,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 0,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    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)
+    },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        '#2d8cf0',
+        '#19be6b',
+        '#ff9900',
+        '#E46CBB',
+        '#9A66E4',
+        '#ed3f14',
+        '#01C2F9',
+      ]
+    },
+  },
+  /**
+   * 实虚线
+   */
+  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: props.grid,
+    legend: props.legend, // 图例
+    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.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 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/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..032ee81
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup name="PieChart">
+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 { Grid } from '@element-plus/icons-vue'
+import type { lineSeriesOption, pieDataI, pieOption, pieSeriesOption } 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,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 图例是否显示
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: false,
+        orient: 'vertical',
+        right: '20%',
+        top: 'center',
+        icon: 'circle',
+        itemWidth: 12,
+        itemHeight: 12,
+        itemStyle: {
+          fontSize: 18,
+        },
+      }
+    },
+  },
+  /**
+   * 文本标签是否显示
+   */
+  labelShow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 饼图的半径[内半径，外半径]
+   */
+  radius: {
+    type: Array,
+    default: () => {
+      return ['30%', '45%']
+    },
+  },
+  /**
+   * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+   */
+  roseType: {
+    type: [String, Boolean],
+    default: false,
+  },
+  /**
+   * 显示值类型：percentage百分比|value数值
+   */
+  valueType: {
+    type: String,
+    default: 'percentage',
+  },
+  /**
+   * 数据，格式为 [{name:'xxx'，value:0},...]
+   */
+  data: {
+    type: Array<pieDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => { return ['#3d7eff', '#caddff'] },
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: '10%',
+        left: '5%',
+        right: '5%',
+        bottom: 20,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 标签文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 标签位置, outside饼图扇区外侧， inside饼图扇区内部， center饼图中心位置
+   */
+  labelPosition: {
+    type: String,
+    default: 'center',
+  },
+  /**
+   * 悬停格式化
+   */
+  hoverFormatter: {
+    type: String,
+    default: '{b}<br/>数量:{c}<br/>占比:{d}%',
+  },
+
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.data], ([newNums], [oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: pieOption = {
+    grid: props.grid, // 网格
+    legend: props.legend, // 图例
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: props.hoverFormatter,
+      textStyle: {
+        fontSize: 15,
+      },
+    }, // 提示框
+    series: [] as pieSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 标题
+  if (props.colors) {
+    option.color = props.colors as string[]
+  }
+  // 数据
+  if (props.data) {
+    const series: pieSeriesOption = {
+      animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+      type: 'pie',
+      avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+      roseType: props.roseType, // 玫瑰图类型
+      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+      startAngle: 140,
+      label: {
+        show: props.labelShow,
+        position: 'center',
+        formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
+        fontSize: 22,
+        fontWeight: 'bolder',
+        rich: {
+          style1: {
+            color: props.fontColor,
+            fontSize: 16,
+          },
+          style2: {
+            color: props.fontColor,
+            fontWeight: 'bolder',
+            fontSize: 19,
+          },
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 'bold',
+          },
+        },
+      },
+      data: props.data,
+    }
+    option.series = [series]
+  }
+  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..e677f65
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,220 @@
+import type { LinearGradientObject } from 'echarts'
+// 折线数据格式
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+
+// 饼图数据格式
+export interface pieDataI {
+  name: string // 分类名称
+  value: number // 分类值
+}
+// 标题配置
+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
+    icon?: string // 图形样式
+    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[] // 数值
+    itemWidth?: number // 图例标记宽
+    itemHeight?: number // 图例标记高
+    itemStyle?: { // 图例标记样式
+      decal?: 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
+      }
+    }
+    formatter?: string
+    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
+  }
+}
+
+// 折线series配置项
+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[]
+}
+// 饼图series配置项
+export interface pieSeriesOption {
+  name?: string // 系列名称
+  type: 'pie'
+  animationType?: string// 沿圆弧展开效果 expansion|scale
+  avoidLabelOverlap?: boolean // 是否启用防止标签重叠策略
+  roseType?: string | boolean // 玫瑰图类型
+  radius?: string[] // 饼图的半径[内半径，外半径]
+  center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
+  label?: { // 饼图图形上的文本标签
+    show?: boolean // 是否显示
+    position?: string // 标签位置
+    fontSize?: number // 文字大小，默认12
+    fontWeight?: string // 文字粗细
+    lineHeight?: number // 行高
+    formatter?: string | Function // 标签内容格式器
+    rich?: object // 富文本样式
+    emphasis?: { // 高亮状态的扇区和标签样式
+      show?: boolean
+      textStyle: {
+        color?: string
+        fontSize?: number
+        fontWeight?: string
+      }
+    }
+  }
+  labelLine?: { // 视觉引导线
+    show?: boolean
+  }
+  data: pieDataI[]
+}
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+// 饼图配置项
+export interface pieOption extends titleOption, gridOption, legendOption, tooltipOption {
+  color?: string[]
+  series: pieSeriesOption[]
+}
+

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..3fec782
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,350 @@
+<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,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 10,
+        right: 20,
+        bottom: 5,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 0,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    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)
+    },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        '#2d8cf0',
+        '#19be6b',
+        '#ff9900',
+        '#E46CBB',
+        '#9A66E4',
+        '#ed3f14',
+        '#01C2F9',
+      ]
+    },
+  },
+  /**
+   * 实虚线
+   */
+  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: props.grid,
+    legend: props.legend, // 图例
+    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.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 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/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..032ee81
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup name="PieChart">
+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 { Grid } from '@element-plus/icons-vue'
+import type { lineSeriesOption, pieDataI, pieOption, pieSeriesOption } 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,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 图例是否显示
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: false,
+        orient: 'vertical',
+        right: '20%',
+        top: 'center',
+        icon: 'circle',
+        itemWidth: 12,
+        itemHeight: 12,
+        itemStyle: {
+          fontSize: 18,
+        },
+      }
+    },
+  },
+  /**
+   * 文本标签是否显示
+   */
+  labelShow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 饼图的半径[内半径，外半径]
+   */
+  radius: {
+    type: Array,
+    default: () => {
+      return ['30%', '45%']
+    },
+  },
+  /**
+   * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+   */
+  roseType: {
+    type: [String, Boolean],
+    default: false,
+  },
+  /**
+   * 显示值类型：percentage百分比|value数值
+   */
+  valueType: {
+    type: String,
+    default: 'percentage',
+  },
+  /**
+   * 数据，格式为 [{name:'xxx'，value:0},...]
+   */
+  data: {
+    type: Array<pieDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => { return ['#3d7eff', '#caddff'] },
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: '10%',
+        left: '5%',
+        right: '5%',
+        bottom: 20,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 标签文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 标签位置, outside饼图扇区外侧， inside饼图扇区内部， center饼图中心位置
+   */
+  labelPosition: {
+    type: String,
+    default: 'center',
+  },
+  /**
+   * 悬停格式化
+   */
+  hoverFormatter: {
+    type: String,
+    default: '{b}<br/>数量:{c}<br/>占比:{d}%',
+  },
+
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.data], ([newNums], [oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: pieOption = {
+    grid: props.grid, // 网格
+    legend: props.legend, // 图例
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: props.hoverFormatter,
+      textStyle: {
+        fontSize: 15,
+      },
+    }, // 提示框
+    series: [] as pieSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 标题
+  if (props.colors) {
+    option.color = props.colors as string[]
+  }
+  // 数据
+  if (props.data) {
+    const series: pieSeriesOption = {
+      animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+      type: 'pie',
+      avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+      roseType: props.roseType, // 玫瑰图类型
+      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+      startAngle: 140,
+      label: {
+        show: props.labelShow,
+        position: 'center',
+        formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
+        fontSize: 22,
+        fontWeight: 'bolder',
+        rich: {
+          style1: {
+            color: props.fontColor,
+            fontSize: 16,
+          },
+          style2: {
+            color: props.fontColor,
+            fontWeight: 'bolder',
+            fontSize: 19,
+          },
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 'bold',
+          },
+        },
+      },
+      data: props.data,
+    }
+    option.series = [series]
+  }
+  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..e677f65
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,220 @@
+import type { LinearGradientObject } from 'echarts'
+// 折线数据格式
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+
+// 饼图数据格式
+export interface pieDataI {
+  name: string // 分类名称
+  value: number // 分类值
+}
+// 标题配置
+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
+    icon?: string // 图形样式
+    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[] // 数值
+    itemWidth?: number // 图例标记宽
+    itemHeight?: number // 图例标记高
+    itemStyle?: { // 图例标记样式
+      decal?: 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
+      }
+    }
+    formatter?: string
+    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
+  }
+}
+
+// 折线series配置项
+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[]
+}
+// 饼图series配置项
+export interface pieSeriesOption {
+  name?: string // 系列名称
+  type: 'pie'
+  animationType?: string// 沿圆弧展开效果 expansion|scale
+  avoidLabelOverlap?: boolean // 是否启用防止标签重叠策略
+  roseType?: string | boolean // 玫瑰图类型
+  radius?: string[] // 饼图的半径[内半径，外半径]
+  center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
+  label?: { // 饼图图形上的文本标签
+    show?: boolean // 是否显示
+    position?: string // 标签位置
+    fontSize?: number // 文字大小，默认12
+    fontWeight?: string // 文字粗细
+    lineHeight?: number // 行高
+    formatter?: string | Function // 标签内容格式器
+    rich?: object // 富文本样式
+    emphasis?: { // 高亮状态的扇区和标签样式
+      show?: boolean
+      textStyle: {
+        color?: string
+        fontSize?: number
+        fontWeight?: string
+      }
+    }
+  }
+  labelLine?: { // 视觉引导线
+    show?: boolean
+  }
+  data: pieDataI[]
+}
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+// 饼图配置项
+export interface pieOption extends titleOption, gridOption, legendOption, tooltipOption {
+  color?: string[]
+  series: pieSeriesOption[]
+}
+
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..3fec782
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,350 @@
+<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,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 10,
+        right: 20,
+        bottom: 5,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 0,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    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)
+    },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        '#2d8cf0',
+        '#19be6b',
+        '#ff9900',
+        '#E46CBB',
+        '#9A66E4',
+        '#ed3f14',
+        '#01C2F9',
+      ]
+    },
+  },
+  /**
+   * 实虚线
+   */
+  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: props.grid,
+    legend: props.legend, // 图例
+    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.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 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/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..032ee81
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup name="PieChart">
+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 { Grid } from '@element-plus/icons-vue'
+import type { lineSeriesOption, pieDataI, pieOption, pieSeriesOption } 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,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 图例是否显示
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: false,
+        orient: 'vertical',
+        right: '20%',
+        top: 'center',
+        icon: 'circle',
+        itemWidth: 12,
+        itemHeight: 12,
+        itemStyle: {
+          fontSize: 18,
+        },
+      }
+    },
+  },
+  /**
+   * 文本标签是否显示
+   */
+  labelShow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 饼图的半径[内半径，外半径]
+   */
+  radius: {
+    type: Array,
+    default: () => {
+      return ['30%', '45%']
+    },
+  },
+  /**
+   * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+   */
+  roseType: {
+    type: [String, Boolean],
+    default: false,
+  },
+  /**
+   * 显示值类型：percentage百分比|value数值
+   */
+  valueType: {
+    type: String,
+    default: 'percentage',
+  },
+  /**
+   * 数据，格式为 [{name:'xxx'，value:0},...]
+   */
+  data: {
+    type: Array<pieDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => { return ['#3d7eff', '#caddff'] },
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: '10%',
+        left: '5%',
+        right: '5%',
+        bottom: 20,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 标签文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 标签位置, outside饼图扇区外侧， inside饼图扇区内部， center饼图中心位置
+   */
+  labelPosition: {
+    type: String,
+    default: 'center',
+  },
+  /**
+   * 悬停格式化
+   */
+  hoverFormatter: {
+    type: String,
+    default: '{b}<br/>数量:{c}<br/>占比:{d}%',
+  },
+
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.data], ([newNums], [oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: pieOption = {
+    grid: props.grid, // 网格
+    legend: props.legend, // 图例
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: props.hoverFormatter,
+      textStyle: {
+        fontSize: 15,
+      },
+    }, // 提示框
+    series: [] as pieSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 标题
+  if (props.colors) {
+    option.color = props.colors as string[]
+  }
+  // 数据
+  if (props.data) {
+    const series: pieSeriesOption = {
+      animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+      type: 'pie',
+      avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+      roseType: props.roseType, // 玫瑰图类型
+      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+      startAngle: 140,
+      label: {
+        show: props.labelShow,
+        position: 'center',
+        formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
+        fontSize: 22,
+        fontWeight: 'bolder',
+        rich: {
+          style1: {
+            color: props.fontColor,
+            fontSize: 16,
+          },
+          style2: {
+            color: props.fontColor,
+            fontWeight: 'bolder',
+            fontSize: 19,
+          },
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 'bold',
+          },
+        },
+      },
+      data: props.data,
+    }
+    option.series = [series]
+  }
+  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..e677f65
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,220 @@
+import type { LinearGradientObject } from 'echarts'
+// 折线数据格式
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+
+// 饼图数据格式
+export interface pieDataI {
+  name: string // 分类名称
+  value: number // 分类值
+}
+// 标题配置
+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
+    icon?: string // 图形样式
+    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[] // 数值
+    itemWidth?: number // 图例标记宽
+    itemHeight?: number // 图例标记高
+    itemStyle?: { // 图例标记样式
+      decal?: 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
+      }
+    }
+    formatter?: string
+    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
+  }
+}
+
+// 折线series配置项
+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[]
+}
+// 饼图series配置项
+export interface pieSeriesOption {
+  name?: string // 系列名称
+  type: 'pie'
+  animationType?: string// 沿圆弧展开效果 expansion|scale
+  avoidLabelOverlap?: boolean // 是否启用防止标签重叠策略
+  roseType?: string | boolean // 玫瑰图类型
+  radius?: string[] // 饼图的半径[内半径，外半径]
+  center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
+  label?: { // 饼图图形上的文本标签
+    show?: boolean // 是否显示
+    position?: string // 标签位置
+    fontSize?: number // 文字大小，默认12
+    fontWeight?: string // 文字粗细
+    lineHeight?: number // 行高
+    formatter?: string | Function // 标签内容格式器
+    rich?: object // 富文本样式
+    emphasis?: { // 高亮状态的扇区和标签样式
+      show?: boolean
+      textStyle: {
+        color?: string
+        fontSize?: number
+        fontWeight?: string
+      }
+    }
+  }
+  labelLine?: { // 视觉引导线
+    show?: boolean
+  }
+  data: pieDataI[]
+}
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+// 饼图配置项
+export interface pieOption extends titleOption, gridOption, legendOption, tooltipOption {
+  color?: string[]
+  series: pieSeriesOption[]
+}
+
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..365f766 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": {
@@ -399,7 +399,7 @@
   },
   "legend": {
     "textStyle": {
-      "color": "#fff"
+      "color": "#333"
     }
   },
   "tooltip": {

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..3fec782
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,350 @@
+<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,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 10,
+        right: 20,
+        bottom: 5,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 0,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    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)
+    },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        '#2d8cf0',
+        '#19be6b',
+        '#ff9900',
+        '#E46CBB',
+        '#9A66E4',
+        '#ed3f14',
+        '#01C2F9',
+      ]
+    },
+  },
+  /**
+   * 实虚线
+   */
+  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: props.grid,
+    legend: props.legend, // 图例
+    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.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 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/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..032ee81
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup name="PieChart">
+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 { Grid } from '@element-plus/icons-vue'
+import type { lineSeriesOption, pieDataI, pieOption, pieSeriesOption } 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,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 图例是否显示
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: false,
+        orient: 'vertical',
+        right: '20%',
+        top: 'center',
+        icon: 'circle',
+        itemWidth: 12,
+        itemHeight: 12,
+        itemStyle: {
+          fontSize: 18,
+        },
+      }
+    },
+  },
+  /**
+   * 文本标签是否显示
+   */
+  labelShow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 饼图的半径[内半径，外半径]
+   */
+  radius: {
+    type: Array,
+    default: () => {
+      return ['30%', '45%']
+    },
+  },
+  /**
+   * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+   */
+  roseType: {
+    type: [String, Boolean],
+    default: false,
+  },
+  /**
+   * 显示值类型：percentage百分比|value数值
+   */
+  valueType: {
+    type: String,
+    default: 'percentage',
+  },
+  /**
+   * 数据，格式为 [{name:'xxx'，value:0},...]
+   */
+  data: {
+    type: Array<pieDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => { return ['#3d7eff', '#caddff'] },
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: '10%',
+        left: '5%',
+        right: '5%',
+        bottom: 20,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 标签文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 标签位置, outside饼图扇区外侧， inside饼图扇区内部， center饼图中心位置
+   */
+  labelPosition: {
+    type: String,
+    default: 'center',
+  },
+  /**
+   * 悬停格式化
+   */
+  hoverFormatter: {
+    type: String,
+    default: '{b}<br/>数量:{c}<br/>占比:{d}%',
+  },
+
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.data], ([newNums], [oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: pieOption = {
+    grid: props.grid, // 网格
+    legend: props.legend, // 图例
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: props.hoverFormatter,
+      textStyle: {
+        fontSize: 15,
+      },
+    }, // 提示框
+    series: [] as pieSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 标题
+  if (props.colors) {
+    option.color = props.colors as string[]
+  }
+  // 数据
+  if (props.data) {
+    const series: pieSeriesOption = {
+      animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+      type: 'pie',
+      avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+      roseType: props.roseType, // 玫瑰图类型
+      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+      startAngle: 140,
+      label: {
+        show: props.labelShow,
+        position: 'center',
+        formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
+        fontSize: 22,
+        fontWeight: 'bolder',
+        rich: {
+          style1: {
+            color: props.fontColor,
+            fontSize: 16,
+          },
+          style2: {
+            color: props.fontColor,
+            fontWeight: 'bolder',
+            fontSize: 19,
+          },
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 'bold',
+          },
+        },
+      },
+      data: props.data,
+    }
+    option.series = [series]
+  }
+  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..e677f65
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,220 @@
+import type { LinearGradientObject } from 'echarts'
+// 折线数据格式
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+
+// 饼图数据格式
+export interface pieDataI {
+  name: string // 分类名称
+  value: number // 分类值
+}
+// 标题配置
+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
+    icon?: string // 图形样式
+    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[] // 数值
+    itemWidth?: number // 图例标记宽
+    itemHeight?: number // 图例标记高
+    itemStyle?: { // 图例标记样式
+      decal?: 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
+      }
+    }
+    formatter?: string
+    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
+  }
+}
+
+// 折线series配置项
+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[]
+}
+// 饼图series配置项
+export interface pieSeriesOption {
+  name?: string // 系列名称
+  type: 'pie'
+  animationType?: string// 沿圆弧展开效果 expansion|scale
+  avoidLabelOverlap?: boolean // 是否启用防止标签重叠策略
+  roseType?: string | boolean // 玫瑰图类型
+  radius?: string[] // 饼图的半径[内半径，外半径]
+  center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
+  label?: { // 饼图图形上的文本标签
+    show?: boolean // 是否显示
+    position?: string // 标签位置
+    fontSize?: number // 文字大小，默认12
+    fontWeight?: string // 文字粗细
+    lineHeight?: number // 行高
+    formatter?: string | Function // 标签内容格式器
+    rich?: object // 富文本样式
+    emphasis?: { // 高亮状态的扇区和标签样式
+      show?: boolean
+      textStyle: {
+        color?: string
+        fontSize?: number
+        fontWeight?: string
+      }
+    }
+  }
+  labelLine?: { // 视觉引导线
+    show?: boolean
+  }
+  data: pieDataI[]
+}
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+// 饼图配置项
+export interface pieOption extends titleOption, gridOption, legendOption, tooltipOption {
+  color?: string[]
+  series: pieSeriesOption[]
+}
+
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..365f766 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": {
@@ -399,7 +399,7 @@
   },
   "legend": {
     "textStyle": {
-      "color": "#fff"
+      "color": "#333"
     }
   },
   "tooltip": {
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 ''
+  }
+}

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..3fec782
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,350 @@
+<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,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 10,
+        right: 20,
+        bottom: 5,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 0,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    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)
+    },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        '#2d8cf0',
+        '#19be6b',
+        '#ff9900',
+        '#E46CBB',
+        '#9A66E4',
+        '#ed3f14',
+        '#01C2F9',
+      ]
+    },
+  },
+  /**
+   * 实虚线
+   */
+  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: props.grid,
+    legend: props.legend, // 图例
+    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.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 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/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..032ee81
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup name="PieChart">
+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 { Grid } from '@element-plus/icons-vue'
+import type { lineSeriesOption, pieDataI, pieOption, pieSeriesOption } 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,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 图例是否显示
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: false,
+        orient: 'vertical',
+        right: '20%',
+        top: 'center',
+        icon: 'circle',
+        itemWidth: 12,
+        itemHeight: 12,
+        itemStyle: {
+          fontSize: 18,
+        },
+      }
+    },
+  },
+  /**
+   * 文本标签是否显示
+   */
+  labelShow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 饼图的半径[内半径，外半径]
+   */
+  radius: {
+    type: Array,
+    default: () => {
+      return ['30%', '45%']
+    },
+  },
+  /**
+   * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+   */
+  roseType: {
+    type: [String, Boolean],
+    default: false,
+  },
+  /**
+   * 显示值类型：percentage百分比|value数值
+   */
+  valueType: {
+    type: String,
+    default: 'percentage',
+  },
+  /**
+   * 数据，格式为 [{name:'xxx'，value:0},...]
+   */
+  data: {
+    type: Array<pieDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => { return ['#3d7eff', '#caddff'] },
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: '10%',
+        left: '5%',
+        right: '5%',
+        bottom: 20,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 标签文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 标签位置, outside饼图扇区外侧， inside饼图扇区内部， center饼图中心位置
+   */
+  labelPosition: {
+    type: String,
+    default: 'center',
+  },
+  /**
+   * 悬停格式化
+   */
+  hoverFormatter: {
+    type: String,
+    default: '{b}<br/>数量:{c}<br/>占比:{d}%',
+  },
+
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.data], ([newNums], [oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: pieOption = {
+    grid: props.grid, // 网格
+    legend: props.legend, // 图例
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: props.hoverFormatter,
+      textStyle: {
+        fontSize: 15,
+      },
+    }, // 提示框
+    series: [] as pieSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 标题
+  if (props.colors) {
+    option.color = props.colors as string[]
+  }
+  // 数据
+  if (props.data) {
+    const series: pieSeriesOption = {
+      animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+      type: 'pie',
+      avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+      roseType: props.roseType, // 玫瑰图类型
+      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+      startAngle: 140,
+      label: {
+        show: props.labelShow,
+        position: 'center',
+        formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
+        fontSize: 22,
+        fontWeight: 'bolder',
+        rich: {
+          style1: {
+            color: props.fontColor,
+            fontSize: 16,
+          },
+          style2: {
+            color: props.fontColor,
+            fontWeight: 'bolder',
+            fontSize: 19,
+          },
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 'bold',
+          },
+        },
+      },
+      data: props.data,
+    }
+    option.series = [series]
+  }
+  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..e677f65
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,220 @@
+import type { LinearGradientObject } from 'echarts'
+// 折线数据格式
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+
+// 饼图数据格式
+export interface pieDataI {
+  name: string // 分类名称
+  value: number // 分类值
+}
+// 标题配置
+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
+    icon?: string // 图形样式
+    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[] // 数值
+    itemWidth?: number // 图例标记宽
+    itemHeight?: number // 图例标记高
+    itemStyle?: { // 图例标记样式
+      decal?: 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
+      }
+    }
+    formatter?: string
+    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
+  }
+}
+
+// 折线series配置项
+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[]
+}
+// 饼图series配置项
+export interface pieSeriesOption {
+  name?: string // 系列名称
+  type: 'pie'
+  animationType?: string// 沿圆弧展开效果 expansion|scale
+  avoidLabelOverlap?: boolean // 是否启用防止标签重叠策略
+  roseType?: string | boolean // 玫瑰图类型
+  radius?: string[] // 饼图的半径[内半径，外半径]
+  center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
+  label?: { // 饼图图形上的文本标签
+    show?: boolean // 是否显示
+    position?: string // 标签位置
+    fontSize?: number // 文字大小，默认12
+    fontWeight?: string // 文字粗细
+    lineHeight?: number // 行高
+    formatter?: string | Function // 标签内容格式器
+    rich?: object // 富文本样式
+    emphasis?: { // 高亮状态的扇区和标签样式
+      show?: boolean
+      textStyle: {
+        color?: string
+        fontSize?: number
+        fontWeight?: string
+      }
+    }
+  }
+  labelLine?: { // 视觉引导线
+    show?: boolean
+  }
+  data: pieDataI[]
+}
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+// 饼图配置项
+export interface pieOption extends titleOption, gridOption, legendOption, tooltipOption {
+  color?: string[]
+  series: pieSeriesOption[]
+}
+
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..365f766 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": {
@@ -399,7 +399,7 @@
   },
   "legend": {
     "textStyle": {
-      "color": "#fff"
+      "color": "#333"
     }
   },
   "tooltip": {
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 ''
+  }
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 4c53275..2b110cb 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -165,7 +165,7 @@
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
-        :page-sizes="props.pageSizes"
+        :page-sizes="props.pageSizes as number[]"
         :page-size="props.query.limit"
         :total="props.total"
         layout="total, sizes, prev, pager, next"

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
new file mode 100644
index 0000000..3fec782
--- /dev/null
+++ b/src/components/Echart/LineChart.vue
@@ -0,0 +1,350 @@
+<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,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 10,
+        right: 20,
+        bottom: 5,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 0,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    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)
+    },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        '#2d8cf0',
+        '#19be6b',
+        '#ff9900',
+        '#E46CBB',
+        '#9A66E4',
+        '#ed3f14',
+        '#01C2F9',
+      ]
+    },
+  },
+  /**
+   * 实虚线
+   */
+  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: props.grid,
+    legend: props.legend, // 图例
+    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.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 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/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..032ee81
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,270 @@
+<script lang="ts" setup name="PieChart">
+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 { Grid } from '@element-plus/icons-vue'
+import type { lineSeriesOption, pieDataI, pieOption, pieSeriesOption } 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,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 图例是否显示
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: false,
+        orient: 'vertical',
+        right: '20%',
+        top: 'center',
+        icon: 'circle',
+        itemWidth: 12,
+        itemHeight: 12,
+        itemStyle: {
+          fontSize: 18,
+        },
+      }
+    },
+  },
+  /**
+   * 文本标签是否显示
+   */
+  labelShow: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 饼图的半径[内半径，外半径]
+   */
+  radius: {
+    type: Array,
+    default: () => {
+      return ['30%', '45%']
+    },
+  },
+  /**
+   * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
+   */
+  roseType: {
+    type: [String, Boolean],
+    default: false,
+  },
+  /**
+   * 显示值类型：percentage百分比|value数值
+   */
+  valueType: {
+    type: String,
+    default: 'percentage',
+  },
+  /**
+   * 数据，格式为 [{name:'xxx'，value:0},...]
+   */
+  data: {
+    type: Array<pieDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 颜色
+   */
+  colors: {
+    type: Array,
+    default: () => { return ['#3d7eff', '#caddff'] },
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: '10%',
+        left: '5%',
+        right: '5%',
+        bottom: 20,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 标签文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 标签位置, outside饼图扇区外侧， inside饼图扇区内部， center饼图中心位置
+   */
+  labelPosition: {
+    type: String,
+    default: 'center',
+  },
+  /**
+   * 悬停格式化
+   */
+  hoverFormatter: {
+    type: String,
+    default: '{b}<br/>数量:{c}<br/>占比:{d}%',
+  },
+
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.data], ([newNums], [oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: pieOption = {
+    grid: props.grid, // 网格
+    legend: props.legend, // 图例
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: props.hoverFormatter,
+      textStyle: {
+        fontSize: 15,
+      },
+    }, // 提示框
+    series: [] as pieSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 标题
+  if (props.colors) {
+    option.color = props.colors as string[]
+  }
+  // 数据
+  if (props.data) {
+    const series: pieSeriesOption = {
+      animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
+      type: 'pie',
+      avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+      roseType: props.roseType, // 玫瑰图类型
+      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
+      startAngle: 140,
+      label: {
+        show: props.labelShow,
+        position: 'center',
+        formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
+        fontSize: 22,
+        fontWeight: 'bolder',
+        rich: {
+          style1: {
+            color: props.fontColor,
+            fontSize: 16,
+          },
+          style2: {
+            color: props.fontColor,
+            fontWeight: 'bolder',
+            fontSize: 19,
+          },
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 'bold',
+          },
+        },
+      },
+      data: props.data,
+    }
+    option.series = [series]
+  }
+  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..e677f65
--- /dev/null
+++ b/src/components/Echart/echart-interface.ts
@@ -0,0 +1,220 @@
+import type { LinearGradientObject } from 'echarts'
+// 折线数据格式
+export interface lineDataI {
+  name: string // 轴线名称
+  data: string[] | number[] // 数值
+  color?: string // 颜色
+}
+
+// 饼图数据格式
+export interface pieDataI {
+  name: string // 分类名称
+  value: number // 分类值
+}
+// 标题配置
+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
+    icon?: string // 图形样式
+    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[] // 数值
+    itemWidth?: number // 图例标记宽
+    itemHeight?: number // 图例标记高
+    itemStyle?: { // 图例标记样式
+      decal?: 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
+      }
+    }
+    formatter?: string
+    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
+  }
+}
+
+// 折线series配置项
+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[]
+}
+// 饼图series配置项
+export interface pieSeriesOption {
+  name?: string // 系列名称
+  type: 'pie'
+  animationType?: string// 沿圆弧展开效果 expansion|scale
+  avoidLabelOverlap?: boolean // 是否启用防止标签重叠策略
+  roseType?: string | boolean // 玫瑰图类型
+  radius?: string[] // 饼图的半径[内半径，外半径]
+  center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
+  label?: { // 饼图图形上的文本标签
+    show?: boolean // 是否显示
+    position?: string // 标签位置
+    fontSize?: number // 文字大小，默认12
+    fontWeight?: string // 文字粗细
+    lineHeight?: number // 行高
+    formatter?: string | Function // 标签内容格式器
+    rich?: object // 富文本样式
+    emphasis?: { // 高亮状态的扇区和标签样式
+      show?: boolean
+      textStyle: {
+        color?: string
+        fontSize?: number
+        fontWeight?: string
+      }
+    }
+  }
+  labelLine?: { // 视觉引导线
+    show?: boolean
+  }
+  data: pieDataI[]
+}
+// 折线图配置项
+export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: lineSeriesOption[]
+}
+// 饼图配置项
+export interface pieOption extends titleOption, gridOption, legendOption, tooltipOption {
+  color?: string[]
+  series: pieSeriesOption[]
+}
+
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..365f766 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": {
@@ -399,7 +399,7 @@
   },
   "legend": {
     "textStyle": {
-      "color": "#fff"
+      "color": "#333"
     }
   },
   "tooltip": {
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 ''
+  }
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 4c53275..2b110cb 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -165,7 +165,7 @@
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
-        :page-sizes="props.pageSizes"
+        :page-sizes="props.pageSizes as number[]"
         :page-size="props.query.limit"
         :total="props.total"
         layout="total, sizes, prev, pager, next"
diff --git a/src/settings.ts b/src/settings.ts
index ae5c3f5..6f8b597 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -17,6 +17,7 @@
     baseOn: 'backend',
     menuMode: 'head',
     showIcon: true,
+    switchMainMenuAndPageJump: true,
     enableSubMenuCollapseButton: true,
   },
   toolbar: {