Rain-Bus/trailway-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

charts

Browse Source
This commit is contained in:
Your Nmae
2024-01-11 18:21:49 +08:00
parent efa0da93cb
commit e9561bfb2d
2 changed files with 483 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/charts/Echarts.tsx
View File

@@ -12,7 +12,7 @@ class Echarts extends React.Component {
render() { render() {
return ( return (
<div className="gutter-example"> <div className="gutter-example">
<Row gutter={16}> {/* <Row gutter={16}>
<Col className="gutter-row" md={24}> <Col className="gutter-row" md={24}>
<div className="gutter-box"> <div className="gutter-box">
<Card title="区域图" bordered={false}> <Card title="区域图" bordered={false}>
@@ -20,9 +20,9 @@ class Echarts extends React.Component {
</Card> </Card>
</div> </div>
</Col> </Col>
</Row> </Row> */}
<Row gutter={16}> <Row gutter={16}>
<Col className="gutter-row" md={12}> <Col className="gutter-row" md={24}>
<div className="gutter-box"> <div className="gutter-box">
<Card title="关系图" bordered={false}> <Card title="关系图" bordered={false}>
{/*<EchartsGraphnpm />*/} {/*<EchartsGraphnpm />*/}
@@ -30,15 +30,15 @@ class Echarts extends React.Component {
</Card> </Card>
</div> </div>
</Col> </Col>
<Col className="gutter-row" md={12}> {/* <Col className="gutter-row" md={12}>
<div className="gutter-box"> <div className="gutter-box">
<Card title="饼图" bordered={false}> <Card title="饼图" bordered={false}>
<EchartsPie /> <EchartsPie />
</Card> </Card>
</div> </div>
</Col> </Col> */}
</Row> </Row>
<Row gutter={16}> {/* <Row gutter={16}>
<Col className="gutter-row" md={24}> <Col className="gutter-row" md={24}>
<div className="gutter-box"> <div className="gutter-box">
<Card title="散点图" bordered={false}> <Card title="散点图" bordered={false}>
@@ -46,10 +46,10 @@ class Echarts extends React.Component {
</Card> </Card>
</div> </div>
</Col> </Col>
</Row> </Row> */}
</div> </div>
) );
} }
} }
export default Echarts; export default Echarts;

676
src/components/charts/EchartsForce.tsx
View File

@@ -4,228 +4,500 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-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 = { const option = {
title: { title: {
text: '', text: '地铁示意图',
}, },
color: ['#EE1822', '#FDD303', '#00b2ff'],
tooltip: {}, tooltip: {},
legend: legend,
animationDurationUpdate: 1500, animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut', animationEasingUpdate: 'quinticInOut',
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
},
},
},
legend: {
x: 'center',
show: false,
data: ['朋友', '战友', '亲戚'],
},
series: [ series: [
{ {
type: 'graph', type: 'graph',
layout: 'force', layout: 'none',
symbolSize: 45, symbolSize: 6,
focusNodeAdjacency: true, focusNodeAdjacency: true,
roam: true, roam: false,
categories: [
{
name: '朋友',
itemStyle: {
normal: {
color: '#009800',
},
},
},
{
name: '战友',
itemStyle: {
normal: {
color: '#4592FF',
},
},
},
{
name: '亲戚',
itemStyle: {
normal: {
color: '#3592F',
},
},
},
],
label: { label: {
normal: { show: true,
show: true, rotate: '30',
textStyle: { color: 'black',
fontSize: 12, position: 'right',
},
},
}, },
force: { edgeSymbol: ['none', 'none'],
repulsion: 1000, edgeSymbolSize: [4, 6],
},
edgeSymbolSize: [4, 50],
edgeLabel: { edgeLabel: {
normal: { normal: {
show: true,
textStyle: { textStyle: {
fontSize: 10, fontSize: 20,
}, },
formatter: '{c}',
}, },
}, },
data: [ data: stations,
{ links: links,
name: '徐贱云', categories: categories,
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: '同学',
},
],
lineStyle: { lineStyle: {
normal: { normal: {
opacity: 0.9, opacity: 0.9,
width: 1, width: 6,
curveness: 0, curveness: 0,
}, },
}, },
@@ -237,7 +509,7 @@ class EchartsForce extends Component {
return ( return (
<ReactEcharts <ReactEcharts
option={option} option={option}
style={{ height: '400px', width: '100%' }} style={{ height: '700px', width: '1400px' }}
className={'react_for_echarts'} className={'react_for_echarts'}
/> />
); );