forked from Gitlink/forgeplus-react
65 lines
1.3 KiB
JavaScript
65 lines
1.3 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: '5%'
|
|
},
|
|
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; |