修改群智激发熵

src/forge/Activity/Activity.js

@@ -5,8 +5,10 @@ import '../css/index.scss';
 import '../Branch/branch.scss';
 import './activity.css';
 import NoneData from '../Nodata';
-import Line from './line';
+import IssueLine from './issueLine';
+import BranchLine from './branchLine';
 import SmoothLine from './smoothLine';
+import ProjectScale from './projectScale';
 import Pie from './pie';
 
 
@@ -248,13 +250,16 @@ class Activity extends Component{
             <div class="normalBox-title">项目演化分析</div>
             <div className="echartBox">
               <span className="echartTitle">项目演化图</span>
-              <Line data={undefined}/>
-              <span className="echartTitle">分支演化图</span>
+              <ProjectScale data={undefined} name="项目规模演化趋势图"/>
+
               <SmoothLine />
+              
+              <span className="echartTitle">分支演化图</span>
+              <BranchLine data={undefined}/>
               <span className="echartTitle">Issue演化图</span>
-              <Pie />
+              <IssueLine data={undefined}/>
             </div>
-          </div>:""
+          </div>:''
         }
         <div className="commentsBox">
           <div className="trendsTop">

src/forge/Activity/ProjectScale.jsx

@@ -0,0 +1,84 @@
+import React ,{ useEffect } from 'react';
+import * as echarts from 'echarts';
+import 'echarts/lib/chart/line';
+import axios from 'axios';
+import { getdata } from './data1';
+
+function ProjectScale() {
+  useEffect(()=>{
+    Init();
+  },[])
+
+  function Init() {
+    let chartDom = document.getElementById('projectScale');
+    let myChart = echarts.init(chartDom);
+    let option;
+    console.log(getdata());
+    let data = getdata();
+    // axios.get('http://106.75.10.84:5000/Paddle/entropy').then((result)=>{
+      myChart.setOption(
+        (option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          title: {
+            text: '项目规模演化趋势图',
+            left: 'center',
+            y:'bottom'
+          },
+          color: ['orange'],
+          grid: {
+            left: '5%',
+            right: '1%',
+            bottom: '18%'
+          },
+          xAxis: {
+            data: data.map(function (item) {
+              return item[0];
+            })
+          },
+          yAxis: {},
+          dataZoom: [
+            {
+              startValue: '2022-06-01'
+            },
+            {
+              type: 'inside'
+            }
+          ],
+          series:  [{
+            type: 'line',
+            name:'index_split',
+            data: data.map(function (item) {
+              return item[1];
+            })
+          },{
+            type: 'line',
+            name:'index_shrink',
+            data: data.map(function (item) {
+              return item[2];
+            })
+          },{
+            type: 'line',
+            name:'index_merge',
+            data: data.map(function (item) {
+              return item[3];
+            })
+          },{
+            type: 'line',
+            name:'index_expand',
+            data: data.map(function (item) {
+              return item[4];
+            })
+          }]
+        })
+      );
+    // })
+    option && myChart.setOption(option);
+  }
+
+  return(
+    <div id="projectScale" style={{height:"400px"}}></div>
+  )
+}
+export default ProjectScale;

src/forge/Activity/branchLine.jsx

@@ -0,0 +1,60 @@
+import React ,{ useEffect } from 'react';
+import * as echarts from 'echarts';
+import 'echarts/lib/chart/line';
+import axios from 'axios';
+import { getdata } from './data';
+
+function Line() {
+  useEffect(()=>{
+    Init();
+  },[])
+
+  function Init() {
+    let chartDom = document.getElementById('branchLine');
+    let myChart = echarts.init(chartDom);
+    let option;
+    console.log(getdata());
+    let data = getdata();
+    // axios.get('http://106.75.10.84:5000/Paddle/entropy').then((result)=>{
+      myChart.setOption(
+        (option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          color: ['orange'],
+          grid: {
+            left: '5%',
+            right: '1%',
+            bottom: '18%'
+          },
+          xAxis: {
+            data: data.map(function (item) {
+              return item[0];
+            })
+          },
+          yAxis: {},
+          dataZoom: [
+            {
+              startValue: '2022-06-01'
+            },
+            {
+              type: 'inside'
+            }
+          ],
+          series: {
+            type: 'line',
+            data: data.map(function (item) {
+              return item[1];
+            })
+          }
+        })
+      );
+    // })
+    option && myChart.setOption(option);
+  }
+
+  return(
+    <div id="branchLine" style={{height:"400px"}}></div>
+  )
+}
+export default Line;

src/forge/Activity/smoothLine.jsx

@@ -1,41 +1,156 @@
 import React ,{ useEffect } from 'react';
 import echarts from 'echarts/lib/echarts';
 import 'echarts/lib/chart/line';
+import { getdata } from './data1';
+import { useState } from 'react';
 
-function SmoothLine({data}) {
+
+function SmoothLine() {
+
+  const [pieData,setPieData]=useState([
+    { value: 1048, name: 'issue' },
+    { value: 735, name: 'pr' },
+    { value: 580, name: 'star' }
+  ]);
   useEffect(()=>{
     Init();
   },[])
 
+  useEffect(()=>{
+    console.log(pieData);
+    InitPie(pieData);
+  },[pieData])
+
   function Init() {
-    var huan_val = document.getElementById("smoothline");
-    var myEcharts = echarts.init(huan_val);
+    let huan_val = document.getElementById("smoothline");
+    let myEcharts = echarts.init(huan_val);
+    let data = getdata();
+
     let option = {
+      title: {
+        text: '项目演化模式示意图',
+        left: 'center',
+        y:'bottom'
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: (params) => {
+          // console.log(params);
+          let pieData=[];
+          params.forEach(i=>{
+            pieData.push({
+              name:i.seriesName,
+              value:i.data
+            })
+          });
+          setPieData(pieData);
+        }
+      },
+      color: ['orange'],
+      grid: {
+        left: '5%',
+        right: '1%',
+        bottom: '18%'
+      },
       xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        data: data.map(function (item) {
+          return item[0];
+        })
       },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
+      yAxis: {},
+      dataZoom: [
         {
-          data: [150, 230, 224, 218, 135, 147, 260],
-          type: 'line',
-          smooth: true
+          startValue: '2022-06-01'
         },
         {
-          data: [100, 200, 290, 300, 100, 140, 260],
-          type: 'line',
-          smooth: true
+          type: 'inside'
         }
-      ]
-    };
+      ],
+      series: [{
+        type: 'line',
+        name:'pattern_extinct',
+        data: data.map(function (item) {
+          return item[1];
+        })
+      },{
+        type: 'line',
+        name:'pattern_emerge',
+        data: data.map(function (item) {
+          return item[2];
+        })
+      },{
+        type: 'line',
+        name:'pattern_split',
+        data: data.map(function (item) {
+          return item[3];
+        })
+      },{
+        type: 'line',
+        name:'pattern_shrink',
+        data: data.map(function (item) {
+          return item[4];
+        })
+      },{
+        type: 'line',
+        name:'pattern_merge',
+        data: data.map(function (item) {
+          return item[5];
+        })
+      },{
+        type: 'line',
+        name:'pattern_expand',
+        data: data.map(function (item) {
+          return item[6];
+        })
+      },{
+        type: 'line',
+        name:'pattern_undefined',
+        data: data.map(function (item) {
+          return item[7];
+        })
+      }]
+    }
+
+
     myEcharts.setOption(option);
   }
 
+  function InitPie(data) {
+    let huan_val = document.getElementById("smoothlinePie");
+    let chart = echarts.init(huan_val);
+    let option = {
+     
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left'
+      },
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          radius: '50%',
+          data: data,
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    };
+    chart.setOption(option);
+  }
+
   return(
-    <div id="smoothline" style={{height:"400px"}}></div>
+    <div>
+      <div id="smoothlinePie" style={{height:"400px"}}></div>
+      <div id="smoothline" style={{height:"400px"}}></div>
+    </div>
   )
 }
 export default SmoothLine;