manager/my-spring
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
gaoxq
2026-03-23 18:49:30 +08:00
parent cc4bb9188b
commit 4ff69624cd
2 changed files with 431 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web-api/src/main/java/com/jeesite/modules/apps/web/ErpScreenController.java
View File

@@ -10,6 +10,7 @@ import org.springframework.web.bind.annotation.ResponseBody;
import java.math.BigDecimal; import java.math.BigDecimal;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.Collections;
import java.util.List; import java.util.List;
import java.util.Map; import java.util.Map;
import java.util.stream.Collectors; import java.util.stream.Collectors;
@@ -66,10 +67,10 @@ public class ErpScreenController {
ChartDataItem item = new ChartDataItem(); ChartDataItem item = new ChartDataItem();
item.setItemCode("CHART"); item.setItemCode("CHART");
item.setAxisName(accountName); item.setAxisName(accountName);
item.setValue01(map.get("sumValue01").toString()); item.setValue01(map.get("sumValue01").toString()); // 收入
item.setValue02(map.get("sumValue02").toString()); item.setValue02(map.get("sumValue02").toString()); // 支出
item.setValue03(map.get("sumValue03").toString()); item.setValue03(map.get("sumValue03").toString()); // 净利润
item.setBizKey(map.get("accountId").toString()); item.setBizKey(map.get("accountId").toString()); // 业务编号
chartDataItems.add(item); chartDataItems.add(item);
} }
return chartDataItems; return chartDataItems;
@@ -83,7 +84,7 @@ public class ErpScreenController {
public List<ChartDataItem> getErpMonthChart(ErpTransactionFlow erpTransactionFlow) { public List<ChartDataItem> getErpMonthChart(ErpTransactionFlow erpTransactionFlow) {
List<ChartDataItem> chartDataItems = new ArrayList<>(); List<ChartDataItem> chartDataItems = new ArrayList<>();
List<ErpTransactionFlow> flowList = erpTransactionFlowService.findList(erpTransactionFlow); List<ErpTransactionFlow> flowList = erpTransactionFlowService.findList(erpTransactionFlow);
Map<String, Map<String, Object>> accountMap = flowList.stream() Map<String, Map<String, Object>> monthMap = flowList.stream()
.collect(Collectors.groupingBy( .collect(Collectors.groupingBy(
ErpTransactionFlow::getMonthDate, ErpTransactionFlow::getMonthDate,
Collectors.collectingAndThen(Collectors.toList(), list -> { Collectors.collectingAndThen(Collectors.toList(), list -> {
@@ -105,15 +106,32 @@ public class ErpScreenController {
); );
}) })
)); ));
for (Map.Entry<String, Map<String, Object>> entry : accountMap.entrySet()) {
String monthDate = entry.getKey(); List<String> sortedMonths = new ArrayList<>(monthMap.keySet());
Map<String, Object> map = entry.getValue(); Collections.sort(sortedMonths);
for (int i = 0; i < sortedMonths.size(); i++) {
String currentMonth = sortedMonths.get(i);
Map<String, Object> current = monthMap.get(currentMonth);
BigDecimal income = (BigDecimal) current.get("sumValue01");
BigDecimal expend = (BigDecimal) current.get("sumValue02");
BigDecimal profitRate = (BigDecimal) current.get("sumValue03");
BigDecimal profit = (BigDecimal) current.get("sumValue04");
BigDecimal lastIncome = BigDecimal.ZERO;
BigDecimal lastExpend = BigDecimal.ZERO;
if (i > 0) {
String lastMonth = sortedMonths.get(i - 1);
Map<String, Object> lastData = monthMap.get(lastMonth);
lastIncome = (BigDecimal) lastData.get("sumValue01");
lastExpend = (BigDecimal) lastData.get("sumValue02");
}
ChartDataItem item = new ChartDataItem(); ChartDataItem item = new ChartDataItem();
item.setAxisName(monthDate); item.setAxisName(currentMonth);
item.setValue01(map.get("sumValue01").toString()); item.setValue01(income.toString()); // 本月收入
item.setValue02(map.get("sumValue02").toString()); item.setValue02(expend.toString()); // 本月支出
item.setValue03(map.get("sumValue03").toString()); item.setValue03(profitRate.toString()); // 利润率
item.setValue04(map.get("sumValue04").toString()); item.setValue04(profit.toString()); // 净利润
item.setValue05(lastIncome.toString()); // 上月收入
item.setValue06(lastExpend.toString()); // 上月支出
chartDataItems.add(item); chartDataItems.add(item);
} }
return chartDataItems; return chartDataItems;
@@ -156,10 +174,10 @@ public class ErpScreenController {
Map<String, Object> map = entry.getValue(); Map<String, Object> map = entry.getValue();
ChartDataItem item = new ChartDataItem(); ChartDataItem item = new ChartDataItem();
item.setAxisName(quarter); item.setAxisName(quarter);
item.setValue01(map.get("sumValue01").toString()); item.setValue01(map.get("sumValue01").toString()); // 收入
item.setValue02(map.get("sumValue02").toString()); item.setValue02(map.get("sumValue02").toString()); // 支出
item.setValue03(map.get("sumValue03").toString()); item.setValue03(map.get("sumValue03").toString()); // 占比
item.setValue04(map.get("sumValue04").toString()); item.setValue04(map.get("sumValue04").toString()); // 净利润
chartDataItems.add(item); chartDataItems.add(item);
} }
return chartDataItems; return chartDataItems;
@@ -202,8 +220,8 @@ public class ErpScreenController {
Map<String, Object> map = entry.getValue(); Map<String, Object> map = entry.getValue();
ChartDataItem item = new ChartDataItem(); ChartDataItem item = new ChartDataItem();
item.setAxisName(categoryName); item.setAxisName(categoryName);
item.setValue01(map.get("sumValue01").toString()); item.setValue01(map.get("sumValue01").toString()); // 收支金额
item.setValue02(map.get("sumValue02").toString()); item.setValue02(map.get("sumValue02").toString()); // 占比
chartDataItems.add(item); chartDataItems.add(item);
} }
return chartDataItems; return chartDataItems;

314
web-vue/packages/core/layouts/views/screen/welcome/Erp/components/ChartV09.vue
View File

@@ -7,47 +7,60 @@
</div> </div>
</template> </template>
<script setup> <script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue' import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts' import * as echarts from 'echarts';
// import { getItemInfoList } from '@/api/bizApi' import { ChartDataItem, ErpMonthChart } from '@jeesite/erp/api/erp/screen';
const props = defineProps({ const props = defineProps({
formParams: { formParams: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
} },
}); });
const vList = ref([]) const vList = ref<ChartDataItem[]>([]);
const chartRef = ref(null) const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance = null let chartInstance: echarts.ECharts | null = null;
const resizeHandler = () => chartInstance?.resize() const resizeHandler = () => chartInstance?.resize();
async function getList() { const parseAmount = (value?: string | number) => {
const parsed = Number(value ?? 0);
return Number.isFinite(parsed) ? parsed : 0;
};
const parseRate = (value?: string | number) => {
const parsed = Number(value ?? 0);
return Number.isFinite(parsed) ? Number(parsed.toFixed(2)) : 0;
};
async function getList() {
try { try {
const params = { const params = {
...props.formParams, ...props.formParams,
itemCode: 'ERP_YEARDATA_M001', };
} const res = await ErpMonthChart(params);
const res = await getItemInfoList(params) vList.value = res || [];
vList.value = res || []
} catch (error) { } catch (error) {
console.error(error) console.error(error);
vList.value = [] vList.value = [];
}
} }
}
function initChart() { function initChart() {
const el = chartRef.value const el = chartRef.value;
if (!el) return if (!el) return;
if (chartInstance) { if (chartInstance) {
chartInstance.dispose() chartInstance.dispose();
} }
chartInstance = echarts.init(el) chartInstance = echarts.init(el);
const baseOption = { const baseOption: echarts.EChartsOption & {
tooltip: echarts.TooltipComponentOption;
xAxis: Array<echarts.XAXisComponentOption & { data: string[] }>;
series: echarts.SeriesOption[];
} = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'cross' }, axisPointer: { type: 'cross' },
@@ -56,20 +69,20 @@ function initChart() {
borderWidth: 1, borderWidth: 1,
textStyle: { color: '#0a3b70' }, textStyle: { color: '#0a3b70' },
padding: [8, 12], padding: [8, 12],
borderRadius: 6 borderRadius: 6,
}, },
legend: { legend: {
top: '10', top: '10',
left: 'center', left: 'center',
textStyle: { fontSize: 12, color: '#e0e6ff' }, textStyle: { fontSize: 12, color: '#e0e6ff' },
data: ['收入', '支出', '占比', '上月收入', '上月支出', '收入环比', '支出环比', '本月净利润'] data: ['本月收入', '本月支出', '利润率', '上月收入', '上月支出', '收入环比', '支出环比', '净利润'],
}, },
grid: { grid: {
left: '5%', left: '5%',
right: '5%', right: '5%',
bottom: '10%', bottom: '10%',
top: '15%', top: '15%',
containLabel: true containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
@@ -78,11 +91,11 @@ function initChart() {
axisLabel: { axisLabel: {
fontSize: 11, fontSize: 11,
interval: 0, interval: 0,
color: '#b4c7e7' color: '#b4c7e7',
}, },
axisLine: { lineStyle: { color: '#1a508b' } }, axisLine: { lineStyle: { color: '#1a508b' } },
boundaryGap: true boundaryGap: true,
} },
], ],
yAxis: [ yAxis: [
{ {
@@ -91,7 +104,7 @@ function initChart() {
nameTextStyle: { fontSize: 12, color: '#b4c7e7' }, nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
axisLabel: { formatter: '{value}', color: '#b4c7e7' }, axisLabel: { formatter: '{value}', color: '#b4c7e7' },
axisLine: { lineStyle: { color: '#1a508b' } }, axisLine: { lineStyle: { color: '#1a508b' } },
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } } splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
}, },
{ {
type: 'value', type: 'value',
@@ -102,12 +115,12 @@ function initChart() {
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } }, splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
min: 'dataMin', min: 'dataMin',
max: 'dataMax', max: 'dataMax',
scale: true scale: true,
} },
], ],
series: [ series: [
{ {
name: '收入', name: '本月收入',
type: 'line', type: 'line',
yAxisIndex: 0, yAxisIndex: 0,
data: [], data: [],
@@ -118,16 +131,15 @@ function initChart() {
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(103, 194, 58, 0.3)' }, { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
{ offset: 1, color: 'rgba(103, 194, 58, 0.0)' } { offset: 1, color: 'rgba(103, 194, 58, 0.0)' },
]) ]),
}, },
emphasis: { emphasis: {
lineStyle: { width: 2 }, focus: 'series',
symbolSize: 7 },
}
}, },
{ {
name: '支出', name: '本月支出',
type: 'line', type: 'line',
yAxisIndex: 0, yAxisIndex: 0,
data: [], data: [],
@@ -138,16 +150,15 @@ function initChart() {
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(245, 108, 108, 0.3)' }, { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
{ offset: 1, color: 'rgba(245, 108, 108, 0.0)' } { offset: 1, color: 'rgba(245, 108, 108, 0.0)' },
]) ]),
}, },
emphasis: { emphasis: {
lineStyle: { width: 2 }, focus: 'series',
symbolSize: 7 },
}
}, },
{ {
name: '占比', name: '利润率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: [], data: [],
@@ -158,13 +169,12 @@ function initChart() {
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' }, { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
{ offset: 1, color: 'rgba(64, 158, 255, 0.0)' } { offset: 1, color: 'rgba(64, 158, 255, 0.0)' },
]) ]),
}, },
emphasis: { emphasis: {
lineStyle: { width: 2 }, focus: 'series',
symbolSize: 7 },
}
}, },
{ {
name: '上月收入', name: '上月收入',
@@ -178,13 +188,12 @@ function initChart() {
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(54, 207, 201, 0.3)' }, { offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
{ offset: 1, color: 'rgba(54, 207, 201, 0.0)' } { offset: 1, color: 'rgba(54, 207, 201, 0.0)' },
]) ]),
}, },
emphasis: { emphasis: {
lineStyle: { width: 2 }, focus: 'series',
symbolSize: 7 },
}
}, },
{ {
name: '上月支出', name: '上月支出',
@@ -198,13 +207,12 @@ function initChart() {
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(230, 162, 60, 0.3)' }, { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
{ offset: 1, color: 'rgba(230, 162, 60, 0.0)' } { offset: 1, color: 'rgba(230, 162, 60, 0.0)' },
]) ]),
}, },
emphasis: { emphasis: {
lineStyle: { width: 2 }, focus: 'series',
symbolSize: 7 },
}
}, },
{ {
name: '收入环比', name: '收入环比',
@@ -218,13 +226,12 @@ function initChart() {
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(114, 46, 209, 0.3)' }, { offset: 0, color: 'rgba(114, 46, 209, 0.3)' },
{ offset: 1, color: 'rgba(114, 46, 209, 0.0)' } { offset: 1, color: 'rgba(114, 46, 209, 0.0)' },
]) ]),
}, },
emphasis: { emphasis: {
lineStyle: { width: 2 }, focus: 'series',
symbolSize: 7 },
}
}, },
{ {
name: '支出环比', name: '支出环比',
@@ -238,16 +245,15 @@ function initChart() {
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(235, 47, 150, 0.3)' }, { offset: 0, color: 'rgba(235, 47, 150, 0.3)' },
{ offset: 1, color: 'rgba(235, 47, 150, 0.0)' } { offset: 1, color: 'rgba(235, 47, 150, 0.0)' },
]) ]),
}, },
emphasis: { emphasis: {
lineStyle: { width: 2 }, focus: 'series',
symbolSize: 7 },
}
}, },
{ {
name: '本月净利润', name: '净利润',
type: 'bar', type: 'bar',
yAxisIndex: 0, yAxisIndex: 0,
data: [], data: [],
@@ -255,56 +261,56 @@ function initChart() {
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FF9D28' }, { offset: 0, color: '#FF9D28' },
{ offset: 1, color: '#FAAD14' } { offset: 1, color: '#FAAD14' },
]), ]),
borderRadius: [8, 8, 0, 0] borderRadius: [8, 8, 0, 0],
}, },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
fontSize: 10, fontSize: 10,
color: '#fff', color: '#fff',
formatter: '{c}' formatter: '{c}',
} },
} },
] ],
} };
if (vList.value.length > 0) { if (vList.value.length > 0) {
const xData = vList.value.map(item => { const xData = vList.value.map((item) => {
const xaxis = item.xaxis || '' const xaxis = item.axisName || '';
return xaxis.includes('月') ? xaxis : `${xaxis}月`; return xaxis.includes('月') ? xaxis : `${xaxis}月`;
}) });
const incomeYuan = vList.value.map(item => Number(item.index01 || 0)) const incomeYuan = vList.value.map((item) => parseAmount(item.value01));
const expenseYuan = vList.value.map(item => Number(item.index02 || 0)) const expenseYuan = vList.value.map((item) => parseAmount(item.value02));
const rate = vList.value.map(item => Number(item.index03 || 0).toFixed(2)) const rate = vList.value.map((item) => parseRate(item.value03));
const lastMonthIncomeYuan = vList.value.map(item => Number(item.index04 || 0)) const netProfitYuan = vList.value.map((item) => parseAmount(item.value04));
const lastMonthExpenseYuan = vList.value.map(item => Number(item.index05 || 0)) const lastMonthIncomeYuan = vList.value.map((item) => parseAmount(item.value05));
const netProfitYuan = vList.value.map(item => (Number(item.index01 || 0) - Number(item.index02 || 0)).toFixed(2)) const lastMonthExpenseYuan = vList.value.map((item) => parseAmount(item.value06));
const incomeRingRatio = vList.value.map((item, idx) => { const incomeRingRatio = vList.value.map((item, idx) => {
const lastVal = lastMonthIncomeYuan[idx] const lastVal = lastMonthIncomeYuan[idx];
const currVal = incomeYuan[idx] || 0 const currVal = incomeYuan[idx] || 0;
return lastVal === 0 ? '0.00' : ((currVal - lastVal) / lastVal * 100).toFixed(2) return lastVal === 0 ? 0 : Number((((currVal - lastVal) / lastVal) * 100).toFixed(2));
}) });
const expenseRingRatio = vList.value.map((item, idx) => { const expenseRingRatio = vList.value.map((item, idx) => {
const lastVal = lastMonthExpenseYuan[idx] const lastVal = lastMonthExpenseYuan[idx];
const currVal = expenseYuan[idx] || 0 const currVal = expenseYuan[idx] || 0;
return lastVal === 0 ? '0.00' : ((currVal - lastVal) / lastVal * 100).toFixed(2) return lastVal === 0 ? 0 : Number((((currVal - lastVal) / lastVal) * 100).toFixed(2));
}) });
const incomeWan = incomeYuan.map(val => (val / 10000).toFixed(2)) const incomeWan = incomeYuan.map((val) => Number((val / 10000).toFixed(2)));
const expenseWan = expenseYuan.map(val => (val / 10000).toFixed(2)) const expenseWan = expenseYuan.map((val) => Number((val / 10000).toFixed(2)));
const lastMonthIncomeWan = lastMonthIncomeYuan.map(val => (val / 10000).toFixed(2)) const lastMonthIncomeWan = lastMonthIncomeYuan.map((val) => Number((val / 10000).toFixed(2)));
const lastMonthExpenseWan = lastMonthExpenseYuan.map(val => (val / 10000).toFixed(2)) const lastMonthExpenseWan = lastMonthExpenseYuan.map((val) => Number((val / 10000).toFixed(2)));
const netProfitWan = netProfitYuan.map(val => (val / 10000).toFixed(2)) const netProfitWan = netProfitYuan.map((val) => Number((val / 10000).toFixed(2)));
baseOption.tooltip.formatter = function (params) { baseOption.tooltip.formatter = function (params) {
const title = params[0].axisValue const title = params[0].axisValue;
const idx = params[0].dataIndex const idx = params[0].dataIndex;
return ` return `
<div style="text-align:center; font-weight:bold; margin-bottom:6px">${title}</div> <div style="text-align:center; font-weight:bold; margin-bottom:6px">${title}</div>
<table style="width:100%; border-collapse:collapse; text-align:center"> <table style="width:100%; border-collapse:collapse; text-align:center">
<tr> <tr>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月收入(元)</td> <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月收入(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月支出(元)</td> <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月支出(元)</td>
@@ -312,7 +318,7 @@ function initChart() {
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">上月支出(元)</td> <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">上月支出(元)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">收入环比(%)</td> <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">收入环比(%)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出环比(%)</td> <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出环比(%)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">占比(%)</td> <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">利润率(%)</td>
<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">净利润(元)</td> <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">净利润(元)</td>
</tr> </tr>
<tr> <tr>
@@ -325,62 +331,66 @@ function initChart() {
<td style="border:1px solid #409EFF; padding:4px">${rate[idx]}</td> <td style="border:1px solid #409EFF; padding:4px">${rate[idx]}</td>
<td style="border:1px solid #409EFF; padding:4px">${netProfitYuan[idx]}</td> <td style="border:1px solid #409EFF; padding:4px">${netProfitYuan[idx]}</td>
</tr> </tr>
</table> </table>
` `;
};
baseOption.xAxis[0].data = xData;
baseOption.series[0].data = incomeWan;
baseOption.series[1].data = expenseWan;
baseOption.series[2].data = rate;
baseOption.series[3].data = lastMonthIncomeWan;
baseOption.series[4].data = lastMonthExpenseWan;
baseOption.series[5].data = incomeRingRatio;
baseOption.series[6].data = expenseRingRatio;
baseOption.series[7].data = netProfitWan;
} }
baseOption.xAxis[0].data = xData chartInstance.setOption(baseOption, true);
baseOption.series[0].data = incomeWan
baseOption.series[1].data = expenseWan
baseOption.series[2].data = rate
baseOption.series[3].data = lastMonthIncomeWan
baseOption.series[4].data = lastMonthExpenseWan
baseOption.series[5].data = incomeRingRatio
baseOption.series[6].data = expenseRingRatio
baseOption.series[7].data = netProfitWan
} }
chartInstance.setOption(baseOption, true) watch(
}
watch(
() => props.formParams, () => props.formParams,
() => { () => {
getList() getList();
}, },
{ deep: true, immediate: true } { deep: true, immediate: true },
) );
watch(vList, () => { watch(
nextTick(() => initChart()) vList,
}, { deep: true }) () => {
nextTick(() => initChart());
},
{ deep: true },
);
onMounted(() => { onMounted(() => {
initChart() initChart();
window.addEventListener('resize', resizeHandler) window.addEventListener('resize', resizeHandler);
}) });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', resizeHandler) window.removeEventListener('resize', resizeHandler);
if (chartInstance) { if (chartInstance) {
chartInstance.dispose() chartInstance.dispose();
chartInstance = null chartInstance = null;
} }
}) });
</script> </script>
<style scoped> <style scoped>
.chart-card { .chart-card {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat; background: rgba(0, 0, 0, 0.1) url('@jeesite/assets/chart/box/16.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.chart-card-header { .chart-card-header {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding: 0 16px; padding: 0 16px;
@@ -388,29 +398,29 @@ onUnmounted(() => {
border-bottom: 1px solid #1a508b; border-bottom: 1px solid #1a508b;
display: flex; display: flex;
align-items: center; align-items: center;
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/14.png") no-repeat; background: rgba(0, 0, 0, 0.1) url('@jeesite/assets/chart/title/14.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.chart-card-title { .chart-card-title {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #409EFF; color: #409eff;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.bar-line-chart-container { .bar-line-chart-container {
flex: 1; flex: 1;
width: 100%; width: 100%;
height: calc(100% - 40px); height: calc(100% - 40px);
} }
:deep(.echarts-tooltip) { :deep(.echarts-tooltip) {
background-color: rgba(145, 200, 255, 0.9) !important; background-color: rgba(145, 200, 255, 0.9) !important;
border-color: #409EFF !important; border-color: #409eff !important;
color: #0a3b70 !important; color: #0a3b70 !important;
border-radius: 6px !important; border-radius: 6px !important;
white-space: nowrap !important; white-space: nowrap !important;
max-width: none !important; max-width: none !important;
} }
</style> </style>