项目初始化
This commit is contained in:
@@ -261,6 +261,63 @@ public class ErpScreenController {
|
||||
return chartDataItems;
|
||||
}
|
||||
|
||||
@RequestMapping(value = "getErpYearChart")
|
||||
@ResponseBody
|
||||
public List<ChartDataItem> getErpYearChart(ErpTransactionFlow erpTransactionFlow) {
|
||||
List<ChartDataItem> chartDataItems = new ArrayList<>();
|
||||
List<ErpTransactionFlow> flowList = erpTransactionFlowService.findList(erpTransactionFlow);
|
||||
Map<String, Map<String, Object>> yearMap = flowList.stream()
|
||||
.collect(Collectors.groupingBy(
|
||||
ErpTransactionFlow::getYearDate, // 这里改成年
|
||||
Collectors.collectingAndThen(Collectors.toList(), list -> {
|
||||
BigDecimal sumValue01 = list.stream()
|
||||
.filter(flow -> flow.getFlowType().equals("2"))
|
||||
.map(ErpTransactionFlow::getAmount)
|
||||
.reduce(BigDecimal.ZERO, BigDecimal::add);
|
||||
BigDecimal sumValue02 = list.stream()
|
||||
.filter(flow -> flow.getFlowType().equals("1"))
|
||||
.map(ErpTransactionFlow::getAmount)
|
||||
.reduce(BigDecimal.ZERO, BigDecimal::add);
|
||||
BigDecimal sumValue04 = BigDecimalUtils.subtract(sumValue01, sumValue02);
|
||||
BigDecimal sumValue03 = BigDecimalUtils.percent(sumValue04, sumValue01);
|
||||
return Map.of(
|
||||
"sumValue01", sumValue01,
|
||||
"sumValue02", sumValue02,
|
||||
"sumValue03", sumValue03,
|
||||
"sumValue04", sumValue04
|
||||
);
|
||||
})
|
||||
));
|
||||
List<String> sortedYears = new ArrayList<>(yearMap.keySet());
|
||||
Collections.sort(sortedYears);
|
||||
for (int i = 0; i < sortedYears.size(); i++) {
|
||||
String currentYear = sortedYears.get(i);
|
||||
Map<String, Object> current = yearMap.get(currentYear);
|
||||
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 lastYear = sortedYears.get(i - 1);
|
||||
Map<String, Object> lastData = yearMap.get(lastYear);
|
||||
lastIncome = (BigDecimal) lastData.get("sumValue01");
|
||||
lastExpend = (BigDecimal) lastData.get("sumValue02");
|
||||
}
|
||||
ChartDataItem item = new ChartDataItem();
|
||||
item.setAxisName(currentYear); // 年份作为X轴
|
||||
item.setValue01(income.toString()); // 本年收入
|
||||
item.setValue02(expend.toString()); // 本年支出
|
||||
item.setValue03(profitRate.toString()); // 利润率
|
||||
item.setValue04(profit.toString()); // 净利润
|
||||
item.setValue05(lastIncome.toString()); // 上年收入
|
||||
item.setValue06(lastExpend.toString()); // 上年支出
|
||||
chartDataItems.add(item);
|
||||
}
|
||||
return chartDataItems;
|
||||
}
|
||||
|
||||
/**
|
||||
* 季度收支
|
||||
*/
|
||||
|
||||
@@ -7,234 +7,315 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
// import { getItemInfoList } from '@/api/bizApi'
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { ChartDataItem, ErpYearChart } from '@jeesite/erp/api/erp/screen';
|
||||
|
||||
const vList = ref([])
|
||||
const chartRef = ref(null)
|
||||
let chartInstance = null
|
||||
const vList = ref<ChartDataItem[]>([]);
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
const resizeHandler = () => {
|
||||
chartInstance?.resize()
|
||||
}
|
||||
const parseAmount = (value?: string | number) => {
|
||||
const parsed = Number(value ?? 0);
|
||||
return Number.isFinite(parsed) ? parsed : 0;
|
||||
};
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const params = {
|
||||
itemCode: 'ERP_YEARPMOM_M001',
|
||||
const parseRate = (value?: string | number) => {
|
||||
const parsed = Number(value ?? 0);
|
||||
return Number.isFinite(parsed) ? Number(parsed.toFixed(2)) : 0;
|
||||
};
|
||||
|
||||
const resizeHandler = () => {
|
||||
chartInstance?.resize();
|
||||
};
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const res = await ErpYearChart({});
|
||||
vList.value = res || [];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
vList.value = [];
|
||||
}
|
||||
const res = await getItemInfoList(params)
|
||||
vList.value = res || []
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
vList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
const el = chartRef.value
|
||||
if (!el) return
|
||||
|
||||
if (!chartInstance) {
|
||||
chartInstance = echarts.init(el)
|
||||
}
|
||||
|
||||
const xData = vList.value.map(item => item.xaxis || '')
|
||||
const index01Yuan = vList.value.map(item => item.index01 || 0)
|
||||
const index02Yuan = vList.value.map(item => item.index02 || 0)
|
||||
const index03 = vList.value.map(item => item.index03 || 0)
|
||||
const index04 = vList.value.map(item => item.index04 || 0)
|
||||
function initChart() {
|
||||
const el = chartRef.value;
|
||||
if (!el) return;
|
||||
|
||||
const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
|
||||
const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
|
||||
if (!chartInstance) {
|
||||
chartInstance = echarts.init(el);
|
||||
}
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70' },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6,
|
||||
formatter: params => {
|
||||
const idx = params[0].dataIndex
|
||||
return `
|
||||
<div style="text-align:center;font-weight:bold;margin-bottom:6px">${params[0].axisValue}</div>
|
||||
<table style="width:100%;border-collapse:collapse;text-align:center">
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${index01Yuan[idx]}</td>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${index02Yuan[idx]}</td>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${index03[idx]}</td>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${index04[idx]}</td>
|
||||
</tr>
|
||||
</table>`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 12, color: '#e0e6ff' },
|
||||
data: ['收入', '支出', '利润率', '占比']
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: { fontSize: 11, interval: 0, color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
boundaryGap: true
|
||||
}],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额 (万元)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '比率 (%)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
scale: true
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: index01Wan,
|
||||
barWidth: '10%',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
||||
{ offset:0, color:'#85E868' },
|
||||
{ offset:1, color:'#67C23A' }
|
||||
]),
|
||||
borderRadius: [8,8,0,0]
|
||||
const xData = vList.value.map((item) => {
|
||||
const axisName = item.axisName || '';
|
||||
return axisName.includes('年') ? axisName : `${axisName}年`;
|
||||
});
|
||||
const currentIncomeYuan = vList.value.map((item) => parseAmount(item.value01));
|
||||
const currentExpenseYuan = vList.value.map((item) => parseAmount(item.value02));
|
||||
const profitRate = vList.value.map((item) => parseRate(item.value03));
|
||||
const netProfitYuan = vList.value.map((item) => parseAmount(item.value04));
|
||||
const lastYearIncomeYuan = vList.value.map((item) => parseAmount(item.value05));
|
||||
const lastYearExpenseYuan = vList.value.map((item) => parseAmount(item.value06));
|
||||
|
||||
const currentIncomeWan = currentIncomeYuan.map((val) => Number((val / 10000).toFixed(2)));
|
||||
const currentExpenseWan = currentExpenseYuan.map((val) => Number((val / 10000).toFixed(2)));
|
||||
const netProfitWan = netProfitYuan.map((val) => Number((val / 10000).toFixed(2)));
|
||||
const lastYearIncomeWan = lastYearIncomeYuan.map((val) => Number((val / 10000).toFixed(2)));
|
||||
const lastYearExpenseWan = lastYearExpenseYuan.map((val) => Number((val / 10000).toFixed(2)));
|
||||
|
||||
const option: echarts.EChartsOption & {
|
||||
tooltip: echarts.TooltipComponentOption;
|
||||
xAxis: Array<echarts.XAXisComponentOption & { data: string[] }>;
|
||||
series: echarts.SeriesOption[];
|
||||
} = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
||||
borderColor: '#409EFF',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#0a3b70' },
|
||||
padding: [8, 12],
|
||||
borderRadius: 6,
|
||||
formatter: (params) => {
|
||||
const idx = params[0].dataIndex;
|
||||
return `
|
||||
<div style="text-align:center;font-weight:bold;margin-bottom:6px">${params[0].axisValue}</div>
|
||||
<table style="width:100%;border-collapse:collapse;text-align:center">
|
||||
<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>
|
||||
<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>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${currentIncomeYuan[idx]}</td>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${currentExpenseYuan[idx]}</td>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${profitRate[idx]}</td>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${netProfitYuan[idx]}</td>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${lastYearIncomeYuan[idx]}</td>
|
||||
<td style="border:1px solid #409EFF;padding:4px">${lastYearExpenseYuan[idx]}</td>
|
||||
</tr>
|
||||
</table>`;
|
||||
},
|
||||
label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: index02Wan,
|
||||
barWidth: '10%',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
||||
{ offset:0, color:'#FF8A8A' },
|
||||
{ offset:1, color:'#F56C6C' }
|
||||
]),
|
||||
borderRadius: [8,8,0,0]
|
||||
legend: {
|
||||
top: '10',
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 12, color: '#e0e6ff' },
|
||||
data: ['本年收入', '本年支出', '利润率', '净利润', '上年收入', '上年支出'],
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: { fontSize: 11, interval: 0, color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
boundaryGap: true,
|
||||
},
|
||||
label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
|
||||
},
|
||||
{
|
||||
name: '利润率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: index03,
|
||||
smooth: true,
|
||||
lineStyle: { width:1.5, color:'#FCC367' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
label: { show:true, position:'outside', fontSize:10, color:'#FCC367', formatter:'{c}', offset:[0,-5] },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
||||
{ offset:0, color:'rgba(252,195,103,0.3)' },
|
||||
{ offset:1, color:'rgba(252,195,103,0)' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '占比',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: index04,
|
||||
smooth: true,
|
||||
lineStyle: { width:1.5, color:'#409EFF' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
label: { show:true, position:'outside', fontSize:10, color:'#409EFF', formatter:'{c}', offset:[0,-5] },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
||||
{ offset:0, color:'rgba(64,158,255,0.3)' },
|
||||
{ offset:1, color:'rgba(64,158,255,0)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额 (万元)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value}', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '利润率 (%)',
|
||||
nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
|
||||
axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
|
||||
axisLine: { lineStyle: { color: '#1a508b' } },
|
||||
splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
scale: true,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '本年收入',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: currentIncomeWan,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#67C23A',
|
||||
},
|
||||
lineStyle: { width: 2, color: '#67C23A' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
label: { show: true, position: 'top', fontSize: 10, color: '#fff', formatter: '{c}' },
|
||||
emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
|
||||
blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(103,194,58,0.22)' },
|
||||
{ offset: 1, color: 'rgba(103,194,58,0)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '本年支出',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: currentExpenseWan,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#F56C6C',
|
||||
},
|
||||
lineStyle: { width: 2, color: '#F56C6C' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
label: { show: true, position: 'top', fontSize: 10, color: '#fff', formatter: '{c}' },
|
||||
emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
|
||||
blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(245,108,108,0.2)' },
|
||||
{ offset: 1, color: 'rgba(245,108,108,0)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '利润率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: profitRate,
|
||||
smooth: true,
|
||||
lineStyle: { width: 1.5, color: '#FCC367' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
label: { show: true, position: 'top', fontSize: 10, color: '#FCC367', formatter: '{c}', offset: [0, -5] },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(252,195,103,0.3)' },
|
||||
{ offset: 1, color: 'rgba(252,195,103,0)' },
|
||||
]),
|
||||
},
|
||||
emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
|
||||
blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
|
||||
},
|
||||
{
|
||||
name: '净利润',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: netProfitWan,
|
||||
smooth: true,
|
||||
lineStyle: { width: 1.5, color: '#409EFF' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
label: { show: true, position: 'top', fontSize: 10, color: '#409EFF', formatter: '{c}', offset: [0, -5] },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(64,158,255,0.3)' },
|
||||
{ offset: 1, color: 'rgba(64,158,255,0)' },
|
||||
]),
|
||||
},
|
||||
emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
|
||||
blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
|
||||
},
|
||||
{
|
||||
name: '上年收入',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: lastYearIncomeWan,
|
||||
smooth: true,
|
||||
lineStyle: { width: 1.5, color: '#36CFC9' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
label: { show: true, position: 'top', fontSize: 10, color: '#36CFC9', formatter: '{c}', offset: [0, -5] },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(54,207,201,0.25)' },
|
||||
{ offset: 1, color: 'rgba(54,207,201,0)' },
|
||||
]),
|
||||
},
|
||||
emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
|
||||
blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
|
||||
},
|
||||
{
|
||||
name: '上年支出',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: lastYearExpenseWan,
|
||||
smooth: true,
|
||||
lineStyle: { width: 1.5, color: '#FF9D28' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
label: { show: true, position: 'top', fontSize: 10, color: '#FF9D28', formatter: '{c}', offset: [0, -5] },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255,157,40,0.25)' },
|
||||
{ offset: 1, color: 'rgba(255,157,40,0)' },
|
||||
]),
|
||||
},
|
||||
emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
|
||||
blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chartInstance.setOption(option, true);
|
||||
}
|
||||
|
||||
chartInstance.setOption(option, true)
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getList();
|
||||
initChart();
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
initChart()
|
||||
window.addEventListener('resize', resizeHandler)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeHandler)
|
||||
chartInstance?.dispose()
|
||||
chartInstance = null
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeHandler);
|
||||
chartInstance?.dispose();
|
||||
chartInstance = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/03.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409EFF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.bar-line-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
.chart-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url('@jeesite/assets/chart/box/16.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.chart-card-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: rgba(26, 80, 139, 0.5);
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url('@jeesite/assets/chart/title/03.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.bar-line-chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -52,6 +52,9 @@ export interface ChartDataItem extends BasicModel<ChartDataItem> {
|
||||
indexMin: number; // 指标最小
|
||||
}
|
||||
|
||||
export const ErpYearChart = (params?: ErpTransactionFlow | any) =>
|
||||
defHttp.get<ChartDataItem[]>({ url: adminPath + '/erp/screen/getErpYearChart', params });
|
||||
|
||||
export const ErpMonthChart = (params?: ErpTransactionFlow | any) =>
|
||||
defHttp.get<ChartDataItem[]>({ url: adminPath + '/erp/screen/getErpMonthChart', params });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user