提交 5aa089fb authored 作者: coderBryanFu's avatar coderBryanFu

update

上级 08966e42
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import WrittingAsstaint from "@/views/writtingAsstaint/index.vue"; import WrittingAsstaint from "@/views/writtingAsstaint/index.vue";
const writtingRoutes = [ const writtingRoutes = [
// 法案系统路由 // 智能写报路由
{ {
path: "/writtingAsstaint", path: "/writtingAsstaint",
name: "writtingAsstaint", name: "writtingAsstaint",
......
<!-- src/components/HuaweiSupplyChainChart.vue -->
<template>
<div class="chart-container" ref="chartRef"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// import { graphData } from "./mockData";
import Img from "./assets/images/img.png";
import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
import Img5 from "./assets/images/img5.png";
import Img6 from "./assets/images/img6.png";
import Img7 from "./assets/images/img7.png";
import Img8 from "./assets/images/img8.png";
const graphData = {
nodes: [
{ id: "huawei", name: "美国众议院", category: 0, symbolSize: 60, symbol: `image://${Img}` },
{ id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 42, symbol: `image://${Img1}` },
{ id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 2, symbolSize: 42, symbol: `image://${Img2}` },
{ id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 2, symbolSize: 42, symbol: `image://${Img3}` },
{ id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 2, symbolSize: 42, symbol: `image://${Img4}` },
{ id: "qualcomm", name: "道格·伯格姆", category: 2, symbolSize: 42, symbol: `image://${Img5}` },
{ id: "intel", name: "斯科特·贝森特", category: 2, symbolSize: 42, symbol: `image://${Img6}` },
{ id: "mediatek", name: "杰弗里·凯斯勒", category: 2, symbolSize: 42, symbol: `image://${Img7}` },
{ id: "shenghongda", name: "杰弗里·凯德勒", category: 2, symbolSize: 42, symbol: `image://${Img8}` }
// { id: "luxshare", name: "立讯精密", category: 1, symbolSize: 20 },
// { id: "tianma", name: "天马微电子", category: 1, symbolSize: 20 },
// { id: "desay", name: "德赛电池", category: 1, symbolSize: 20 },
// { id: "auspicious-sound", name: "瑞声科技", category: 1, symbolSize: 20 },
// { id: "goertek", name: "歌尔股份", category: 1, symbolSize: 20 },
// { id: "sony-semiconductor", name: "索尼半导体", category: 1, symbolSize: 20 },
// { id: "ibm", name: "IBM", category: 1, symbolSize: 20 },
// { id: "lg-innotek", name: "LG伊诺特", category: 1, symbolSize: 20 },
// { id: "micron", name: "美光科技", category: 1, symbolSize: 20 }
// { id: "nokia", name: "诺基亚", category: 1, symbolSize: 20 },
// { id: "google", name: "谷歌", category: 1, symbolSize: 20 },
// { id: "vodafone", name: "沃达丰", category: 1, symbolSize: 20 },
// { id: "microsoft", name: "微软", category: 1, symbolSize: 20 },
// { id: "china-unicom", name: "中国联通", category: 1, symbolSize: 20 },
// { id: "china-mobile", name: "中国移动", category: 1, symbolSize: 20 },
// { id: "tsmc", name: "台积电", category: 1, symbolSize: 20 }
// { id: "orange", name: "Orange", category: 1, symbolSize: 20 },
// { id: "germany-telecom", name: "德国电信", category: 1, symbolSize: 20 },
// { id: "byd-electronics", name: "比亚迪电子", category: 1, symbolSize: 20 },
// { id: "boe", name: "京东方", category: 1, symbolSize: 20 },
// { id: "dali-optical", name: "大力光", category: 1, symbolSize: 20 },
// { id: "lg-display", name: "LG显示", category: 1, symbolSize: 20 },
// { id: "sunny-optical", name: "舜宇光学", category: 1, symbolSize: 20 }
],
links: [
{ source: "huawei", target: "huawei-cloud" },
{ source: "huawei", target: "huawei-digital-energy" },
{ source: "huawei", target: "huawei-intelligent-car" },
{ source: "huawei", target: "qualcomm" },
{ source: "huawei", target: "intel" },
{ source: "huawei", target: "mediatek" },
{ source: "huawei", target: "shenghongda" },
{ source: "huawei", target: "foxconn" }
// { source: "huawei", target: "luxshare" },
// { source: "huawei", target: "tianma" },
// { source: "huawei", target: "desay" },
// { source: "huawei", target: "auspicious-sound" },
// { source: "huawei", target: "goertek" },
// { source: "huawei", target: "sony-semiconductor" },
// { source: "huawei", target: "ibm" },
// { source: "huawei", target: "lg-innotek" },
// { source: "huawei", target: "micron" }
// { source: "huawei", target: "nokia" },
// { source: "huawei", target: "google" },
// { source: "huawei", target: "vodafone" },
// { source: "huawei", target: "microsoft" },
// { source: "huawei", target: "china-unicom" },
// { source: "huawei", target: "china-mobile" },
// { source: "huawei", target: "tsmc" }
// { source: "huawei", target: "orange" },
// { source: "huawei", target: "germany-telecom" },
// { source: "huawei", target: "byd-electronics" },
// { source: "huawei", target: "boe" },
// { source: "huawei", target: "dali-optical" },
// { source: "huawei", target: "lg-display" },
// { source: "huawei", target: "sunny-optical" }
],
categories: [{ name: "子业务" }, { name: "合作商" }]
};
const chartRef = ref(null);
onMounted(() => {
const chart = echarts.init(chartRef.value);
const option = {
title: { text: "", left: "center" },
tooltip: {},
// legend: {
// data: graphData.categories.map(item => item.name),
// left: "left"
// },
series: [
{
type: "graph",
layout: "force", // 力导向布局
force: {
repulsion: 1000, // 节点排斥力
edgeLength: [50, 200] // 边长度范围
},
data: graphData.nodes,
links: graphData.links,
categories: graphData.categories,
roam: true, // 支持缩放、平移
label: {
show: true,
fontSize: 14,
position: "bottom",
formatter: function (params) {
// 根据条件返回不同样式的文本
if (params.data.category === 0) {
return `{a|${params.name}}`; // 使用富文本样式
} else if (params.data.category === 1) {
return `{b|${params.name}}`;
} else {
return params.name; // 默认样式
}
},
rich: {
a: {
// 重要节点的样式
color: "#000",
fontSize: 18,
fontWeight: "bold",
padding: [2, 4],
borderRadius: 2
},
b: {
// 普通节点的样式
color: "rgba(5, 95, 194, 1)",
fontSize: 14,
}
}
},
edgeSymbol: ["arrow", "none"], // 边的箭头
edgeSymbolSize: [8, 50],
itemStyle: {
color: "rgba(5, 95, 194, 1)"
// borderColor: "red",
// borderWidth: 1
},
lineStyle: {
color: "rgba(174, 214, 255, 1)",
width: 2,
opacity: 0.5
},
emphasis: {
focus: "adjacency",
lineStyle: {
width: 2
}
}
}
]
};
chart.setOption(option);
// 窗口resize时自适应
window.addEventListener("resize", () => chart.resize());
});
</script>
<style scoped>
.chart-container {
width: 100%;
height: 430px;
margin: 0 auto;
background-color: #f7f8f9; /* 深色背景,模拟原图风格 */
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论