forked from Gitlink/forgeplus-react
107 lines
2.8 KiB
JavaScript
107 lines
2.8 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import * as echarts from 'echarts';
|
|
import './index.scss';
|
|
|
|
function Index(props) {
|
|
useEffect(()=>{
|
|
Init();
|
|
},[])
|
|
|
|
function Init() {
|
|
var myCharts = document.getElementById('main');
|
|
var myEcharts = echarts.init(myCharts);
|
|
var option = {
|
|
title: {
|
|
text: '项目实施进度表',
|
|
left: 10
|
|
},
|
|
legend: {
|
|
y: 'bottom',
|
|
data: ['计划时间', '实际时间'] //修改的地方1
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
left: 20
|
|
},
|
|
xAxis: {
|
|
type: 'time'
|
|
},
|
|
yAxis: {
|
|
data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function(params) {
|
|
var res = params[0].name + "</br>"
|
|
var date0 = params[0].data;
|
|
var date1 = params[1].data;
|
|
var date2 = params[2].data;
|
|
var date3 = params[3].data;
|
|
date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
|
|
date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
|
|
date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
|
|
date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
|
|
res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
|
|
res += params[2].seriesName + "~" + params[3].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
|
|
console.log(params[0]);
|
|
return res;
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '计划开始时间',
|
|
type: 'bar',
|
|
stack: 'test1',
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,0,0,0)'
|
|
}
|
|
},
|
|
data: []
|
|
},
|
|
{
|
|
name: '计划时间',
|
|
type: 'bar',
|
|
stack: 'test1',
|
|
//修改地方2
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F98563'
|
|
}
|
|
},
|
|
data: []
|
|
},
|
|
{
|
|
name: '实际开始时间',
|
|
type: 'bar',
|
|
stack: 'test2',
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,0,0,0)'
|
|
}
|
|
},
|
|
data: []
|
|
},
|
|
{
|
|
name: '实际时间',
|
|
type: 'bar',
|
|
stack: 'test2',
|
|
//修改地方3
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#A2E068'
|
|
}
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
};
|
|
myEcharts.setOption(option);
|
|
}
|
|
return(
|
|
<div className="ganttBox">
|
|
<div id="main" style={{height:"500px"}}></div>
|
|
</div>
|
|
)
|
|
}
|
|
export default Index; |