import React,{ PureComponent } from 'react';
// import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import ReactEcharts from 'echarts-for-react';
// import echarts from 'echarts/lib/echarts';
// import G6 from '@ali/g6';
import { Graph } from 'g6-for-react';
@connect(({ performancetesting }) => {
return performancetesting;
})
export default class Performancetesting extends PureComponent {
componentDidMount() {
// const data = {
// "nodes": [
// {
// "x": 140,
// "y": 210,
// "id": "node1"
// },
// {
// "x": 270,
// "y": 210,
// "id": "node2"
// }
// ],
// "edges": [
// {
// "source": "node1",
// "id": "edge1",
// "target": "node2"
// }
// ]
// };
// const net = new G6.Net({
// id: 'c1', // 容器ID
// 500, // 画布宽
// height: 500 // 画布高
// });
// net.source(data.nodes, data.edges);
// net.render();
}
getG6Demo = () => {
const data = {
"nodes": [
{
"x": 140,
"y": 210,
"id": "node1"
},
{
"x": 270,
"y": 210,
"id": "node2",
style: { // 关键形样式（优先级高于color）
fill: 'red',
stroke: 'blue'
},
}
],
"edges": [
{
"source": "node1",
"id": "edge1",
"target": "node2"
}
]
};
return <Graph fitView='cc' data={data} height={500} animate />
}
G2Demo = () => {
const data = [
{ type: '序列1', year: '1991', value: 3 },
{ type: '序列1', year: '1992', value: 4 },
{ type: '序列1', year: '1993', value: 3.5 },
{ type: '序列1', year: '1994', value: 5 },
{ type: '序列1', year: '1995', value: 4.9 },
{ type: '序列1', year: '1996', value: 6 },
{ type: '序列1', year: '1997', value: 7 },
{ type: '序列1', year: '1998', value: 9 },
{ type: '序列1', year: '1999', value: 13 },
{ type: '序列2', year: '1991', value: 6 },
{ type: '序列2', year: '1992', value: 8 },
{ type: '序列2', year: '1993', value: 5.5 },
{ type: '序列2', year: '1994', value: 7 },
{ type: '序列2', year: '1995', value: 9.9 },
{ type: '序列2', year: '1996', value: 6 },
{ type: '序列2', year: '1997', value: 5 },
{ type: '序列2', year: '2000', value: 10 },
{ type: '序列2', year: '1999', value: 19 },
{ type: '序列3', year: '1991', value: 2 },
{ type: '序列3', year: '1992', value: 6 },
{ type: '序列3', year: '1993', value: 9 },
{ type: '序列3', year: '1994', value: 10 },
{ type: '序列3', year: '1995', value: 15 },
{ type: '序列3', year: '1996', value: 8 },
{ type: '序列3', year: '1997', value: 5 },
{ type: '序列3', year: '1998', value: 4.6 },
{ type: '序列3', year: '2000', value: 4 },
];
const arr = [];
data.forEach(item => {
if (!arr.includes(item.type)) {
arr.push(item.type);
}
})
const year = Array.from(new Set(data.map(item => item.year)));
const series = arr.map(item => {
const yearData = {};
data.filter(item1 => {
return item === item1.type
}).sort((a, b) => Number(a.year) - Number(b.year)).forEach(d => {
yearData[d.year] = d.value;
})
return {
name: item,
type:'line',
// xAxisIndex: 1,
smooth: true,
data: year.map(y => yearData[y])
};
})
const option1 = {
title: {
text: 'demo',
left: 'center'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: year
},
yAxis: {},
tooltip: {
show: true,
trigger: 'axis'
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series
};
return (
<ReactEcharts
option={option1}
style={{height: 400}}
/>
);
}
render(){
let base = +new Date(1968, 9, 3);
const oneDay = 24 * 3600 * 1000;
const date = [];
const data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
const now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
const option = {
tooltip: {
trigger: 'axis',
position: (pt) => {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: '大数据量面积图',
},
toolbox: {
feature: {
dataView: {readOnly: false},
dataZoom: {
yAxisIndex: 'none'
},
magicType: {
type: ['line', 'bar', 'stack', 'tiled'],
show: true
},
restore: {},
saveAsImage: {},
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'模拟数据',
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
smooth: true,
sampling: 'average'
},
data,
markPoint: {
data: [
{type: 'max', name:'最大值'},
{type: 'min' ,name: '最小值'}
]
}
}
]
};
return (
<div>Performancetesting
<ReactEcharts
option={option}
style={{height: 400}}
/>
{this.G2Demo()}
{this.getG6Demo()}
</div>
);
}
}