forked from Gitlink/forgeplus-react
搜索页样式
This commit is contained in:
parent
4096c5f9eb
commit
c9fbffcb45
|
|
@ -186,6 +186,7 @@ class Activity extends Component{
|
|||
<div className="contentBox mt20">
|
||||
<div className="normalBox">
|
||||
<div class="normalBox-title">概览</div>
|
||||
|
||||
<div className="orderInfo">
|
||||
<div>
|
||||
<div className="percentLine prPercent">
|
||||
|
|
@ -273,7 +274,6 @@ class Activity extends Component{
|
|||
<SmoothLineTwo url={ai_shang_v4_url}/>
|
||||
<p>基于信息熵围绕项目社群的社区分裂、缩减、合并和扩大演化行为度量</p>
|
||||
|
||||
{/* <Demo url={ai_shang_v4_url}/> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3,43 +3,31 @@ import React ,{ useEffect } from 'react';
|
|||
import 'echarts/lib/chart/line';
|
||||
import * as echarts from 'echarts';
|
||||
import axios from 'axios';
|
||||
import { getdata } from './data'
|
||||
|
||||
function Demo({url}) {
|
||||
|
||||
useEffect(()=>{
|
||||
if(url){
|
||||
getInit(url);
|
||||
}
|
||||
},[url])
|
||||
Init();
|
||||
},[])
|
||||
|
||||
function getInit(url){
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
Init(result.data);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
function Init(data) {
|
||||
function Init() {
|
||||
let data = getdata();
|
||||
console.log(data);
|
||||
var huan_val = document.getElementById("Demo");
|
||||
var myEcharts = echarts.init(huan_val);
|
||||
let date = [];
|
||||
let array = [];
|
||||
let array1 = [];
|
||||
let array2 = [];
|
||||
let count = data.length > 50 ? 50 : data.length;
|
||||
for(var i= 0;i<=count;i++){
|
||||
date.push(data[i][0]);
|
||||
array.push(data[i][1]);
|
||||
array1.push(data[i][2]);
|
||||
array2.push(data[i][3]);
|
||||
}
|
||||
let array = [0];
|
||||
let array1 = [0];
|
||||
let array2 = [0];
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 2, //主要设置其间隔，间隔为3
|
||||
},
|
||||
type: 'time',
|
||||
data:date,
|
||||
boundaryGap: false,
|
||||
axisLabel:{
|
||||
month:`{M}月`
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -66,14 +54,14 @@ function Demo({url}) {
|
|||
top: '8%',
|
||||
},
|
||||
legend: {
|
||||
data: ['分裂指数', '缩减指数' ,'合并指数', '扩张指数']
|
||||
data: ['issue', 'fork' ,'commit']
|
||||
},
|
||||
color: ['#ff6868','#1684fc',"#02cafd",'#a491d7','#e840f7',"#36bba6","#7b32b2"],
|
||||
color: ['red','#36bba6',"skyblue",'#a491d7','#e840f7',"#36bba6","#7b32b2"],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
scale: true,
|
||||
boundaryGap: [0, '100%'],
|
||||
name: '社\n区\n演\n化\n熵',
|
||||
name: '',
|
||||
min:0,
|
||||
splitLine : {
|
||||
show : true,
|
||||
|
|
@ -83,120 +71,92 @@ function Demo({url}) {
|
|||
fontSize:14,
|
||||
padding:[0,70,-80,0]
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 20,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 20,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
},series:[
|
||||
{
|
||||
data: array,
|
||||
type: 'line',
|
||||
name:"index_split",
|
||||
name:"issue",
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
data: array1,
|
||||
type: 'line',
|
||||
name:"index_shrink",
|
||||
name:"fork",
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
data: array2,
|
||||
type: 'line',
|
||||
name:"index_merge",
|
||||
name:"commit",
|
||||
smooth: true
|
||||
},
|
||||
]
|
||||
};
|
||||
let interval = setInterval(function () {
|
||||
count ++ ;
|
||||
if(count <= 60 ){
|
||||
for (var i = 0; i < 2; i++) {
|
||||
array.shift();
|
||||
array1.shift();
|
||||
array2.shift();
|
||||
date.shift();
|
||||
date.push(data[count][0]);
|
||||
array.push(data[count][1]);
|
||||
array1.push(data[count][2]);
|
||||
array2.push(data[count][3]);
|
||||
}
|
||||
myEcharts.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: date
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: array,
|
||||
type: 'line',
|
||||
name:"index_split",
|
||||
showSymbol: false,
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
data: array1,
|
||||
type: 'line',
|
||||
name:"index_shrink",
|
||||
showSymbol: false,
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
data: array2,
|
||||
type: 'line',
|
||||
name:"index_merge",
|
||||
showSymbol: false,
|
||||
smooth: true
|
||||
},
|
||||
]
|
||||
});
|
||||
}else{
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 800);
|
||||
myEcharts.setOption(option);
|
||||
}
|
||||
|
||||
// setInterval(function () {
|
||||
// for (var i = 0; i < 5; i++) {
|
||||
// data.push(randomData());
|
||||
// data1.push(randomData()-100);
|
||||
// data2.push(randomData()-200);
|
||||
// }
|
||||
// myEcharts.setOption({
|
||||
// series: [
|
||||
// {
|
||||
// name: 'issue',
|
||||
// type: 'line',
|
||||
// showSymbol: false,
|
||||
// data: data,
|
||||
// smooth: true
|
||||
// },
|
||||
// {
|
||||
// name: 'fork',
|
||||
// type: 'line',
|
||||
// showSymbol: true,
|
||||
// data: data1,
|
||||
// smooth: true
|
||||
// },
|
||||
// {
|
||||
// name: 'commit',
|
||||
// type: 'line',
|
||||
// showSymbol: false,
|
||||
// data: data2,
|
||||
// smooth: true
|
||||
// }
|
||||
// ]
|
||||
// });
|
||||
// }, 1000);
|
||||
setTimeout(()=>{
|
||||
let count = data.length>15?15:data.length;
|
||||
for(var i = 0;i<count;i++){
|
||||
date.push(data[count][0]);
|
||||
array.push(data[count][1]);
|
||||
array1.push(data[count][2]);
|
||||
array2.push(data[count][3]);
|
||||
}
|
||||
let interval = setInterval(function () {
|
||||
count ++ ;
|
||||
if(count < data.length ){
|
||||
setValue(count)
|
||||
}else{
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 2000);
|
||||
},1000);
|
||||
|
||||
function setValue(count){
|
||||
for (var i = 0; i < 2; i++) {
|
||||
array.shift();
|
||||
array1.shift();
|
||||
array2.shift();
|
||||
date.shift();
|
||||
date.push(data[count][0]);
|
||||
array.push(data[count][1]);
|
||||
array1.push(data[count][2]);
|
||||
array2.push(data[count][3]);
|
||||
}
|
||||
myEcharts.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data:date
|
||||
},
|
||||
legend: {
|
||||
data: ['issue', 'fork' ,'commit']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: array,
|
||||
type: 'line',
|
||||
name:"issue",
|
||||
showSymbol: false,
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
data: array1,
|
||||
type: 'line',
|
||||
name:"fork",
|
||||
showSymbol: false,
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
data: array2,
|
||||
type: 'line',
|
||||
name:"commit",
|
||||
showSymbol: false,
|
||||
smooth: true
|
||||
},
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<div id="Demo" style={{height:"400px"}}></div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import React from 'react';
|
||||
import './index.scss';
|
||||
import dianzan from './image/dianzan.png';
|
||||
import fork from './image/fork.png';
|
||||
|
||||
export default (props) => {
|
||||
const { list } = props;
|
||||
|
||||
|
|
@ -16,9 +19,9 @@ export default (props) => {
|
|||
<h3 className="search-item-title" dangerouslySetInnerHTML={{ __html: item.title }} onClick={() => { itemClick(item) }}></h3>
|
||||
|
||||
{item.type == 1 && <p>
|
||||
<span className="search-icon"><i className="iconfont icon-dianjiliang mr3 font-12" />{item.watchersCount}</span>
|
||||
<span className="search-icon"><i className="iconfont icon-kongxing mr3 font-16" />{item.praisesCount}</span>
|
||||
<span className="search-icon"><i className="iconfont icon-fork mr3 font-16" />{item.forkedCount || 0}</span>
|
||||
<span className="search-icon"><i className="iconfont icon-morenguanzhu_ICON mr3 font-14" />{item.watchersCount}</span>
|
||||
<span className="search-icon"><i className="iconfont icon-dianzan11 mr3 font-18" />{item.praisesCount}</span>
|
||||
<span className="search-icon"><i className="iconfont icon-fork2 mr3 font-14" />{item.forkedCount || 0}</span>
|
||||
</p>}
|
||||
|
||||
</div >
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 481 B |
Binary file not shown.
|
After Width: | Height: | Size: 427 B |
|
|
@ -1,6 +1,9 @@
|
|||
.suit-main {
|
||||
.search-head {
|
||||
background: #eef2f5;
|
||||
background-color: #eef2f5;
|
||||
background-image: url(./image/bg.png);
|
||||
background-size: 100% 100%;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
|
|
@ -21,7 +24,8 @@
|
|||
}
|
||||
}
|
||||
.ant-tabs-top {
|
||||
background: #eef2f5;
|
||||
background: rgba(0,0,0,0);
|
||||
margin-top: -44px;
|
||||
}
|
||||
.ant-tabs-tabpane {
|
||||
background: #fff;
|
||||
|
|
@ -29,6 +33,7 @@
|
|||
.ant-tabs-bar {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-tabs-tab-active {
|
||||
color: #000;
|
||||
|
|
|
|||
Loading…
Reference in New Issue