forked from Gitlink/forgeplus-react
78 lines
1.6 KiB
JavaScript
78 lines
1.6 KiB
JavaScript
import React ,{ useEffect } from 'react';
|
|
import * as echarts from 'echarts';
|
|
import 'echarts/lib/chart/line';
|
|
import axios from 'axios';
|
|
|
|
function Line({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) {
|
|
let chartDom = document.getElementById('branchLine');
|
|
let myChart = echarts.init(chartDom);
|
|
let option;
|
|
myChart.setOption(
|
|
(option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
color: ['orange'],
|
|
grid: {
|
|
left: '5%',
|
|
right: '1%',
|
|
top: '8%'
|
|
},
|
|
xAxis: {
|
|
data: data.map(function (item) {
|
|
return item[0];
|
|
})
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
scale: true,
|
|
name: '社\n群\n激\n发\n熵',
|
|
min:0,
|
|
splitLine : {
|
|
show : true,
|
|
},
|
|
nameLocation:'end',
|
|
nameTextStyle:{
|
|
fontSize:14,
|
|
padding:[0,70,-80,0]
|
|
}
|
|
},
|
|
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; |