diff --git a/src/components/charts/Echarts.tsx b/src/components/charts/Echarts.tsx
index f51772e..658f6ca 100644
--- a/src/components/charts/Echarts.tsx
+++ b/src/components/charts/Echarts.tsx
@@ -12,7 +12,7 @@ class Echarts extends React.Component {
     render() {
         return (
             <div className="gutter-example">
-                <Row gutter={16}>
+                {/* <Row gutter={16}>
                     <Col className="gutter-row" md={24}>
                         <div className="gutter-box">
                             <Card title="区域图" bordered={false}>
@@ -20,9 +20,9 @@ class Echarts extends React.Component {
                             </Card>
                         </div>
                     </Col>
-                </Row>
+                </Row> */}
                 <Row gutter={16}>
-                    <Col className="gutter-row" md={12}>
+                    <Col className="gutter-row" md={24}>
                         <div className="gutter-box">
                             <Card title="关系图" bordered={false}>
                                 {/*<EchartsGraphnpm />*/}
@@ -30,15 +30,15 @@ class Echarts extends React.Component {
                             </Card>
                         </div>
                     </Col>
-                    <Col className="gutter-row" md={12}>
+                    {/* <Col className="gutter-row" md={12}>
                         <div className="gutter-box">
                             <Card title="饼图" bordered={false}>
                                 <EchartsPie />
                             </Card>
                         </div>
-                    </Col>
+                    </Col> */}
                 </Row>
-                <Row gutter={16}>
+                {/* <Row gutter={16}>
                     <Col className="gutter-row" md={24}>
                         <div className="gutter-box">
                             <Card title="散点图" bordered={false}>
@@ -46,10 +46,10 @@ class Echarts extends React.Component {
                             </Card>
                         </div>
                     </Col>
-                </Row>
+                </Row> */}
             </div>
-        )
+        );
     }
 }
 
-export default Echarts;
\ No newline at end of file
+export default Echarts;
diff --git a/src/components/charts/EchartsForce.tsx b/src/components/charts/EchartsForce.tsx
index f14cccf..de13947 100644
--- a/src/components/charts/EchartsForce.tsx
+++ b/src/components/charts/EchartsForce.tsx
@@ -4,228 +4,500 @@
 import React, { Component } from 'react';
 import ReactEcharts from 'echarts-for-react';
 
+var stations = [
+    {
+        name: 'F7',
+        x: -150,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F6',
+        x: -300,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F5',
+        x: -450,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F4',
+        x: -600,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F3',
+        x: -750,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F2',
+        x: -850,
+        y: -700,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F1',
+        x: -950,
+        y: -600,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F9',
+        x: 150,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+
+    {
+        name: 'F11',
+        x: 450,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F12',
+        x: 600,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F13',
+        x: 750,
+        y: -800,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F14',
+        x: 750,
+        y: -600,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F15',
+        x: 900,
+        y: -600,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F16',
+        x: 1050,
+        y: -600,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F17',
+        x: 1300,
+        y: -600,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+    {
+        name: 'F18',
+        x: 1450,
+        y: -600,
+        itemStyle: { borderColor: '#EE1822', color: 'white' },
+        category: '1号线',
+    },
+
+    {
+        name: 'S1',
+        x: 0,
+        y: -1400,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S2',
+        x: 0,
+        y: -1300,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S3',
+        x: 0,
+        y: -1200,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S4',
+        x: 0,
+        y: -1100,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S5',
+        x: 0,
+        y: -1000,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S6',
+        x: 0,
+        y: -900,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'FS8',
+        x: 0,
+        y: -800,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S8',
+        x: 0,
+        y: -700,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S9',
+        x: 0,
+        y: -600,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S10',
+        x: 0,
+        y: -500,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S12',
+        x: 200,
+        y: -300,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S13',
+        x: 300,
+        y: -200,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S14',
+        x: 400,
+        y: -100,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S15',
+        x: 500,
+        y: 0,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S16',
+        x: 650,
+        y: 0,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S17',
+        x: 800,
+        y: 0,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S18',
+        x: 950,
+        y: 0,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S19',
+        x: 1100,
+        y: 0,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'S20',
+        x: 1300,
+        y: 0,
+        itemStyle: { borderColor: '#FDD303', color: 'white' },
+        category: '2号线',
+    },
+    {
+        name: 'T16',
+        x: 400,
+        y: -1000,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        label: { rotate: 120 },
+        category: '3号线',
+    },
+    {
+        name: 'T15',
+        x: 300,
+        y: -900,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'FT10',
+        x: 300,
+        y: -800,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T13',
+        x: 300,
+        y: -600,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T12',
+        x: 200,
+        y: -500,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'ST11',
+        x: 100,
+        y: -400,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T10',
+        x: 0,
+        y: -300,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T9',
+        x: 0,
+        y: -200,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T8',
+        x: 0,
+        y: -100,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T7',
+        x: 0,
+        y: 0,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T6',
+        x: 0,
+        y: 100,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T5',
+        x: 0,
+        y: 200,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T4',
+        x: 0,
+        y: 300,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T3',
+        x: 0,
+        y: 400,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T2',
+        x: 0,
+        y: 500,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+    {
+        name: 'T1',
+        x: 0,
+        y: 600,
+        itemStyle: { borderColor: '#00b2ff', color: 'white' },
+        category: '3号线',
+    },
+];
+
+var links = [
+    { source: 'T16', target: 'T15', lineStyle: { color: '#00b2ff' } },
+    { source: 'T15', target: 'FT10', lineStyle: { color: '#00b2ff' } },
+    { source: 'FT10', target: 'T13', lineStyle: { color: '#00b2ff' } },
+    { source: 'T13', target: 'T12', lineStyle: { color: '#00b2ff' } },
+    { source: 'T12', target: 'ST11', lineStyle: { color: '#00b2ff' } },
+    { source: 'ST11', target: 'T10', lineStyle: { color: '#00b2ff' } },
+    { source: 'T10', target: 'T9', lineStyle: { color: '#00b2ff' } },
+    { source: 'T9', target: 'T8', lineStyle: { color: '#00b2ff' } },
+    { source: 'T8', target: 'T7', lineStyle: { color: '#00b2ff' } },
+    { source: 'T7', target: 'T6', lineStyle: { color: '#00b2ff' } },
+    { source: 'T6', target: 'T5', lineStyle: { color: '#00b2ff' } },
+    { source: 'T5', target: 'T4', lineStyle: { color: '#00b2ff' } },
+    { source: 'T4', target: 'T3', lineStyle: { color: '#00b2ff' } },
+    { source: 'T3', target: 'T2', lineStyle: { color: '#00b2ff' } },
+    { source: 'T2', target: 'T1', lineStyle: { color: '#00b2ff' } },
+
+    { source: 'T16', target: 'T15', lineStyle: { color: '#00b2ff' } },
+    { source: 'T15', target: 'FT10', lineStyle: { color: '#00b2ff' } },
+    { source: 'FT10', target: 'T13', lineStyle: { color: '#00b2ff' } },
+    { source: 'T13', target: 'T12', lineStyle: { color: '#00b2ff' } },
+    { source: 'T12', target: 'ST11', lineStyle: { color: '#00b2ff' } },
+    { source: 'ST11', target: 'T10', lineStyle: { color: '#00b2ff' } },
+    { source: 'T10', target: 'T9', lineStyle: { color: '#00b2ff' } },
+    { source: 'T9', target: 'T8', lineStyle: { color: '#00b2ff' } },
+    { source: 'T8', target: 'T7', lineStyle: { color: '#00b2ff' } },
+    { source: 'T7', target: 'T6', lineStyle: { color: '#00b2ff' } },
+    { source: 'T6', target: 'T5', lineStyle: { color: '#00b2ff' } },
+    { source: 'T5', target: 'T4', lineStyle: { color: '#00b2ff' } },
+    { source: 'T4', target: 'T3', lineStyle: { color: '#00b2ff' } },
+    { source: 'T3', target: 'T2', lineStyle: { color: '#00b2ff' } },
+    { source: 'T2', target: 'T1', lineStyle: { color: '#00b2ff' } },
+
+    { source: 'S1', target: 'S2', lineStyle: { color: '#FDD303' } },
+    { source: 'S2', target: 'S3', lineStyle: { color: '#FDD303' } },
+    { source: 'S3', target: 'S4', lineStyle: { color: '#FDD303' } },
+    { source: 'S4', target: 'S5', lineStyle: { color: '#FDD303' } },
+    { source: 'S5', target: 'S6', lineStyle: { color: '#FDD303' } },
+    { source: 'S6', target: 'FS8', lineStyle: { color: '#FDD303' } },
+    { source: 'FS8', target: 'S8', lineStyle: { color: '#FDD303' } },
+    { source: 'S8', target: 'S9', lineStyle: { color: '#FDD303' } },
+    { source: 'S9', target: 'S10', lineStyle: { color: '#FDD303' } },
+    { source: 'S10', target: 'ST11', lineStyle: { color: '#FDD303' } },
+    { source: 'ST11', target: 'S12', lineStyle: { color: '#FDD303' } },
+    { source: 'S12', target: 'S13', lineStyle: { color: '#FDD303' } },
+    { source: 'S13', target: 'S14', lineStyle: { color: '#FDD303' } },
+
+    { source: 'S14', target: 'S15', lineStyle: { color: '#FDD303' } },
+    { source: 'S15', target: 'S16', lineStyle: { color: '#FDD303' } },
+    { source: 'S16', target: 'S17', lineStyle: { color: '#FDD303' } },
+    { source: 'S17', target: 'S18', lineStyle: { color: '#FDD303' } },
+    { source: 'S18', target: 'S19', lineStyle: { color: '#FDD303' } },
+    { source: 'S19', target: 'S20', lineStyle: { color: '#FDD303' } },
+
+    { source: 'FS8', target: 'F7', lineStyle: { color: '#EE1822' } },
+    { source: 'F7', target: 'F6', lineStyle: { color: '#EE1822' } },
+    { source: 'F6', target: 'F5', lineStyle: { color: '#EE1822' } },
+    { source: 'F5', target: 'F4', lineStyle: { color: '#EE1822' } },
+    { source: 'F4', target: 'F3', lineStyle: { color: '#EE1822' } },
+    { source: 'F3', target: 'F2', lineStyle: { color: '#EE1822' } },
+    { source: 'F2', target: 'F1', lineStyle: { color: '#EE1822' } },
+    { source: 'FS8', target: 'F9', lineStyle: { color: '#EE1822' } },
+    { source: 'F9', target: 'FT10', lineStyle: { color: '#EE1822' } },
+    { source: 'FT10', target: 'F11', lineStyle: { color: '#EE1822' } },
+    { source: 'F11', target: 'F12', lineStyle: { color: '#EE1822' } },
+    { source: 'F12', target: 'F13', lineStyle: { color: '#EE1822' } },
+    { source: 'F13', target: 'F14', lineStyle: { color: '#EE1822' } },
+    { source: 'F14', target: 'F15', lineStyle: { color: '#EE1822' } },
+    { source: 'F15', target: 'F16', lineStyle: { color: '#EE1822' } },
+    { source: 'F16', target: 'F17', lineStyle: { color: '#EE1822' } },
+    { source: 'F17', target: 'F18', lineStyle: { color: '#EE1822' } },
+];
+
+var lineNames = [];
+
+for (var index = 0; index < stations.length - 1; index++) {
+    if (lineNames.indexOf(stations[index].category) == -1) {
+        lineNames.push(stations[index].category);
+    }
+}
+
+var legend = [
+    {
+        data: lineNames,
+    },
+];
+
+var categories = lineNames.map((lineName) => {
+    return {
+        name: lineName,
+    };
+});
+
 const option = {
     title: {
-        text: '',
+        text: '地铁示意图',
     },
+    color: ['#EE1822', '#FDD303', '#00b2ff'],
     tooltip: {},
+    legend: legend,
     animationDurationUpdate: 1500,
     animationEasingUpdate: 'quinticInOut',
-    label: {
-        normal: {
-            show: true,
-            textStyle: {
-                fontSize: 12,
-            },
-        },
-    },
-    legend: {
-        x: 'center',
-        show: false,
-        data: ['朋友', '战友', '亲戚'],
-    },
     series: [
         {
             type: 'graph',
-            layout: 'force',
-            symbolSize: 45,
+            layout: 'none',
+            symbolSize: 6,
             focusNodeAdjacency: true,
-            roam: true,
-            categories: [
-                {
-                    name: '朋友',
-                    itemStyle: {
-                        normal: {
-                            color: '#009800',
-                        },
-                    },
-                },
-                {
-                    name: '战友',
-                    itemStyle: {
-                        normal: {
-                            color: '#4592FF',
-                        },
-                    },
-                },
-                {
-                    name: '亲戚',
-                    itemStyle: {
-                        normal: {
-                            color: '#3592F',
-                        },
-                    },
-                },
-            ],
+            roam: false,
             label: {
-                normal: {
-                    show: true,
-                    textStyle: {
-                        fontSize: 12,
-                    },
-                },
+                show: true,
+                rotate: '30',
+                color: 'black',
+                position: 'right',
             },
-            force: {
-                repulsion: 1000,
-            },
-            edgeSymbolSize: [4, 50],
+            edgeSymbol: ['none', 'none'],
+            edgeSymbolSize: [4, 6],
             edgeLabel: {
                 normal: {
-                    show: true,
                     textStyle: {
-                        fontSize: 10,
+                        fontSize: 20,
                     },
-                    formatter: '{c}',
                 },
             },
-            data: [
-                {
-                    name: '徐贱云',
-                    draggable: true,
-                },
-                {
-                    name: '冯可梁',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '邓志荣',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '李荣庆',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '郑志勇',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '赵英杰',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '王承军',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '陈卫东',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '邹劲松',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '赵成',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '陈现忠',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '陶泳',
-                    category: 1,
-                    draggable: true,
-                },
-                {
-                    name: '王德福',
-                    category: 1,
-                    draggable: true,
-                },
-            ],
-            links: [
-                {
-                    source: 0,
-                    target: 1,
-                    category: 0,
-                    value: '朋友',
-                },
-                {
-                    source: 0,
-                    target: 2,
-                    value: '战友',
-                },
-                {
-                    source: 0,
-                    target: 3,
-                    value: '房东',
-                },
-                {
-                    source: 0,
-                    target: 4,
-                    value: '朋友',
-                },
-                {
-                    source: 1,
-                    target: 2,
-                    value: '表亲',
-                },
-                {
-                    source: 0,
-                    target: 5,
-                    value: '朋友',
-                },
-                {
-                    source: 4,
-                    target: 5,
-                    value: '姑姑',
-                },
-                {
-                    source: 2,
-                    target: 8,
-                    value: '叔叔',
-                },
-                {
-                    source: 0,
-                    target: 12,
-                    value: '朋友',
-                },
-                {
-                    source: 6,
-                    target: 11,
-                    value: '爱人',
-                },
-                {
-                    source: 6,
-                    target: 3,
-                    value: '朋友',
-                },
-                {
-                    source: 7,
-                    target: 5,
-                    value: '朋友',
-                },
-                {
-                    source: 9,
-                    target: 10,
-                    value: '朋友',
-                },
-                {
-                    source: 3,
-                    target: 10,
-                    value: '朋友',
-                },
-                {
-                    source: 2,
-                    target: 11,
-                    value: '同学',
-                },
-            ],
+            data: stations,
+            links: links,
+            categories: categories,
             lineStyle: {
                 normal: {
                     opacity: 0.9,
-                    width: 1,
+                    width: 6,
                     curveness: 0,
                 },
             },
@@ -237,7 +509,7 @@ class EchartsForce extends Component {
         return (
             <ReactEcharts
                 option={option}
-                style={{ height: '400px', width: '100%' }}
+                style={{ height: '700px', width: '1400px' }}
                 className={'react_for_echarts'}
             />
         );