diff --git a/src/components/common/echartCard/echartsOptions.ts b/src/components/common/echartCard/echartsOptions.ts index 922bfd65..8ebf6e90 100644 --- a/src/components/common/echartCard/echartsOptions.ts +++ b/src/components/common/echartCard/echartsOptions.ts @@ -243,48 +243,49 @@ const barChart = ( option.color = color; } // 配置series - const len = series?.length ?? 0; - option.series = - series?.map((item: any) => { - // 设置type - if (!Reflect.has(item, 'type')) { - item.type = 'bar'; - } - // 设置柱子宽度 - item.barMaxWidth = '24px'; - // if (!Reflect.has(item, 'barMaxWidth')) { - // item.barMaxWidth = '30px'; - // } - // 1、柱子之间的距离 - item.barGap = '0'; - // 2、堆叠柱子宽度 - // if (item.stack === 'total') { - // item.barMaxWidth = '30px'; - // } - // 3、多个并列柱子 增加背景颜色 - if (len > 1 && item.stack !== 'total') { - item.showBackground = true; - item.backgroundStyle = { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgba(160, 207, 255, 0.18)', - }, - { - offset: 1, - color: 'rgba(160, 207, 255, 0.05)', - }, - ]), - }; - } else { - item.showBackground = false; - } - return item; - }) ?? []; + const filteredSeries = (series || []).filter(Boolean); + const len = filteredSeries.length; + option.series = filteredSeries.map((item: any) => { + // 设置type + if (!Reflect.has(item, 'type')) { + item.type = 'bar'; + } + // 设置柱子宽度 + item.barMaxWidth = '24px'; + // if (!Reflect.has(item, 'barMaxWidth')) { + // item.barMaxWidth = '30px'; + // } + // 1、柱子之间的距离 + item.barGap = '0'; + // 2、堆叠柱子宽度 + // if (item.stack === 'total') { + // item.barMaxWidth = '30px'; + // } + // 3、多个并列柱子 增加背景颜色 + if (len > 1 && item.stack !== 'total') { + item.showBackground = true; + item.backgroundStyle = { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(160, 207, 255, 0.18)', + }, + { + offset: 1, + color: 'rgba(160, 207, 255, 0.05)', + }, + ]), + }; + } else { + item.showBackground = false; + } + return item; + }); if (option) { myChart[id].setOption(option); } }; + const pieChart = ( id: string, { series, color, title, tooltip, legend, grid }: any, @@ -367,44 +368,44 @@ const pieChart = ( } } - option.series = - series.map((item: any) => { - const seriesObj = { - name: item.name, - type: 'pie', - radius: item.radius || ['40%', '70%'], - center: item.center ? item.center : ['50%', '60%'], - avoidLabelOverlap: false, - itemStyle: item.itemStyle || { - borderRadius: 5, - borderColor: commonEchartColor[isDark ? 'dark' : 'light'].tooltipBgColor, - borderWidth: 2, + option.series = (series || []).filter(Boolean).map((item: any) => { + const seriesObj = { + name: item.name || '', + type: 'pie', + radius: item.radius || ['40%', '70%'], + center: item.center ? item.center : ['50%', '60%'], + avoidLabelOverlap: false, + itemStyle: item.itemStyle || { + borderRadius: 5, + borderColor: commonEchartColor[isDark ? 'dark' : 'light'].tooltipBgColor, + borderWidth: 2, + }, + label: item.label || { + show: false, + position: 'center', + }, + emphasis: item.emphasis || { + label: { + show: true, + fontSize: 40, + fontWeight: 'bold', }, - label: item.label || { - show: false, - position: 'center', - }, - emphasis: item.emphasis || { - label: { - show: true, - fontSize: 40, - fontWeight: 'bold', - }, - }, - labelLine: item.labelLine || { - show: false, - }, - data: item.data, - }; - if (!Reflect.has(item, 'type')) { - seriesObj.type = 'pie'; - } - return seriesObj; - }) ?? []; + }, + labelLine: item.labelLine || { + show: false, + }, + data: item.data || [], + }; + if (!Reflect.has(item, 'type')) { + seriesObj.type = 'pie'; + } + return seriesObj; + }); if (option) { myChart[id].setOption(option); } }; + const lineChart = ( id: string, { title, tooltip, legend, grid, xAxis, yAxis, series, color, dataZoom, zoomShowNum = 5 }: any, @@ -490,13 +491,12 @@ const lineChart = ( if (color) { option.color = color; } - option.series = - series.map((item: any) => { - if (!Reflect.has(item, 'type')) { - item.type = 'line'; - } - return item; - }) ?? []; + option.series = (series || []).filter(Boolean).map((item: any) => { + if (!Reflect.has(item, 'type')) { + item.type = 'line'; + } + return item; + }); if (option) { myChart[id].setOption(option); }