You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
4.5 KiB
167 lines
4.5 KiB
import React from 'react'
|
|
import * as echarts from 'echarts/core';
|
|
import {
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
DataZoomComponent
|
|
} from 'echarts/components';
|
|
import { CustomChart } from 'echarts/charts';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
import styled from 'styled-components'
|
|
|
|
echarts.use([
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
DataZoomComponent,
|
|
CustomChart,
|
|
CanvasRenderer
|
|
]);
|
|
|
|
|
|
class Gannt extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
renderItem(params, api) {
|
|
var categoryIndex = api.value(0);
|
|
var start = api.coord([api.value(1), categoryIndex]);
|
|
var end = api.coord([api.value(2), categoryIndex]);
|
|
var height = api.size([0, 1])[1] * 0.6;
|
|
var rectShape = echarts.graphic.clipRectByRect(
|
|
{
|
|
x: start[0],
|
|
y: start[1] - height / 2,
|
|
width: end[0] - start[0],
|
|
height: height
|
|
},
|
|
{
|
|
x: params.coordSys.x,
|
|
y: params.coordSys.y,
|
|
width: params.coordSys.width,
|
|
height: params.coordSys.height
|
|
}
|
|
);
|
|
return (
|
|
rectShape && {
|
|
type: 'rect',
|
|
transition: ['shape'],
|
|
shape: rectShape,
|
|
style: api.style()
|
|
}
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
// Generate mock data
|
|
this.props.categories.forEach( (category, index) => {
|
|
var baseTime = this.props.startTime;
|
|
for (var i = 0; i < this.props.dataCount; i++) {
|
|
var typeItem = this.props.types[Math.round(Math.random() * (this.props.types.length - 1))];
|
|
var duration = Math.round(Math.random() * 10000);
|
|
this.props.data.push({
|
|
name: typeItem.name,
|
|
value: [index, baseTime, (baseTime += duration), duration],
|
|
itemStyle: {
|
|
normal: {
|
|
color: typeItem.color
|
|
}
|
|
}
|
|
});
|
|
baseTime += Math.round(Math.random() * 2000);
|
|
}
|
|
});
|
|
|
|
// 初始化echarts实例，将其挂载到id为main的dom元素上展示
|
|
var myChart = echarts.init(document.getElementById("Gannt"));
|
|
console.log("下面是data");
|
|
console.log(this.props.data);
|
|
myChart.setOption({
|
|
tooltip: {
|
|
formatter: function (params) {
|
|
// const sec = parseInt(params.value[3], 10); // convert value to number if it's string
|
|
// let hours = Math.floor(sec / 3600); // get hours
|
|
// let minutes = Math.floor((sec - (hours * 3600)) / 60); // get minutes
|
|
// let seconds = sec - (hours * 3600) - (minutes * 60); // get seconds
|
|
// // add 0 if value < 10; Example: 2 => 02
|
|
// if (hours < 10) {hours = "0"+hours;}
|
|
// if (minutes < 10) {minutes = "0"+minutes;}
|
|
// if (seconds < 10) {seconds = "0"+seconds;}
|
|
// let lastTime = hours+':'+minutes+':'+seconds; // Return is HH : MM : SS
|
|
// return params.marker + params.name + ': ' + lastTime;
|
|
|
|
return "13:52分 \n 13:51分至15:26分(01:35:04) \n 学习"
|
|
}
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'inside',
|
|
filterMode: 'weakFilter',
|
|
showDataShadow: false,
|
|
top: 400,
|
|
labelFormatter: ''
|
|
},
|
|
{
|
|
type: 'inside',
|
|
filterMode: 'weakFilter'
|
|
}
|
|
],
|
|
grid: {
|
|
height: 'auto',
|
|
top: 0
|
|
},
|
|
xAxis: {
|
|
min: this.props.startTime,
|
|
max: 86400,
|
|
scale: true,
|
|
axisLabel: {
|
|
formatter: (value) => {
|
|
const sec = parseInt(value, 10); // convert value to number if it's string
|
|
let hours = Math.floor(sec / 3600); // get hours
|
|
let minutes = Math.floor((sec - (hours * 3600)) / 60); // get minutes
|
|
let seconds = sec - (hours * 3600) - (minutes * 60); // get seconds
|
|
// add 0 if value < 10; Example: 2 => 02
|
|
if (hours < 10) {hours = "0"+hours;}
|
|
if (minutes < 10) {minutes = "0"+minutes;}
|
|
if (seconds < 10) {seconds = "0"+seconds;}
|
|
return hours+':'+minutes+':'+seconds; // Return is HH : MM : SS
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
data: this.props.categories
|
|
},
|
|
series: [
|
|
{
|
|
type: 'custom',
|
|
renderItem: this.renderItem,
|
|
itemStyle: {
|
|
opacity: 1
|
|
},
|
|
encode: {
|
|
x: [1, 2],
|
|
y: 0
|
|
},
|
|
data: this.props.data
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
|
|
render() {
|
|
return (
|
|
<Div id="Gannt">
|
|
</Div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Gannt
|
|
|
|
const Div = styled.div`
|
|
width: 100%;
|
|
height: 45vh;
|
|
`
|