diff --git a/src/views/largeScreen/components/optionList.ts b/src/views/largeScreen/components/optionList.ts index 3c7c900..0daec3b 100644 --- a/src/views/largeScreen/components/optionList.ts +++ b/src/views/largeScreen/components/optionList.ts @@ -696,23 +696,29 @@ export const getInventoryOption = () => { }; export const getBarOptions = (data: any) => { const option = { - - legend: { - show: true, - top: '50%', - }, backgroundColor: '', grid: { left: '8%', - top: '4%', + top: '10%', // 顶部留一点空间给 legend bottom: '8%', right: '2%' }, + legend: { + data: ['现金流入', '现金流出'], // 与 series.name 对应 + top: '0%', + textStyle: { color: '#fff', fontSize: 12 } + }, tooltip: { show: true, backgroundColor: '', trigger: 'axis', - formatter: '{b0}:{c0}万元', + // formatter: '{b0}:{c0}万元', + formatter: (params: any) => { + // params 是数组,对应每条柱子 + return params + .map((p: any) => `${p.seriesName}:${p.value} 万元`) + .join('
'); + }, textStyle: { color: '#fff' }, @@ -788,6 +794,7 @@ export const getBarOptions = (data: any) => { // ], series: [ { + name: '现金流入', type: 'bar', data: data.value[0], // stack: '合并', @@ -826,6 +833,7 @@ export const getBarOptions = (data: any) => { } }, { + name: '现金流出', type: 'bar', data: data.value[1], // stack: '合并', @@ -859,8 +867,8 @@ export const getBarOptions = (data: any) => { formatter: '{c}', position: 'top', color: '#fff', - fontSize: 10 - // padding: 5 + fontSize: 10, + padding: 5 } } ] @@ -888,7 +896,9 @@ export const getBarOptions2 = (data: any) => { } }, tooltip: { - trigger: 'item' + trigger: 'item', + show: true + }, legend: { top: '5%',