forgeplus-react/src/forge/users/Echart/Line.jsx

83 lines
1.6 KiB
JavaScript

import React ,{ useEffect } from 'react';
import * as echarts from 'echarts';
function Line({data}) {
useEffect(()=>{
if(data){
Init(data);
}
},[data])
function Init(d) {
var huan_val = document.getElementById("Line");
var myEcharts = echarts.init(huan_val);
let option = {
color: ["#f8e367", "#58c0f0", "#ff9e48"],
title: {
show:false
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['提交数', '疑修数', '合并请求数'],
right: 'center',
bottom: '4%',
},
grid: {
left: '4%',
right: '5%',
bottom: '16%',
containLabel: true
},
toolbox: {
feature: {
// saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: d.dates,
axisTick:{
show:false
}
},
yAxis: {
type: 'value',
axisLine:{
show:false
},
axisTick:{
show:false
},
minInterval:1,
splitNumber: 5,
},
series: [
{
name: '提交数',
type: 'line',
data: d.commits_count
},
{
name: '疑修数',
type: 'line',
data: d.issues_count
},
{
name: '合并请求数',
type: 'line',
data: d.pull_requests_count
}
]
};
myEcharts.setOption(option);
}
return(
<div id="Line" style={{height:"300px"}}></div>
)
}
export default Line;