diff --git a/src/views/crm/statistics/funnel/components/BusinessInversionRateSummary.vue b/src/views/crm/statistics/funnel/components/BusinessInversionRateSummary.vue index 47d53557..541d6fc4 100644 --- a/src/views/crm/statistics/funnel/components/BusinessInversionRateSummary.vue +++ b/src/views/crm/statistics/funnel/components/BusinessInversionRateSummary.vue @@ -134,81 +134,109 @@ watch( ) /** 柱状图配置:纵向 */ const echartsOption = reactive({ - grid: { - left: 30, - right: 30, // 让 X 轴右侧显示完整 - bottom: 20, - containLabel: true + color: ['#6ca2ff', '#6ac9d7', '#ff7474'], + tooltip: { + trigger: 'axis', + axisPointer: { + // 坐标轴指示器,坐标轴触发有效 + type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' + } }, - legend: {}, + legend: { + data: ['赢单转化率', '商机总数', '赢单商机数'], + bottom: '0px', + itemWidth: 14 + }, + grid: { + top: '40px', + left: '40px', + right: '40px', + bottom: '40px', + containLabel: true, + borderColor: '#fff' + }, + xAxis: [ + { + type: 'category', + data: [], + axisTick: { + alignWithLabel: true, + lineStyle: { width: 0 } + }, + axisLabel: { + color: '#BDBDBD' + }, + /** 坐标轴轴线相关设置 */ + axisLine: { + lineStyle: { color: '#BDBDBD' } + }, + splitLine: { + show: false + } + } + ], + yAxis: [ + { + type: 'value', + name: '赢单转化率', + axisTick: { + alignWithLabel: true, + lineStyle: { width: 0 } + }, + axisLabel: { + color: '#BDBDBD', + formatter: '{value}%' + }, + /** 坐标轴轴线相关设置 */ + axisLine: { + lineStyle: { color: '#BDBDBD' } + }, + splitLine: { + show: false + } + }, + { + type: 'value', + name: '商机数', + axisTick: { + alignWithLabel: true, + lineStyle: { width: 0 } + }, + axisLabel: { + color: '#BDBDBD', + formatter: '{value}个' + }, + /** 坐标轴轴线相关设置 */ + axisLine: { + lineStyle: { color: '#BDBDBD' } + }, + splitLine: { + show: false + } + } + ], series: [ + { + name: '赢单转化率', + type: 'line', + yAxisIndex: 0, + data: [] + }, { name: '商机总数', type: 'bar', - yAxisIndex: 0, + yAxisIndex: 1, + barWidth: 15, data: [] }, { name: '赢单商机数', type: 'bar', yAxisIndex: 1, - data: [] - }, - { - name: '赢单转化率', - type: 'bar', - yAxisIndex: 2, + barWidth: 15, data: [] } - ], - toolbox: { - feature: { - dataZoom: { - xAxisIndex: false // 数据区域缩放:Y 轴不缩放 - }, - brush: { - type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮 - }, - saveAsImage: { show: true, name: '商机转化率分析' } // 保存为图片 - } - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - yAxis: [ - { - type: 'value', - name: '商机总数', - min: 0, - minInterval: 1 // 显示整数刻度 - }, - { - type: 'value', - name: '赢单商机数', - min: 0, - minInterval: 1 // 显示整数刻度 - }, - { - type: 'value', - name: '赢单转化率', - min: 0, - minInterval: 1, // 显示整数刻度 - splitLine: { - lineStyle: { - type: 'dotted', // 右侧网格线虚化, 减少混乱 - opacity: 0.7 - } - } - } - ], - xAxis: { - type: 'category', - name: '日期', - data: [] - } + ] }) as EChartsOption /** 获取数据并填充图表 */ @@ -218,27 +246,28 @@ const fetchAndFill = async () => { props.queryParams ) // 2.1 更新 Echarts 数据 - if (echartsOption.xAxis && echartsOption.xAxis['data']) { - echartsOption.xAxis['data'] = businessSummaryByDate.map( + if (echartsOption.xAxis && echartsOption.xAxis[0] && echartsOption.xAxis[0]['data']) { + echartsOption.xAxis[0]['data'] = businessSummaryByDate.map( (s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.time ) } if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) { echartsOption.series[0]['data'] = businessSummaryByDate.map( - (s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessCount - ) - } - if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) { - echartsOption.series[1]['data'] = businessSummaryByDate.map( - (s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessWinCount - ) - } - if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) { - echartsOption.series[2]['data'] = businessSummaryByDate.map( (s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => erpCalculatePercentage(s.businessWinCount, s.businessCount) ) } + if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) { + echartsOption.series[1]['data'] = businessSummaryByDate.map( + (s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessCount + ) + } + if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) { + echartsOption.series[2]['data'] = businessSummaryByDate.map( + (s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessWinCount + ) + } + // 2.2 更新列表数据 await getList() }