diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/config.ts b/src/packages/components/Charts/COMBINATIONS/BarLine/config.ts
new file mode 100644
index 00000000..b62c4bab
--- /dev/null
+++ b/src/packages/components/Charts/COMBINATIONS/BarLine/config.ts
@@ -0,0 +1,76 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { BarLineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+// 柱状折线组合图 分别定义series
+// 写死name可以定义legend显示的名称
+export const barSeriesItem = {
+ type: 'bar',
+ barWidth: 15,
+ label: {
+ show: true,
+ position: 'top',
+ color: '#fff',
+ fontSize: 12
+ },
+ itemStyle: {
+ color: null,
+ borderRadius: 2
+ }
+}
+
+export const lineSeriesItem = {
+ type: 'line',
+ symbol: "circle",
+ label: {
+ show: true,
+ position: 'top',
+ color: '#fff',
+ fontSize: 12
+ },
+ symbolSize: 5, //设定实心点的大小
+ itemStyle: {
+ color: '#FFE47A',
+ borderWidth: 1
+ },
+ lineStyle: {
+ type: 'solid',
+ width: 3,
+ color: null
+ }
+}
+
+export const option = {
+ tooltip: {
+ show: true,
+ trigger: 'axis',
+ axisPointer: {
+ show: true,
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data:null
+ },
+ xAxis: {
+ show: true,
+ type: 'category'
+ },
+ yAxis: {
+ show: true,
+ type: 'value'
+ },
+ dataset: { ...dataJson },
+ series: [barSeriesItem, lineSeriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+ public key = BarLineConfig.key
+ public chartConfig = cloneDeep(BarLineConfig)
+ // 图表配置项
+ public option = echartOptionProfixHandle(option, includes)
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/config.vue b/src/packages/components/Charts/COMBINATIONS/BarLine/config.vue
new file mode 100644
index 00000000..b2f7c476
--- /dev/null
+++ b/src/packages/components/Charts/COMBINATIONS/BarLine/config.vue
@@ -0,0 +1,89 @@
+<template>
+ <!-- Echarts 全局设置 -->
+ <global-setting :optionData="optionData"></global-setting>
+ <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`${item.type=='bar' ? '柱状图' : '折线图'}`" :expanded="true">
+ <SettingItemBox name="图形" v-if="item.type=='bar'">
+ <SettingItem name="宽度">
+ <n-input-number
+ v-model:value="item.barWidth"
+ :min="1"
+ :max="100"
+ size="small"
+ placeholder="自动计算"
+ ></n-input-number>
+ </SettingItem>
+ <SettingItem name="圆角">
+ <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="线条" v-if="item.type=='line'">
+ <SettingItem name="宽度">
+ <n-input-number
+ v-model:value="item.lineStyle.width"
+ :min="1"
+ :max="100"
+ size="small"
+ placeholder="自动计算"
+ ></n-input-number>
+ </SettingItem>
+ <SettingItem name="类型">
+ <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="实心点" v-if="item.type=='line'">
+ <SettingItem name="大小">
+ <n-input-number
+ v-model:value="item.symbolSize"
+ :min="1"
+ :max="100"
+ size="small"
+ placeholder="自动计算"
+ ></n-input-number>
+ </SettingItem>
+ </SettingItemBox>
+ <setting-item-box name="标签">
+ <setting-item>
+ <n-space>
+ <n-switch v-model:value="item.label.show" size="small" />
+ <n-text>展示标签</n-text>
+ </n-space>
+ </setting-item>
+ <setting-item name="大小">
+ <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+ </setting-item>
+ <setting-item name="tip颜色">
+ <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+ </setting-item>
+ <setting-item name="位置">
+ <n-select
+ v-model:value="item.label.position"
+ :options="[
+ { label: 'top', value: 'top' },
+ { label: 'left', value: 'left' },
+ { label: 'right', value: 'right' },
+ { label: 'bottom', value: 'bottom' }
+ ]"
+ />
+ </setting-item>
+ </setting-item-box>
+ </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { lineConf } from '@/packages/chartConfiguration/echarts'
+import { GlobalThemeJsonType } from '@/settings/chartThemes'
+
+const props = defineProps({
+ optionData: {
+ type: Object as PropType<GlobalThemeJsonType>,
+ required: true
+ }
+})
+
+const seriesList = computed(() => {
+ console.log(props.optionData);
+ return props.optionData.series
+})
+</script>
\ No newline at end of file
diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/data.json b/src/packages/components/Charts/COMBINATIONS/BarLine/data.json
new file mode 100644
index 00000000..0bd2f36e
--- /dev/null
+++ b/src/packages/components/Charts/COMBINATIONS/BarLine/data.json
@@ -0,0 +1,40 @@
+{
+ "dimensions": ["product", "data1", "data2"],
+ "source": [
+ {
+ "product": "1月",
+ "data1": 104,
+ "data2": 30
+ },
+ {
+ "product": "2月",
+ "data1": 56,
+ "data2": 56
+ },
+ {
+ "product": "3月",
+ "data1": 136,
+ "data2": 36
+ },
+ {
+ "product": "4月",
+ "data1": 86,
+ "data2": 6
+ },
+ {
+ "product": "5月",
+ "data1": 98,
+ "data2": 10
+ },
+ {
+ "product": "6月",
+ "data1": 86,
+ "data2": 70
+ },
+ {
+ "product": "7月",
+ "data1": 77,
+ "data2": 57
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/index.ts b/src/packages/components/Charts/COMBINATIONS/BarLine/index.ts
new file mode 100644
index 00000000..1c236ed2
--- /dev/null
+++ b/src/packages/components/Charts/COMBINATIONS/BarLine/index.ts
@@ -0,0 +1,16 @@
+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const BarLineConfig: ConfigType = {
+ key: 'BarLine',
+ chartKey: 'VBarLine',
+ conKey: 'VCBarLine',
+ title: '柱状加折线图',
+ category: ChatCategoryEnum.COMBINATIONS,
+ categoryName: ChatCategoryEnumName.COMBINATION,
+ package: PackagesCategoryEnum.CHARTS,
+ chartFrame: ChartFrameEnum.ECHARTS,
+ image: 'bar_x.png'
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/COMBINATIONS/BarLine/index.vue b/src/packages/components/Charts/COMBINATIONS/BarLine/index.vue
new file mode 100644
index 00000000..fb239a97
--- /dev/null
+++ b/src/packages/components/Charts/COMBINATIONS/BarLine/index.vue
@@ -0,0 +1,68 @@
+<template>
+ <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
+ autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, watch, PropType, nextTick} from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+//引入柱状图 折线图
+import { BarChart, LineChart } from 'echarts/charts'
+import config, { includes, barSeriesItem, lineSeriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+ themeSetting: {
+ type: Object,
+ required: true
+ },
+ themeColor: {
+ type: Object,
+ required: true
+ },
+ chartConfig: {
+ type: Object as PropType<config>,
+ required: true
+ }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+ return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+watch(
+ () => props.chartConfig.option.dataset,
+ (newData, oldData) => {
+ if (newData.dimensions.length !== oldData.dimensions.length) {
+ const seriesArr = []
+ for (let i = 0; i < newData.dimensions.length - 1; i++) {
+ seriesArr.push(barSeriesItem, lineSeriesItem)
+ }
+ replaceMergeArr.value = ['series']
+ props.chartConfig.option.series = seriesArr
+ nextTick(() => {
+ replaceMergeArr.value = []
+ })
+ }
+ },
+ {
+ deep: false
+ }
+)
+
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>
\ No newline at end of file
diff --git a/src/packages/components/Charts/COMBINATIONS/index.ts b/src/packages/components/Charts/COMBINATIONS/index.ts
new file mode 100644
index 00000000..3a131a97
--- /dev/null
+++ b/src/packages/components/Charts/COMBINATIONS/index.ts
@@ -0,0 +1,3 @@
+import { BarLineConfig } from './BarLine/index'
+
+export default [BarLineConfig]
\ No newline at end of file
diff --git a/src/packages/components/Charts/index.d.ts b/src/packages/components/Charts/index.d.ts
index c033c296..2f88e1df 100644
--- a/src/packages/components/Charts/index.d.ts
+++ b/src/packages/components/Charts/index.d.ts
@@ -5,6 +5,7 @@ export enum ChatCategoryEnum {
LINE = 'Lines',
SCATTER = 'Scatters',
MAP = 'Maps',
+ COMBINATIONS = 'COMBINATIONS',
MORE = 'Mores'
}
@@ -14,5 +15,6 @@ export enum ChatCategoryEnumName {
LINE = '折线图',
SCATTER = '散点图',
MAP = '地图',
+ COMBINATION = '组合图',
MORE = '更多'
}
diff --git a/src/packages/components/Charts/index.ts b/src/packages/components/Charts/index.ts
index 20ffcc66..63e5d657 100644
--- a/src/packages/components/Charts/index.ts
+++ b/src/packages/components/Charts/index.ts
@@ -3,6 +3,7 @@ import Pies from './Pies'
import Lines from './Lines'
import Scatters from './Scatters'
import Mores from './Mores'
+import COMBINATIONS from "./COMBINATIONS";
import Maps from './Maps'
-export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores]
+export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps,...COMBINATIONS, ...Mores]