diff --git a/src/components.d.ts b/src/components.d.ts
index f202da8..aa267c4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,7 +29,6 @@
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
-    LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
     NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
@@ -37,7 +36,6 @@
     PageMain: typeof import('./components/PageMain/index.vue')['default']
     PcasCascader: typeof import('./components/PcasCascader/index.vue')['default']
     Pie: typeof import('./components/echarts/pie.vue')['default']
-    PieChart: typeof import('./components/Echart/PieChart.vue')['default']
     PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default']
     RoleDialog: typeof import('./components/dialog/roleDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

diff --git a/src/components.d.ts b/src/components.d.ts
index f202da8..aa267c4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,7 +29,6 @@
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
-    LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
     NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
@@ -37,7 +36,6 @@
     PageMain: typeof import('./components/PageMain/index.vue')['default']
     PcasCascader: typeof import('./components/PcasCascader/index.vue')['default']
     Pie: typeof import('./components/echarts/pie.vue')['default']
-    PieChart: typeof import('./components/Echart/PieChart.vue')['default']
     PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default']
     RoleDialog: typeof import('./components/dialog/roleDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
new file mode 100644
index 0000000..475cdbf
--- /dev/null
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -0,0 +1,449 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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.d.ts b/src/components.d.ts
index f202da8..aa267c4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,7 +29,6 @@
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
-    LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
     NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
@@ -37,7 +36,6 @@
     PageMain: typeof import('./components/PageMain/index.vue')['default']
     PcasCascader: typeof import('./components/PcasCascader/index.vue')['default']
     Pie: typeof import('./components/echarts/pie.vue')['default']
-    PieChart: typeof import('./components/Echart/PieChart.vue')['default']
     PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default']
     RoleDialog: typeof import('./components/dialog/roleDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
new file mode 100644
index 0000000..475cdbf
--- /dev/null
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -0,0 +1,449 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
new file mode 100644
index 0000000..02f9f14
--- /dev/null
+++ b/src/components/Echart/BarChartVertical.vue
@@ -0,0 +1,456 @@
+<script lang="ts" setup name="BarChartVertical">
+/**
+ * 垂直条形图，支持渐变，支持增加背景颜色
+ */
+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 { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 20,
+        right: 20,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#fff'],
+        ['#2352d6', '#fff'],
+        ['#fed700', '#fff'],
+        ['#feb501', '#fff'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  /**
+   * 柱子宽度
+   */
+  barWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  // 是否显示X轴线
+  showXAxis: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示Y轴线
+  showYAxis: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示Y轴线
+  showYSplitLine: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+   */
+  labelPosition: {
+    type: String,
+    default: 'top',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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 : ''
+      },
+    }, // 提示框
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showYAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: true,
+          color: props.fontColor, // y轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showYSplitLine,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showXAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: props.labelPosition,
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: !!props.backgroundColor,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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.d.ts b/src/components.d.ts
index f202da8..aa267c4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,7 +29,6 @@
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
-    LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
     NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
@@ -37,7 +36,6 @@
     PageMain: typeof import('./components/PageMain/index.vue')['default']
     PcasCascader: typeof import('./components/PcasCascader/index.vue')['default']
     Pie: typeof import('./components/echarts/pie.vue')['default']
-    PieChart: typeof import('./components/Echart/PieChart.vue')['default']
     PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default']
     RoleDialog: typeof import('./components/dialog/roleDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
new file mode 100644
index 0000000..475cdbf
--- /dev/null
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -0,0 +1,449 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
new file mode 100644
index 0000000..02f9f14
--- /dev/null
+++ b/src/components/Echart/BarChartVertical.vue
@@ -0,0 +1,456 @@
+<script lang="ts" setup name="BarChartVertical">
+/**
+ * 垂直条形图，支持渐变，支持增加背景颜色
+ */
+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 { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 20,
+        right: 20,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#fff'],
+        ['#2352d6', '#fff'],
+        ['#fed700', '#fff'],
+        ['#feb501', '#fff'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  /**
+   * 柱子宽度
+   */
+  barWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  // 是否显示X轴线
+  showXAxis: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示Y轴线
+  showYAxis: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示Y轴线
+  showYSplitLine: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+   */
+  labelPosition: {
+    type: String,
+    default: 'top',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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 : ''
+      },
+    }, // 提示框
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showYAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: true,
+          color: props.fontColor, // y轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showYSplitLine,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showXAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: props.labelPosition,
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: !!props.backgroundColor,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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
index 3fec782..ce5d797 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -48,7 +48,7 @@
         icon: 'circle',
         orient: 'vertile', // 图例方向
         align: 'left', // 图例标记和文本的对齐，默认自动
-        top: 0,
+        top: 5,
         right: 20,
         itemWidth: 12,
         itemHeight: 12,

diff --git a/src/components.d.ts b/src/components.d.ts
index f202da8..aa267c4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,7 +29,6 @@
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
-    LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
     NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
@@ -37,7 +36,6 @@
     PageMain: typeof import('./components/PageMain/index.vue')['default']
     PcasCascader: typeof import('./components/PcasCascader/index.vue')['default']
     Pie: typeof import('./components/echarts/pie.vue')['default']
-    PieChart: typeof import('./components/Echart/PieChart.vue')['default']
     PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default']
     RoleDialog: typeof import('./components/dialog/roleDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
new file mode 100644
index 0000000..475cdbf
--- /dev/null
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -0,0 +1,449 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
new file mode 100644
index 0000000..02f9f14
--- /dev/null
+++ b/src/components/Echart/BarChartVertical.vue
@@ -0,0 +1,456 @@
+<script lang="ts" setup name="BarChartVertical">
+/**
+ * 垂直条形图，支持渐变，支持增加背景颜色
+ */
+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 { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 20,
+        right: 20,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#fff'],
+        ['#2352d6', '#fff'],
+        ['#fed700', '#fff'],
+        ['#feb501', '#fff'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  /**
+   * 柱子宽度
+   */
+  barWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  // 是否显示X轴线
+  showXAxis: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示Y轴线
+  showYAxis: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示Y轴线
+  showYSplitLine: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+   */
+  labelPosition: {
+    type: String,
+    default: 'top',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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 : ''
+      },
+    }, // 提示框
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showYAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: true,
+          color: props.fontColor, // y轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showYSplitLine,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showXAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: props.labelPosition,
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: !!props.backgroundColor,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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
index 3fec782..ce5d797 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -48,7 +48,7 @@
         icon: 'circle',
         orient: 'vertile', // 图例方向
         align: 'left', // 图例标记和文本的对齐，默认自动
-        top: 0,
+        top: 5,
         right: 20,
         itemWidth: 12,
         itemHeight: 12,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 032ee81..4b1aa79 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -1,13 +1,10 @@
 <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 type { pieDataI, pieOption, pieSeriesOption } from './echart-interface'
 import tdTheme from './theme.json' // 引入默认主题
-import { formatColor, getAlphaColor } from './utils'
 const props = defineProps({
   /**
    * id

diff --git a/src/components.d.ts b/src/components.d.ts
index f202da8..aa267c4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,7 +29,6 @@
     ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
     ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
-    LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     NodeWrap: typeof import('./components/workFlow/nodeWrap.vue')['default']
     NodeWrapBan: typeof import('./components/workFlow/nodeWrapBan.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
@@ -37,7 +36,6 @@
     PageMain: typeof import('./components/PageMain/index.vue')['default']
     PcasCascader: typeof import('./components/PcasCascader/index.vue')['default']
     Pie: typeof import('./components/echarts/pie.vue')['default']
-    PieChart: typeof import('./components/Echart/PieChart.vue')['default']
     PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default']
     RoleDialog: typeof import('./components/dialog/roleDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
new file mode 100644
index 0000000..475cdbf
--- /dev/null
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -0,0 +1,449 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
new file mode 100644
index 0000000..02f9f14
--- /dev/null
+++ b/src/components/Echart/BarChartVertical.vue
@@ -0,0 +1,456 @@
+<script lang="ts" setup name="BarChartVertical">
+/**
+ * 垂直条形图，支持渐变，支持增加背景颜色
+ */
+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 { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 50,
+        left: 20,
+        right: 20,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        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 [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#fff'],
+        ['#2352d6', '#fff'],
+        ['#fed700', '#fff'],
+        ['#feb501', '#fff'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  /**
+   * 柱子宽度
+   */
+  barWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  // 是否显示X轴线
+  showXAxis: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示Y轴线
+  showYAxis: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示Y轴线
+  showYSplitLine: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+   */
+  labelPosition: {
+    type: String,
+    default: 'top',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    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: barOption = {
+    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 : ''
+      },
+    }, // 提示框
+    yAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showYAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: true,
+          color: props.fontColor, // y轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showYSplitLine,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showXAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+      option.xAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        colorBy: props.colorBy,
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: props.labelPosition,
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: !!props.backgroundColor,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    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
index 3fec782..ce5d797 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -48,7 +48,7 @@
         icon: 'circle',
         orient: 'vertile', // 图例方向
         align: 'left', // 图例标记和文本的对齐，默认自动
-        top: 0,
+        top: 5,
         right: 20,
         itemWidth: 12,
         itemHeight: 12,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 032ee81..4b1aa79 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -1,13 +1,10 @@
 <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 type { pieDataI, pieOption, pieSeriesOption } from './echart-interface'
 import tdTheme from './theme.json' // 引入默认主题
-import { formatColor, getAlphaColor } from './utils'
 const props = defineProps({
   /**
    * id
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
index e677f65..2308961 100644
--- a/src/components/Echart/echart-interface.ts
+++ b/src/components/Echart/echart-interface.ts
@@ -81,6 +81,8 @@
   name?: string
   boundaryGap?: boolean | string[]
   data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  min?: number | string | Function
+  max?: number | string | Function
   axisLine?: { // 坐标轴线
     show?: boolean
     lineStyle?: {
@@ -90,12 +92,14 @@
   }
   nameTextStyle?: { // 坐标轴名称的文字样式。
     color?: string
-    fontSize?: number // 默认12
+    fontSize?: number | string // 默认12
     verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
   }
   axisLabel?: { // 坐标轴刻度标签
+    show?: boolean
     color?: string // X轴名称颜色
-    fontSize?: number //
+    fontSize?: number | string // 文字大小
+    width?: number | string // 文本显示宽度
   }
   splitLine: { // 坐标轴在 grid 区域中的分隔线
     show: boolean
@@ -118,6 +122,8 @@
   name?: string
   boundaryGap?: boolean | string[]
   data?: Array<string | Object> // 类目数据，在类目轴(type=category)中有效
+  min?: number | string | Function
+  max?: number | string | Function
   axisLine?: { // 坐标轴线
     show?: boolean
     lineStyle?: {
@@ -127,17 +133,19 @@
   }
   nameTextStyle?: { // 坐标轴名称的文字样式。
     color?: string
-    fontSize?: number // 默认12
+    fontSize?: number | string // 默认12
     verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
   }
   axisLabel?: { // 坐标轴刻度标签
+    show?: boolean
     color?: string // X轴名称颜色
-    fontSize?: number //
+    fontSize?: number | string // 文字大小
+    width?: number | string // 文本显示宽度
   }
   splitLine: { // 坐标轴在 grid 区域中的分隔线
     show?: boolean
     interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
-    lineStyle: {
+    lineStyle?: {
       color?: string | Array<string>
       type?: string // 'dashed' | 'solid' | 'dotted'
       shadowBlur?: number // 图形阴影的模糊大小
@@ -206,6 +214,43 @@
   }
   data: pieDataI[]
 }
+// 柱状图series配置项
+export interface barSeriesOption {
+  name?: string // 系列名称
+  type: 'bar'
+  barCategoryGap?: string // 同一系列柱间距离,默认20%
+  baryGap?: string // 不同系列的柱间距离，默认30%
+  barWidth?: string | number // 柱条宽度，不设自适应
+  colorBy: string // 调色盘取色策略： series按照系列，data按照数据项
+  itemStyle?: { // 柱子样式
+    color?: string | LinearGradientObject | Function // 图形的颜色
+    borderColor?: string // 图形的描边颜色
+    borderWidth?: number // 描边线宽。默认0，无描边。
+    borderRadius?: number | number[] // 柱条圆角半径 统一设置四个角圆角大小，或依次设置（顺时针左上，右上，右下，左下）
+    shadowBlur?: number // 图形阴影的模糊大小
+    shadowColor?: string // 阴影颜色
+    shadowOffsetX?: number // 阴影水平方向的偏移距离
+    shadowOffsetY?: number // 阴影垂直方向的偏移距离
+    opacity?: number // 图形透明度
+  }
+  showBackground?: boolean
+  backgroundStyle: { // 柱条背景样式
+    color?: string // 背景颜色
+    borderRadius?: number | number[] // 柱条圆角半径 统一设置四个角圆角大小，或依次设置（顺时针左上，右上，右下，左下）
+  }
+  label: { // 图形上的文本标签
+    normal: {
+      show?: boolean // 是否显示标签
+      color?: string // 标签文字颜色
+      position?: string | [number | string, number | string] // 标签文字位置：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+      fontSize?: string | number // 标签文字大小
+      align?: string // 文字水平对齐方式
+      verticalAlign?: string // 文字垂直对齐方向
+      formatter: string | Function // 标签内容格式器
+    }
+  }
+  data: number[] | string[]
+}
 // 折线图配置项
 export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
   xAxis: xAxisOption | xAxisOption[]
@@ -217,4 +262,10 @@
   color?: string[]
   series: pieSeriesOption[]
 }
+// 柱状图配置项
+export interface barOption extends titleOption, gridOption, legendOption, tooltipOption {
+  xAxis: xAxisOption | xAxisOption[]
+  yAxis: yAxisOption | yAxisOption[]
+  series: barSeriesOption[]
+}