diff --git a/src/packages/chartConfiguration/echarts/index.ts b/src/packages/chartConfiguration/echarts/index.ts
index d6144207..9b084cf5 100644
--- a/src/packages/chartConfiguration/echarts/index.ts
+++ b/src/packages/chartConfiguration/echarts/index.ts
@@ -1 +1,2 @@
-export * from './axis'
\ No newline at end of file
+export * from './axis'
+export * from './line'
\ No newline at end of file
diff --git a/src/packages/chartConfiguration/echarts/line.ts b/src/packages/chartConfiguration/echarts/line.ts
new file mode 100644
index 00000000..6716ecba
--- /dev/null
+++ b/src/packages/chartConfiguration/echarts/line.ts
@@ -0,0 +1,18 @@
+export const lineConf = {
+ lineStyle: {
+ type: [
+ {
+ label: 'solid',
+ value: 'solid'
+ },
+ {
+ label: 'dashed',
+ value: 'dashed'
+ },
+ {
+ label: 'dotted',
+ value: 'dotted'
+ }
+ ]
+ }
+}
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.vue b/src/packages/components/Charts/Bars/BarCommon/config.vue
index 130caf10..a4b866a4 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/config.vue
@@ -1,5 +1,5 @@
<template>
- <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
+ <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.vue b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
index 130caf10..a4b866a4 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
@@ -1,5 +1,5 @@
<template>
- <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
+ <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
<SettingItemBox name="图形">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index dc173278..95f44f03 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -5,7 +5,7 @@ import omit from 'lodash/omit'
export const includes = ['legend', 'xAxis', 'yAxis']
-const option = {
+export const option = {
tooltip: {
show: true,
trigger: 'axis',
@@ -30,34 +30,25 @@ const option = {
name: 'data1',
type: 'line',
lineStyle: {
- normal: {
- width: 3,
- color: {
- type: 'linear',
-
- colorStops: [
- {
- offset: 0,
- color: '#42a5f5' // 0% 处的颜色
- },
- {
- offset: 1,
- color: '#48D8BF' // 100% 处的颜色
- }
- ],
- globalCoord: false // 缺省为 false
- },
- shadowColor: 'rgba(68, 181, 226, 0.3)',
- shadowBlur: 5,
- shadowOffsetY: 20
- }
- },
- itemStyle: {
- normal: {
- color: '#fff',
- borderWidth: 10,
- borderColor: '#42a5f5'
- }
+ type: 'solid',
+ width: 3,
+ color: {
+ type: 'linear',
+ colorStops: [
+ {
+ offset: 0,
+ color: '#42a5f5' // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: '#48D8BF' // 100% 处的颜色
+ }
+ ],
+ globalCoord: false // 缺省为 false
+ },
+ shadowColor: 'rgba(68, 181, 226, 0.3)',
+ shadowBlur: 5,
+ shadowOffsetY: 20
},
data: [120, 200, 150, 80, 70, 110, 130]
}
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.vue b/src/packages/components/Charts/Lines/LineCommon/config.vue
index 44a7bc22..25b2aae8 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/config.vue
@@ -1,6 +1,87 @@
<template>
+ <CollapseItem
+ v-for="(item, index) in seriesList"
+ :key="index"
+ :name="`折线图-${index + 1}`"
+ :expanded="true"
+ >
+ <SettingItemBox name="线条">
+ <SettingItem name="颜色">
+ <n-color-picker
+ size="small"
+ :modes="['hex']"
+ v-model:value="item.lineStyle.color.colorStops[0].color"
+ />
+ </SettingItem>
+ <SettingItem name="颜色">
+ <n-color-picker
+ size="small"
+ :modes="['hex']"
+ v-model:value="item.lineStyle.color.colorStops[1].color"
+ />
+ </SettingItem>
+ <SettingItem name="宽度">
+ <n-input-number
+ v-model:value="item.lineStyle.width"
+ :min="1"
+ :max="100"
+ size="small"
+ placeholder="自动计算"
+ />
+ </SettingItem>
+ <SettingItem name="类型">
+ <n-select
+ v-model:value="item.lineStyle.type"
+ size="small"
+ :options="lineConf.lineStyle.type"
+ />
+ </SettingItem>
+ <SettingItem name="类型">
+ <n-select
+ v-model:value="item.lineStyle.type"
+ size="small"
+ :options="lineConf.lineStyle.type"
+ />
+ </SettingItem>
+ </SettingItemBox>
+ <SettingItemBox name="阴影">
+ <SettingItem name="颜色">
+ <n-color-picker
+ size="small"
+ :modes="['hex']"
+ v-model:value="item.lineStyle.shadowColor"
+ />
+ </SettingItem>
+ <SettingItem name="控制">
+ <n-button
+ size="small"
+ @click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
+ >
+ 去除阴影
+ </n-button>
+ </SettingItem>
+ </SettingItemBox>
+ </CollapseItem>
</template>
<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import {
+ CollapseItem,
+ SettingItemBox,
+ SettingItem
+} from '@/components/ChartItemSetting/index'
+import { option } from './config'
+const props = defineProps({
+ optionData: {
+ type: Object as PropType<typeof option>,
+ required: true
+ }
+})
+
+const seriesList = computed(() => {
+ return props.optionData.series
+})
</script>
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index 636a00dd..d45e8dd8 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -10,11 +10,7 @@ import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
-import {
- GridComponent,
- TooltipComponent,
- LegendComponent,
-} from 'echarts/components'
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
const props = defineProps({
themeSetting: {
@@ -36,10 +32,10 @@ use([
LineChart,
GridComponent,
TooltipComponent,
- LegendComponent,
+ LegendComponent
])
const option = computed(() => {
- return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
+ return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>