diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 18ed3ed..b7ec0cc 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -20,7 +20,7 @@
   // 图例是否显示
   legendShow: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   // 图例
   legend: {
@@ -117,18 +117,21 @@
     grid: {
       show: false, // 是否显示直角坐标系网格
       left: 10,
-      right: 30,
+      right: 20,
       bottom: 5,
-      top: 30,
+      top: 50,
       containLabel: true, // grid 区域是否包含坐标轴的刻度标签
     }, // 网格
     legend: {
       show: props.legendShow,
-      orient: 'horizontal', // 图例方向
+      icon: 'circle',
+      orient: 'vertile', // 图例方向
       align: 'left', // 图例标记和文本的对齐，默认自动
-      top: 5,
+      top: 0,
+      itemWidth: 12,
+      itemHeight: 12,
       padding: [0, 0, 0, 120],
-      right: 130,
+      right: 20,
     }, // 图例
     tooltip: {
       trigger: 'axis',

diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 18ed3ed..b7ec0cc 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -20,7 +20,7 @@
   // 图例是否显示
   legendShow: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   // 图例
   legend: {
@@ -117,18 +117,21 @@
     grid: {
       show: false, // 是否显示直角坐标系网格
       left: 10,
-      right: 30,
+      right: 20,
       bottom: 5,
-      top: 30,
+      top: 50,
       containLabel: true, // grid 区域是否包含坐标轴的刻度标签
     }, // 网格
     legend: {
       show: props.legendShow,
-      orient: 'horizontal', // 图例方向
+      icon: 'circle',
+      orient: 'vertile', // 图例方向
       align: 'left', // 图例标记和文本的对齐，默认自动
-      top: 5,
+      top: 0,
+      itemWidth: 12,
+      itemHeight: 12,
       padding: [0, 0, 0, 120],
-      right: 130,
+      right: 20,
     }, // 图例
     tooltip: {
       trigger: 'axis',
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..797fd58
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,233 @@
+<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,
+  },
+  valueType: { // 显示值类型：percentage百分比|value数值
+    type: String,
+    default: 'percentage',
+  },
+  // 数据
+  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: '',
+  },
+  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: {
+      show: false, // 是否显示直角坐标系网格
+      left: props.grid.left,
+      right: props.grid.right,
+      bottom: props.grid.bottom,
+      top: props.grid.top,
+      containLabel: props.grid.containLabel, // 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
index 18ed3ed..b7ec0cc 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -20,7 +20,7 @@
   // 图例是否显示
   legendShow: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   // 图例
   legend: {
@@ -117,18 +117,21 @@
     grid: {
       show: false, // 是否显示直角坐标系网格
       left: 10,
-      right: 30,
+      right: 20,
       bottom: 5,
-      top: 30,
+      top: 50,
       containLabel: true, // grid 区域是否包含坐标轴的刻度标签
     }, // 网格
     legend: {
       show: props.legendShow,
-      orient: 'horizontal', // 图例方向
+      icon: 'circle',
+      orient: 'vertile', // 图例方向
       align: 'left', // 图例标记和文本的对齐，默认自动
-      top: 5,
+      top: 0,
+      itemWidth: 12,
+      itemHeight: 12,
       padding: [0, 0, 0, 120],
-      right: 130,
+      right: 20,
     }, // 图例
     tooltip: {
       trigger: 'axis',
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..797fd58
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,233 @@
+<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,
+  },
+  valueType: { // 显示值类型：percentage百分比|value数值
+    type: String,
+    default: 'percentage',
+  },
+  // 数据
+  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: '',
+  },
+  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: {
+      show: false, // 是否显示直角坐标系网格
+      left: props.grid.left,
+      right: props.grid.right,
+      bottom: props.grid.bottom,
+      top: props.grid.top,
+      containLabel: props.grid.containLabel, // 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
index 3b8fa41..146e4fe 100644
--- a/src/components/Echart/echart-interface.ts
+++ b/src/components/Echart/echart-interface.ts
@@ -1,9 +1,16 @@
 import type { LinearGradientObject } from 'echarts'
+// 折线数据格式
 export interface lineDataI {
   name: string // 轴线名称
   data: string[] | number[] // 数值
   color?: string // 颜色
 }
+
+// 饼图数据格式
+export interface pieDataI {
+  name: string // 分类名称
+  value: number | string // 分类值
+}
 // 标题配置
 export interface titleOption {
   title?: {
@@ -31,6 +38,7 @@
 export interface legendOption {
   legend?: {
     show?: boolean
+    icon?: string // 图形样式
     orient?: string // 图例方向
     align?: string // 图例标记和文本的对齐，默认自动
     left?: number | string // 上边距
@@ -38,7 +46,12 @@
     bottom?: number | string // 下边距
     top?: number | string // 顶部边距
     padding?: number | [number, number] | [number, number, number, number] // 内边距
-    data?: string[]
+    data?: string[] // 数值
+    itemWidth?: number // 图例标记宽
+    itemHeight?: number // 图例标记高
+    itemStyle?: { // 图例标记样式
+      decal?: string // 贴花图案
+    }
   }
 }
 // 提示框
@@ -50,14 +63,15 @@
       color?: string // 文字颜色，默认白色
       fontSize?: number // 文字大小， 默认14
     }
-    axisPointer: { // 坐标轴指示器
+    axisPointer?: { // 坐标轴指示器
       type: 'cross' | 'line' | 'shadow' | 'none'
       label: {
         show?: boolean // axisPointer为cross时默认显示，其他默认不显示
         fontSize?: number // 文字大小，默认14
       }
     }
-    valueFormatter: (value: number | string) => string // 数值显示部分格式化回调函数
+    formatter?: string
+    valueFormatter?: (value: number | string) => string // 数值显示部分格式化回调函数
   }
 }
 
@@ -135,6 +149,7 @@
   }
 }
 
+// 折线series配置项
 export interface lineSeriesOption {
   name?: string // 系列名称
   type: 'line'
@@ -159,11 +174,47 @@
   }
   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
index 18ed3ed..b7ec0cc 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -20,7 +20,7 @@
   // 图例是否显示
   legendShow: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   // 图例
   legend: {
@@ -117,18 +117,21 @@
     grid: {
       show: false, // 是否显示直角坐标系网格
       left: 10,
-      right: 30,
+      right: 20,
       bottom: 5,
-      top: 30,
+      top: 50,
       containLabel: true, // grid 区域是否包含坐标轴的刻度标签
     }, // 网格
     legend: {
       show: props.legendShow,
-      orient: 'horizontal', // 图例方向
+      icon: 'circle',
+      orient: 'vertile', // 图例方向
       align: 'left', // 图例标记和文本的对齐，默认自动
-      top: 5,
+      top: 0,
+      itemWidth: 12,
+      itemHeight: 12,
       padding: [0, 0, 0, 120],
-      right: 130,
+      right: 20,
     }, // 图例
     tooltip: {
       trigger: 'axis',
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
new file mode 100644
index 0000000..797fd58
--- /dev/null
+++ b/src/components/Echart/PieChart.vue
@@ -0,0 +1,233 @@
+<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,
+  },
+  valueType: { // 显示值类型：percentage百分比|value数值
+    type: String,
+    default: 'percentage',
+  },
+  // 数据
+  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: '',
+  },
+  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: {
+      show: false, // 是否显示直角坐标系网格
+      left: props.grid.left,
+      right: props.grid.right,
+      bottom: props.grid.bottom,
+      top: props.grid.top,
+      containLabel: props.grid.containLabel, // 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
index 3b8fa41..146e4fe 100644
--- a/src/components/Echart/echart-interface.ts
+++ b/src/components/Echart/echart-interface.ts
@@ -1,9 +1,16 @@
 import type { LinearGradientObject } from 'echarts'
+// 折线数据格式
 export interface lineDataI {
   name: string // 轴线名称
   data: string[] | number[] // 数值
   color?: string // 颜色
 }
+
+// 饼图数据格式
+export interface pieDataI {
+  name: string // 分类名称
+  value: number | string // 分类值
+}
 // 标题配置
 export interface titleOption {
   title?: {
@@ -31,6 +38,7 @@
 export interface legendOption {
   legend?: {
     show?: boolean
+    icon?: string // 图形样式
     orient?: string // 图例方向
     align?: string // 图例标记和文本的对齐，默认自动
     left?: number | string // 上边距
@@ -38,7 +46,12 @@
     bottom?: number | string // 下边距
     top?: number | string // 顶部边距
     padding?: number | [number, number] | [number, number, number, number] // 内边距
-    data?: string[]
+    data?: string[] // 数值
+    itemWidth?: number // 图例标记宽
+    itemHeight?: number // 图例标记高
+    itemStyle?: { // 图例标记样式
+      decal?: string // 贴花图案
+    }
   }
 }
 // 提示框
@@ -50,14 +63,15 @@
       color?: string // 文字颜色，默认白色
       fontSize?: number // 文字大小， 默认14
     }
-    axisPointer: { // 坐标轴指示器
+    axisPointer?: { // 坐标轴指示器
       type: 'cross' | 'line' | 'shadow' | 'none'
       label: {
         show?: boolean // axisPointer为cross时默认显示，其他默认不显示
         fontSize?: number // 文字大小，默认14
       }
     }
-    valueFormatter: (value: number | string) => string // 数值显示部分格式化回调函数
+    formatter?: string
+    valueFormatter?: (value: number | string) => string // 数值显示部分格式化回调函数
   }
 }
 
@@ -135,6 +149,7 @@
   }
 }
 
+// 折线series配置项
 export interface lineSeriesOption {
   name?: string // 系列名称
   type: 'line'
@@ -159,11 +174,47 @@
   }
   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/theme.json b/src/components/Echart/theme.json
index 9488751..365f766 100644
--- a/src/components/Echart/theme.json
+++ b/src/components/Echart/theme.json
@@ -399,7 +399,7 @@
   },
   "legend": {
     "textStyle": {
-      "color": "#fff"
+      "color": "#333"
     }
   },
   "tooltip": {