| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>知识图谱 - 初中化学</title>
- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
- <style>
- * { margin: 0; padding: 0; box-sizing: border-box; }
- body { font-family: 'Segoe UI', sans-serif; background: #f5f7fa; }
- .sidebar {
- width: 220px;
- position: fixed;
- left: 0;
- top: 0;
- bottom: 0;
- background: #2c3e50;
- color: #ecf0f1;
- padding: 20px 0;
- }
- .sidebar a { color: inherit; text-decoration: none; display: block; padding: 10px 20px; }
- .sidebar a:hover { background: #34495e; }
- .main { margin-left: 220px; padding: 20px; }
- .chart-wrap { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); height: 600px; }
- </style>
- </head>
- <body>
- <div class="sidebar">
- <a href="/dashboard">🏠 首页</a>
- <a href="/knowledge_qa">💬 知识点询问</a>
- <a href="/knowledge_graph">🔗 知识图谱</a>
- <a href="/daily_training">📚 每日训练</a>
- <a href="/analysis">📊 学情分析</a>
- </div>
- <div class="main">
- <h2 style="margin-bottom: 16px;">初中化学知识图谱</h2>
- <div class="chart-wrap" id="graphChart" data-graph='{{ graph_data | tojson | safe }}'></div>
- </div>
- <script>
- const container = document.getElementById('graphChart');
- const graphData = JSON.parse(container.dataset.graph || '{"nodes":[],"links":[]}');
- const chart = echarts.init(container);
- const option = {
- title: { text: '三元组关系图', left: 'center' },
- tooltip: { formatter: d => d.data.source + ' - ' + d.data.target },
- series: [{
- type: 'graph',
- layout: 'force',
- data: graphData.nodes.map(n => ({ name: n.name })),
- links: graphData.links.map(l => ({ source: l.source, target: l.target, value: l.value })),
- label: { show: true, position: 'right' },
- force: { repulsion: 500, edgeLength: 150 }
- }]
- };
- chart.setOption(option);
- window.addEventListener('resize', () => chart.resize());
- </script>
- </body>
- </html>
|
