forked from Gitlink/forgeplus-react
112 lines
2.3 KiB
JavaScript
112 lines
2.3 KiB
JavaScript
import React ,{ useEffect } from 'react';
|
|
import echarts from 'echarts/lib/echarts';
|
|
import 'echarts/lib/chart/line';
|
|
import axios from 'axios';
|
|
|
|
function SmoothLineTwo({url}) {
|
|
|
|
useEffect(()=>{
|
|
if(url){
|
|
getInit(url);
|
|
}
|
|
},[url])
|
|
|
|
function getInit(url){
|
|
axios.get(url).then(result=>{
|
|
if(result && result.data){
|
|
Init(result.data);
|
|
}
|
|
}).catch(error=>{})
|
|
}
|
|
function Init(data) {
|
|
var huan_val = document.getElementById("smoothlinetwo");
|
|
var myEcharts = echarts.init(huan_val);
|
|
let date = [];
|
|
let array = [];
|
|
let array1 = [];
|
|
let array2 = [];
|
|
let array3 = [];
|
|
for(var i= 0;i<data.length;i++){
|
|
date.push(data[i][0]);
|
|
array.push(data[i][1]);
|
|
array1.push(data[i][2]);
|
|
array2.push(data[i][3]);
|
|
array3.push(data[i][4]);
|
|
}
|
|
let option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: date
|
|
},
|
|
grid: {
|
|
left: '5%',
|
|
right: '1%',
|
|
top: '8%',
|
|
},
|
|
legend: {
|
|
data: ['分裂指数', '缩减指数' ,'合并指数', '扩张指数']
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
color: ['#ff6868','#1684fc',"#02cafd",'#a491d7','#e840f7',"#36bba6","#7b32b2"],
|
|
yAxis: {
|
|
type: 'value',
|
|
scale: true,
|
|
name: '社\n区\n演\n化\n拓\n扑\n熵',
|
|
min:0,
|
|
splitLine : {
|
|
show : true,
|
|
},
|
|
nameLocation:'end',
|
|
nameTextStyle:{
|
|
fontSize:14,
|
|
padding:[0,70,-120,0]
|
|
}
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'inside',
|
|
start: 0,
|
|
end: 10
|
|
},
|
|
{
|
|
start: 0,
|
|
end: 10
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
data: array,
|
|
type: 'line',
|
|
name:"index_split",
|
|
smooth: true
|
|
},
|
|
{
|
|
data: array1,
|
|
type: 'line',
|
|
name:"index_shrink",
|
|
smooth: true
|
|
},
|
|
{
|
|
data: array2,
|
|
type: 'line',
|
|
name:"index_merge",
|
|
smooth: true
|
|
},
|
|
{
|
|
data: array3,
|
|
type: 'line',
|
|
name:"index_expand",
|
|
smooth: true
|
|
},
|
|
]
|
|
};
|
|
myEcharts.setOption(option);
|
|
}
|
|
|
|
return(
|
|
<div id="smoothlinetwo" style={{height:"400px"}}></div>
|
|
)
|
|
}
|
|
export default SmoothLineTwo; |