<template>
	<div class="datasub">
		<div class="datasub-left">
			<div class="left">
				<div class="left-title">
					<img src="./assets/icon01.png" alt="" />
					<div class="tit">资助领域分布情况</div>
					<el-select v-model="value1" placeholder="Select" class="select">
						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="left-main">
					<div class="left-main-echarts" ref="leftChartRef"></div>
				</div>
			</div>
			<div class="left">
				<div class="left-title">
					<img src="./assets/icon03.png" alt="" />
					<div class="tit">机构资助领域情况</div>
					<el-select v-model="value2" placeholder="Select" class="select">
						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
                <div class="left-main1">
                    <div class="left-sankey-echarts" ref="leftSankeyRef"></div>
                </div>
			</div>
		</div>
		<div class="datasub-right">
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon02.png" alt="" />
					<div class="tit">资助经费变化情况</div>
					<el-select v-model="value" placeholder="Select" class="select">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="right-main">
					<div class="right-main-echarts" ref="rightChartRef"></div>
                    <div class="right-main-tit">亿美元</div>
				</div>
			</div>
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon03.png" alt="" />
					<div class="tit">承研主体排名</div>
					<el-select v-model="value3" placeholder="Select" class="select">
						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="right-main1">
					<div class="right-boxplot-echarts" ref="boxplotChartRef"></div>
                    <div class="right-main1-tit">单位：亿美元</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import NSF from "./assets/NSF.png";
import DARPA from "./assets/DARPA.png";
import NASA from "./assets/NASA.png";
import NIH from "./assets/NIH.png";
import NIST from "./assets/NIST.png";

import img01 from "./assets/斯坦福大学.png"
import img02 from "./assets/加州大学旧金山分校.png"
import img03 from "./assets/宾夕法尼亚大学.png"
import img04 from "./assets/约翰斯·霍普金斯大学.png"
import img05 from "./assets/康奈尔大学.png"
import img06 from "./assets/华盛顿大学.png"
import img07 from "./assets/麻省理工大学.png"


const value = ref("近十年");
const value1 = ref("2025年");
const value2 = ref("2025年");
const value3 = ref("2025年");

const universityData = [
	{
		name: "斯坦福大学",
		img: img01,
		value: 24,
		color: "linear-gradient(270deg, #D15054 0%, rgba(209,80,84,0) 100%)"
	},
	{
		name: "加州大学旧金山分校",
		img: img02,
		value: 18,
		color: "linear-gradient(270deg, #F69C45 0%, rgba(246,156,69,0) 100%)"
	},
	{
		name: "宾夕法尼亚大学",
		img: img03,
		value: 12,
		color: "linear-gradient(270deg, #EBC818 0%, rgba(235,200,24,0) 100%)"
	},
	{
		name: "约翰斯·霍普金斯大学",
		img: img04,
		value: 11,
		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
	},
	{
		name: "康奈尔大学",
		img: img05,
		value: 10,
		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
	},
	{
		name: "华盛顿大学（圣路易斯）",
		img: img06,
		value: 6,
		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
	},
	{
		name: "麻省理工大学",
		img: img07,
		value: 4,
		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
	}
];

const options = [
	{
		value: "近十年",
		label: "近十年"
	},
	{
		value: "近五年",
		label: "近五年"
	}
];
const options1 = [
	{
		value: "2025年",
		label: "2025年"
	},
	{
		value: "2024年",
		label: "2024年"
	}
];

const leftChartRef = ref(null);
const rightChartRef = ref(null);
const leftSankeyRef = ref(null);
const boxplotChartRef = ref(null);
let leftChart;
let rightChart;
let leftSankey;
let boxplotChart;

const initBoxPlot = () => {
    if (!boxplotChartRef.value) {
        console.warn("boxplotChartRef is null");
        return;
    }
    if (boxplotChart) boxplotChart.dispose();
    boxplotChart = echarts.init(boxplotChartRef.value);

    const categories = ["人工智能", "通信网络", "生物科技", "能源"];
    const dataUS = [
        [28, 40, 60, 72, 82],
        [22, 32, 42, 50, 55],
        [52, 65, 85, 96, 105],
        [18, 30, 52, 62, 72]
    ];
    const dataCN = [
        [30, 35, 58, 80, 95],
        [15, 20, 22, 30, 31],
        [55, 58, 82, 105, 118],
        [20, 25, 48, 72, 85]
    ];

    const option = {
        legend: {
            data: ["美国", "中国"],
            left: 20,
            top: 0,
            itemWidth: 12,
            itemHeight: 12,
            icon: 'circle',
            textStyle: {
                color: "#5F656C",
                fontSize: 14
            }
        },
        tooltip: {
            trigger: "item",
            axisPointer: {
                type: "shadow"
            }
        },
        grid: {
            left: 50,
            right: 20,
            top: 60,
            bottom: 40
        },
        xAxis: {
            type: "category",
            data: categories,
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#E6E6E6"
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: "#5F656C",
                fontSize: 14,
                margin: 15
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: "value",
            splitLine: {
                show: true,
                lineStyle: {
                    color: "#F0F2F5",
                    type: "solid"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: "#5F656C",
                fontSize: 14
            }
        },
        series: [
            {
                name: "美国",
                type: "boxplot",
                data: dataUS,
                boxWidth: 30,
                itemStyle: {
                    color: "#fff",
                    borderColor: "#1890FF",
                    borderWidth: 1
                },
                emphasis: {
                    itemStyle: {
                        borderWidth: 2,
                        shadowBlur: 5,
                        shadowOffsetX: 1,
                        shadowColor: "rgba(0,0,0,0.2)"
                    }
                }
            },
            {
                name: "中国",
                type: "boxplot",
                data: dataCN,
                boxWidth: 30,
                itemStyle: {
                    color: "#fff",
                    borderColor: "#D15054",
                    borderWidth: 1
                },
                emphasis: {
                    itemStyle: {
                        borderWidth: 2,
                        shadowBlur: 5,
                        shadowOffsetX: 1,
                        shadowColor: "rgba(0,0,0,0.2)"
                    }
                }
            }
        ]
    };
    boxplotChart.setOption(option);
};

const initLeftDonut = () => {
	if (!leftChartRef.value) return;
	if (leftChart) leftChart.dispose();
	leftChart = echarts.init(leftChartRef.value);

	const categories = ["集成电路", "人工智能", "通信网络", "能源", "先进制造", "生物科技", "航空航天", "新材料"];
	const usData = [50, 46, 40, 32, 31, 31, 30, 24];
	const cnData = [45, 42, 35, 28, 28, 33, 25, 20];
	
	const colors = [
		"#D15054", // 红色
		"#91CCFF", // 浅蓝
		"#FFAB4C", // 橙色
		"#975FE4", // 紫色
		"#5CDBD3", // 青色
		"#005FCB", // 深蓝
		"#B37FEB", // 浅紫
		"#FFA39E"  // 浅红
	];

	const series = categories.map((name, index) => ({
		name: name,
		type: 'bar',
		stack: 'total',
		barWidth: 46,
		itemStyle: {
			color: colors[index],
            borderWidth: 0
		},
		data: [cnData[index], usData[index]]
	}));

	// 计算总和用于右侧显示
	const usTotal = usData.reduce((a, b) => a + b, 0);
	const cnTotal = cnData.reduce((a, b) => a + b, 0);

	// 添加一个辅助系列用于显示右侧的总数值
	series.push({
		name: 'Total',
		type: 'bar',
		stack: 'total',
		itemStyle: {
			color: 'transparent'
		},
		label: {
			show: true,
			position: 'right',
			formatter: (params) => {
				const totals = [cnTotal, usTotal];
				return `{val|${totals[params.dataIndex]}}{unit| 亿美元}`;
			},
			rich: {
				val: {
					fontSize: 18,
					color: '#3B414B',
					fontWeight: 400,
					padding: [0, 0, 0, 15]
				},
				unit: {
					fontSize: 16,
					color: '#3B414B'
				}
			}
		},
		data: [0.1, 0.1] // 给予极小数值以触发label渲染
	});

	const option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: { type: 'shadow' },
			formatter: (params) => {
				let res = `${params[0].name}<br/>`;
				params.forEach(item => {
					if (item.seriesName !== 'Total') {
						res += `${item.marker} ${item.seriesName}: ${item.value} 亿美元<br/>`;
					}
				});
				return res;
			}
		},
		legend: {
			data: categories,
			left: 20,
			top: 0,
			itemWidth: 12,
			itemHeight: 12,
			icon: 'circle',
			textStyle: {
				color: "#5F656C",
				fontSize: 14
			}
		},
		grid: {
			left: '5%',
			right: '20%',
			top: '10%',
			bottom: '10%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			show: true,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#E6E6E6',
                    type: 'dashed'
                }
            }
		},
		yAxis: {
			type: 'category',
			data: ['中国', '美国'],
			axisLine: { show: false },
			axisTick: { show: false },
			axisLabel: {
				fontSize: 20,
				color: '#3B414B',
				margin: 30
			}
		},
		series: series
	};
	leftChart.setOption(option);
};

const initRightLine = () => {
	if (!rightChartRef.value) return;
	if (rightChart) rightChart.dispose();
	rightChart = echarts.init(rightChartRef.value);
	const years = ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"];
	const nsf = [75, 35, 45, 60, 72, 68, 95, 85, 82, 80, 80, 86];
	const darpa = [55, 40, 48, 42, 60, 65, 70, 78, 60, 92, 85, 80];
	const nasa = [60, 42, 28, 25, 30, 35, 40, 52, 38, 60, 36, 42];
	const nih = [38, 25, 22, 28, 30, 34, 40, 60, 28, 35, 22, 34];
	const nist = [40, 28, 22, 20, 24, 26, 30, 50, 25, 20, 18, 15];
	const colorMap = {
		NSF: "rgba(20, 89, 187, 1)",
		DARPA: "rgba(206, 79, 81, 1)",
		NASA: "rgba(255, 172, 77, 1)",
		NIH: "rgba(19, 168, 168, 1)",
		NIST: "rgba(114, 46, 209, 1)"
	};
	const option = {
		color: [colorMap.NSF, colorMap.DARPA, colorMap.NASA, colorMap.NIH, colorMap.NIST],
		grid: { left: 40, right: 80, top: 20, bottom: 40 },
		tooltip: { trigger: "axis" },
		legend: { show: false },
		xAxis: {
			type: "category",
			data: years,
			boundaryGap: false,
			axisLine: { show: false },
			axisTick: { show: false },
			axisLabel: {
				color: "rgba(132, 136, 142, 1)",
				fontSize: 14,
				fontFamily: "Microsoft YaHei",
				fontWeight: 400,
				lineHeight: 22
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: 100,
			splitLine: { show: true, lineStyle: { color: "#e6e6e6", type: "dashed" } },
			axisLine: { show: false },
			axisTick: { show: false },
			axisLabel: {
				color: "rgba(132, 136, 142, 1)",
				fontSize: 14,
				fontFamily: "Microsoft YaHei",
				fontWeight: 400,
				lineHeight: 22
			}
		},
		series: [
			{
				name: "NSF",
				type: "line",
				data: nsf,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{NSF| }  {t_NSF|NSF}`,
					rich: {
						NSF: { backgroundColor: { image: NSF }, width: 16, height: 16 },
						t_NSF: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.NSF
						}
					}
				},
				areaStyle: { color: "rgba(20,89,187,0.12)" }
			},
			{
				name: "DARPA",
				type: "line",
				data: darpa,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{DARPA| }  {t_DARPA|DARPA}`,
					rich: {
						DARPA: { backgroundColor: { image: DARPA }, width: 16, height: 16 },
						t_DARPA: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.DARPA
						}
					}
				},
				areaStyle: { color: "rgba(206,79,81,0.12)" }
			},
			{
				name: "NASA",
				type: "line",
				data: nasa,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{NASA| }  {t_NASA|NASA}`,
					rich: {
						NASA: { backgroundColor: { image: NASA }, width: 16, height: 16 },
						t_NASA: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.NASA
						}
					}
				},
				areaStyle: { color: "rgba(255,172,77,0.12)" }
			},
			{
				name: "NIH",
				type: "line",
				data: nih,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{NIH| }  {t_NIH|NIH}`,
					rich: {
						NIH: { backgroundColor: { image: NIH }, width: 16, height: 16 },
						t_NIH: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.NIH
						}
					}
				},
				areaStyle: { color: "rgba(19,168,168,0.12)" }
			},
			{
				name: "NIST",
				type: "line",
				data: nist,
				symbol: "none",
				showSymbol: false,
				endLabel: {
					show: true,
					formatter: () => `{NIST| }  {t_NIST|NIST}`,
					rich: {
						NIST: { backgroundColor: { image: NIST }, width: 16, height: 16 },
						t_NIST: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: colorMap.NIST
						}
					}
				},
				areaStyle: { color: "rgba(114,46,209,0.12)" }
			}
		]
	};
    rightChart.setOption(option);
};

const initLeftSankey = () => {
    if (!leftSankeyRef.value) return;
    if (leftSankey) leftSankey.dispose();
    leftSankey = echarts.init(leftSankeyRef.value);
    const leftNodes = [
        { name: "美国国防高级研究计划局DARPA" },
        { name: "美国国家科学基金会NSF" },
        { name: "美国国家航空航天局NASA" },
        { name: "美国国立卫生研究院NIH" },
        { name: "美国农业部USDA" },
        { name: "国家标准与技术研究院NIST" },
        { name: "美国能源部DOE" }
    ];
    const rightNodes = [
        { name: "人工智能" },
        { name: "生物科技" },
        { name: "量子科技" },
        { name: "新材料" },
        { name: "集成电路" },
        { name: "通信网络" },
        { name: "能源" },
        { name: "先进制造" },
        { name: "航空航天" }
    ];
    const nodes = [...leftNodes, ...rightNodes];
    const links = [
        { source: "美国国防高级研究计划局DARPA", target: "人工智能", value: 20 },
        { source: "美国国防高级研究计划局DARPA", target: "量子科技", value: 10 },
        { source: "美国国防高级研究计划局DARPA", target: "通信网络", value: 8 },
        { source: "美国国家科学基金会NSF", target: "生物科技", value: 16 },
        { source: "美国国家科学基金会NSF", target: "集成电路", value: 12 },
        { source: "美国国家科学基金会NSF", target: "新材料", value: 9 },
        { source: "美国国家航空航天局NASA", target: "航空航天", value: 22 },
        { source: "美国国家航空航天局NASA", target: "通信网络", value: 6 },
        { source: "美国国立卫生研究院NIH", target: "生物科技", value: 24 },
        { source: "美国农业部USDA", target: "先进制造", value: 8 },
        { source: "国家标准与技术研究院NIST", target: "集成电路", value: 14 },
        { source: "国家标准与技术研究院NIST", target: "新材料", value: 10 },
        { source: "美国能源部DOE", target: "能源", value: 18 },
        { source: "美国能源部DOE", target: "通信网络", value: 6 }
    ];
    const leftColor = {
        "美国国防高级研究计划局DARPA": "#722ED1",
        "美国国家科学基金会NSF": "#0A57A6",
        "美国国家航空航天局NASA": "#2266FF",
        "美国国立卫生研究院NIH": "#FFCC00",
        "美国农业部USDA": "#AA0000",
        "国家标准与技术研究院NIST": "#FF8888",
        "美国能源部DOE": "#0088AA"
    };
    const rightColor = {
        人工智能: "#B05FA0",
        生物科技: "#5070DD",
        量子科技: "#8AAA7C",
        新材料: "#6D7860",
        集成电路: "#0CA8DF",
        通信网络: "#6D7860",
        能源: "#8AAA7C",
        先进制造: "#B47B5D",
        航空航天: "#A7C74C"
    };
    const option = {
        tooltip: { trigger: "item" },
        series: [{
            type: "sankey",
            data: nodes.map(n => ({ name: n.name, itemStyle: { color: leftColor[n.name] || rightColor[n.name] || "#bbb" } })),
            links: [
                { source: "美国国防高级研究计划局DARPA", target: "人工智能", value: 25 },
                { source: "美国国防高级研究计划局DARPA", target: "量子科技", value: 8 },
                { source: "美国国防高级研究计划局DARPA", target: "新材料", value: 10 },
                { source: "美国国防高级研究计划局DARPA", target: "集成电路", value: 10 },
                { source: "美国国防高级研究计划局DARPA", target: "通信网络", value: 9 },
                { source: "美国国防高级研究计划局DARPA", target: "先进制造", value: 8 },

                { source: "美国国家科学基金会NSF", target: "人工智能", value: 20 },
                { source: "美国国家科学基金会NSF", target: "生物科技", value: 12 },
                { source: "美国国家科学基金会NSF", target: "量子科技", value: 8 },
                { source: "美国国家科学基金会NSF", target: "新材料", value: 12 },
                { source: "美国国家科学基金会NSF", target: "集成电路", value: 20 },
                { source: "美国国家科学基金会NSF", target: "通信网络", value: 9 },
                { source: "美国国家科学基金会NSF", target: "能源", value: 4 },
                { source: "美国国家科学基金会NSF", target: "先进制造", value: 10 },
                { source: "美国国家科学基金会NSF", target: "航空航天", value: 6 },

                { source: "美国国家航空航天局NASA", target: "人工智能", value: 15 },
                { source: "美国国家航空航天局NASA", target: "量子科技", value: 6 },
                { source: "美国国家航空航天局NASA", target: "集成电路", value: 15 },
                { source: "美国国家航空航天局NASA", target: "通信网络", value: 9 },
                { source: "美国国家航空航天局NASA", target: "能源", value: 6 },
                { source: "美国国家航空航天局NASA", target: "先进制造", value: 10 },
                { source: "美国国家航空航天局NASA", target: "航空航天", value: 18 },

                { source: "美国国立卫生研究院NIH", target: "人工智能", value: 20 },
                { source: "美国国立卫生研究院NIH", target: "量子科技", value: 4 },
                { source: "美国国立卫生研究院NIH", target: "集成电路", value: 15 },
                { source: "美国国立卫生研究院NIH", target: "通信网络", value: 8 },
                { source: "美国国立卫生研究院NIH", target: "能源", value: 6 },
                { source: "美国国立卫生研究院NIH", target: "先进制造", value: 10 },
                { source: "美国国立卫生研究院NIH", target: "航空航天", value: 4 },

                { source: "美国农业部USDA", target: "人工智能", value: 20 },
                { source: "美国农业部USDA", target: "新材料", value: 11 },
                { source: "美国农业部USDA", target: "通信网络", value: 5 },
                { source: "美国农业部USDA", target: "能源", value: 2 },
                { source: "美国农业部USDA", target: "先进制造", value: 10 },
                { source: "美国农业部USDA", target: "航空航天", value: 4 },

                { source: "国家标准与技术研究院NIST", target: "量子科技", value: 4 },
                { source: "国家标准与技术研究院NIST", target: "先进制造", value: 4 },
                { source: "国家标准与技术研究院NIST", target: "航空航天", value: 4 },

                { source: "美国能源部DOE", target: "新材料", value: 11 },
                { source: "美国能源部DOE", target: "集成电路", value: 20 },
                { source: "美国能源部DOE", target: "通信网络", value: 5 },
                { source: "美国能源部DOE", target: "能源", value: 12 },
                { source: "美国能源部DOE", target: "先进制造", value: 8 },
                { source: "美国能源部DOE", target: "航空航天", value: 4 }
            ],
            sort: 'none',
            layoutIterations: 0,
            draggable: false,
            nodeAlign: "justify",
            orient: "horizontal",
            left: 10,
            right: 70,
            top: 0,
            bottom: 0,
            nodeWidth: 40,
            nodeGap: 10,
            lineStyle: { color: "#E7E7E8", opacity: 0.8, curveness: 0.5 },
            emphasis: { focus: "adjacency" },
            label: { 
                show: true, 
                color: "rgb(59, 65, 75)", 
                fontSize: 14, 
                fontFamily: "Microsoft YaHei", 
                fontWeight: 400, 
                lineHeight: 16,
                formatter: (params) => {
                    const map = {
                        "美国国防高级研究计划局DARPA": "美国国防高级研究计划局\nDARPA",
                        "美国国家科学基金会NSF": "美国国家科学基金会\nNSF",
                        "美国国家航空航天局NASA": "美国国家航空航天局\nNASA",
                        "美国国立卫生研究院NIH": "美国国立卫生研究院\nNIH",
                        "美国农业部USDA": "美国农业部\nUSDA",
                        "国家标准与技术研究院NIST": "国家标准与技术研究院\nNIST",
                        "美国能源部DOE": "美国能源部\nDOE"
                    };
                    return map[params.name] || params.name;
                },
                position: 'right'
            }
        }]
    };
    leftSankey.setOption(option);
};
const handleResize = () => {
    if (leftChart) leftChart.resize();
    if (rightChart) rightChart.resize();
    if (leftSankey) leftSankey.resize();
    if (boxplotChart) boxplotChart.resize();
};

onMounted(() => {
    nextTick(() => {
        initLeftDonut();
        initRightLine();
        initLeftSankey();
        initBoxPlot();
    });
    window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
    if (leftChart) {
        leftChart.dispose();
        leftChart = null;
    }
    if (rightChart) {
        rightChart.dispose();
        rightChart = null;
    }
    if (leftSankey) {
        leftSankey.dispose();
        leftSankey = null;
    }
    if (boxplotChart) {
        boxplotChart.dispose();
        boxplotChart = null;
    }
});
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.datasub {
	width: 1600px;
	height: 936px;
	display: flex;
	justify-content: space-between;
	.datasub-left {
		width: 792px;
		height: 936px;
		.left {
			width: 792px;
			height: 460px;
			margin-right: 16px;
			margin-bottom: 16px;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;
			.left-title {
				width: 792px;
				height: 48px;
				border-bottom: 1px solid rgb(234, 236, 238);
				position: relative;
				img {
					width: 19px;
					height: 19px;
					position: absolute;
					top: 16px;
					left: 21px;
				}
				.tit {
					margin-left: 60px;
					height: 48px;
					padding: 11px 0;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 26px;
					color: rgb(5, 95, 194);
				}
				.select {
					width: 120px;
					height: 28px;
					padding: 0px 12px;
					position: absolute;
					top: 11px;
					right: 31px;
				}
			}
			.left-main {
				width: 792px;
				height: 412px;
				padding: 52px 60px 78px 61px;
				.left-main-echarts {
					width: 100%;
					height: 100%;
				}
			}
            .left-main1 {
                width: 792px;
                height: 412px;
                padding: 30px 30px 30px 30px;
                .left-sankey-echarts {
                    width: 100%;
                    height: 100%;
                }
            }
		}
	}
	.datasub-right {
		width: 792px;
		height: 936px;
		.right {
			width: 792px;
			height: 460px;
			border-radius: 10px;
			margin-bottom: 16px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;
			.right-title {
				width: 792px;
				height: 48px;
				border-bottom: 1px solid rgb(234, 236, 238);
				position: relative;
				img {
					width: 19px;
					height: 19px;
					position: absolute;
					top: 16px;
					left: 21px;
				}
				.tit {
					margin-left: 60px;
					height: 48px;
					padding: 11px 0;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 26px;
					color: rgb(5, 95, 194);
				}
				.select1 {
					width: 155px;
					height: 28px;
					padding: 0px 12px;
					position: absolute;
					top: 11px;
					right: 163px;
				}
				.select {
					width: 120px;
					height: 28px;
					padding: 0px 12px;
					position: absolute;
					top: 11px;
					right: 31px;
				}
			}
			.right-main {
				width: 792px;
				height: 421px;
				padding: 40px 5px 30px 22px;
                position: relative;
				.right-main-echarts {
					width: 100%;
					height: 100%;
				}
                .right-main-tit {
                    position: absolute;
                    top: 18px;
                    right: 83px;
                    font-size: 14px;
                    font-weight: 400;
                    font-family: "Microsoft YaHei";
                    line-height: 22px;
                    color: rgb(132, 136, 142);
                }
			}
            .right-main1 {
				width: 792px;
				height: 421px;
				padding: 20px 20px;
                position: relative;
                box-sizing: border-box;
                .right-boxplot-echarts {
                    width: 100%;
                    height: 100%;
                    min-height: 300px;
                }
                .right-main1-tit {
                    position: absolute;
                    top: 18px;
                    right: 31px;
                    font-size: 14px;
                    font-weight: 400;
                    font-family: "Microsoft YaHei";
                    line-height: 22px;
                    color: rgb(132, 136, 142);
                    z-index: 10;
                }
			}
		}
	}
}
</style>
