feat: 折线图支持堆叠模式

This commit is contained in:
zxc 2024-09-14 22:20:03 +08:00
parent 50f4f8f0e7
commit dcd9429c81
3 changed files with 20 additions and 15 deletions

View File

@ -413,6 +413,7 @@ export default () => {
break break
case 'lineChart': case 'lineChart':
case 'line3DChart': case 'line3DChart':
if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stack = true
chartType = 'line' chartType = 'line'
break break
case 'areaChart': case 'areaChart':

View File

@ -8,17 +8,17 @@
<template v-if="['bar', 'column', 'area', 'line'].includes(handleChartElement.chartType)"> <template v-if="['bar', 'column', 'area', 'line'].includes(handleChartElement.chartType)">
<div class="row"> <div class="row">
<Checkbox
@update:value="value => updateOptions({ stack: value })"
:value="stack"
style="flex: 2;"
>堆叠样式</Checkbox>
<Checkbox <Checkbox
v-if="handleChartElement.chartType === 'line'" v-if="handleChartElement.chartType === 'line'"
@update:value="value => updateOptions({ lineSmooth: value })" @update:value="value => updateOptions({ lineSmooth: value })"
:value="lineSmooth" :value="lineSmooth"
style="flex: 3;"
>使用平滑曲线</Checkbox> >使用平滑曲线</Checkbox>
<Checkbox
v-if="['bar', 'column', 'area'].includes(handleChartElement.chartType)"
@update:value="value => updateOptions({ stack: value })"
:value="stack"
style="flex: 1;"
>堆叠样式</Checkbox>
</div> </div>
<Divider /> <Divider />

View File

@ -121,15 +121,19 @@ export const getChartOption = ({
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: data.series.map((item, index) => ({ series: data.series.map((item, index) => {
data: item, const seriesItem: echarts.SeriesOption = {
name: data.legends[index], data: item,
type: 'line', name: data.legends[index],
smooth: lineSmooth, type: 'line',
label: { smooth: lineSmooth,
show: true, label: {
}, show: true,
})), },
}
if (stack) seriesItem.stack = 'A'
return seriesItem
}),
} }
} }
if(type === 'pie') { if(type === 'pie') {