提交 a4c01eef authored 作者: 张伊明's avatar 张伊明

fix 修改政治献金流向显示bug、修改法案首页新闻资讯间距

上级 3bce28ba
...@@ -34,10 +34,10 @@ defineProps({ ...@@ -34,10 +34,10 @@ defineProps({
.overview-card { .overview-card {
height: 450px; height: 450px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid var(--border-black-5);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: var(--bg-white-100);
overflow: hidden; overflow: hidden;
.overview-card-header { .overview-card-header {
......
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, watch, computed } from "vue"; import { ref, onMounted, watch, computed, nextTick } from "vue";
import { getBillPoliContribution, getBillMainPoliContribution, getBillPersonPoliContribution } from "@/api/deepdig"; import { getBillPoliContribution, getBillMainPoliContribution, getBillPersonPoliContribution } from "@/api/deepdig";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
...@@ -617,7 +617,7 @@ const getMainPoliContribution = async () => { ...@@ -617,7 +617,7 @@ const getMainPoliContribution = async () => {
const fullSourceList = ref([]); const fullSourceList = ref([]);
const showAllSankeyData = ref(false); const showAllSankeyData = ref(false);
const renderSankeyChart = () => { const renderSankeyChart = async () => {
const sourceList = showAllSankeyData.value ? fullSourceList.value : fullSourceList.value.slice(0, 5); const sourceList = showAllSankeyData.value ? fullSourceList.value : fullSourceList.value.slice(0, 5);
if (sourceList.length > 0) { if (sourceList.length > 0) {
...@@ -626,33 +626,39 @@ const renderSankeyChart = () => { ...@@ -626,33 +626,39 @@ const renderSankeyChart = () => {
const totalAmount = sourceList.reduce((sum, item) => sum + (item.amount || 0), 0); const totalAmount = sourceList.reduce((sum, item) => sum + (item.amount || 0), 0);
const orgNodes = sourceList.map((item, index) => ({
name: item.orgNameZh || item.orgName || `机构${index + 1}`,
value: item.amount,
itemStyle: {
color: sankeyColors[index % sankeyColors.length]
}
}));
const nodes = [ const nodes = [
...orgNodes,
{ {
name: personName, name: personName,
value: totalAmount, value: totalAmount,
label: { position: "left" },
itemStyle: {
color: "#FF1493"
}
},
...sourceList.map((item, index) => ({
name: item.orgNameZh,
value: item.amount,
itemStyle: { itemStyle: {
color: sankeyColors[index % sankeyColors.length] color: "#34C38F"
} }
})) }
]; ];
const links = sourceList.map(item => ({ const links = sourceList
source: item.orgNameZhZh, .map((item, index) => ({
target: personName, source: item.orgNameZh || item.orgName || `机构${index + 1}`,
value: item.amount target: personName,
})); value: item.amount
}))
.filter(item => !!item.source && !!item.target);
// `chart1` 容器由 v-if/v-else 动态渲染,必须等 DOM 挂载后再 init
await nextTick();
let chart1 = getSankeyChart(nodes, links); let chart1 = getSankeyChart(nodes, links);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
} else { } else {
await nextTick();
let chart1 = getSankeyChart([], []); let chart1 = getSankeyChart([], []);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
} }
......
...@@ -8,30 +8,87 @@ const getSankeyChart = (data = [], links = []) => { ...@@ -8,30 +8,87 @@ const getSankeyChart = (data = [], links = []) => {
}, },
series: { series: {
type: 'sankey', type: 'sankey',
layout: 'none', // 禁止鼠标拖拽/缩放平移,避免图表被交互改变
left: '1%', draggable: false,
right: '1%', roam: false,
top: '5%', left: 16,
bottom: '5%', right: 16,
top: 14,
bottom: 14,
nodeAlign: 'right', // 目标效果:人名贴右侧
emphasis: { emphasis: {
focus: 'adjacency' focus: 'adjacency'
}, },
nodeWidth: 50, // 所有色块宽度增加三倍
nodeGap: 2, nodeWidth: 54,
nodeGap: 10,
layoutIterations: 32, layoutIterations: 32,
lineStyle: { lineStyle: {
color: 'source', color: 'rgba(0, 0, 0, 0.08)', // 浅灰“行背景带”的基色
curveness: 0.5 opacity: 1,
curveness: 0.2
}, },
label: { label: {
show: true, show: true,
formatter: function (params) { formatter: function (params) {
return `${params.name} $${params.value.toLocaleString()}`; return `${params.name}`;
}, },
position: 'right', position: 'right',
fontSize: 16, fontSize: 16,
color: '#555' color: '#303133',
overflow: 'truncate',
width: 140
}, },
edgeLabel: {
show: true,
formatter: function (params) {
const val = params.value || 0;
return `$${Number(val).toLocaleString()}`;
},
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 140,
align: 'center'
},
itemStyle: {
borderWidth: 0
},
nodeSort: 'descending',
levels: [
// depth = 0(机构节点)
{
depth: 0,
itemStyle: {
borderWidth: 0
},
label: {
position: 'right',
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 140
}
},
// depth = 1(人物节点)
{
depth: 1,
itemStyle: {
color: '#34C38F'
},
label: {
// 人物名称移至色块左侧
position: 'left',
// 让文字最右侧紧贴绿色色块左侧
distance: 5,
color: '#303133',
fontSize: 16,
overflow: 'truncate',
width: 120,
align: 'right'
}
}
],
data: data, data: data,
links: links links: links
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论