效果图
1、引入
2、 componentDidMount函数中获取数据并渲染
componentDidMount() {
let params = {};
api.getMeetingDurationChart(params).then(res => {
if (res.responseObject) {
for (let index in res.responseObject.charts) {
var item = res.responseObject.charts[index];
item.value = totalTime(item.value);
}
this.setState({
data: res.responseObject
});
//折线部分
const chart = new G2.Chart({
container: 'charts',
height: 60,
forceFit: true,
padding: 'auto'
});
chart.scale('value', {
min: 0
});
chart.scale('time', {
range: [0, 1]
});
chart
.area()
.color('#AFDEFF')
.position('time*value')
.shape('smooth');
chart.tooltip({
offset: 2,
title: null,
custom: true,
inPlot: false,
customFollow: true,
showTitle: false,
crosshairs: false,//垂直标准线
useHtml: true,
htmlContent: (title, items) => {
return (
'<div class="tooltip-custom"><p><span class="point"></span>' +
title +
'</p><p>' +
items[0].value +
'</p></div>'
);
}
});
chart
.line()
.color('#199FFF')
.position('time*value')
.size(2)
.shape('smooth'); //平滑过渡
chart.axis('time', false);
chart.axis('value', false);
chart.source(this.state.data.charts);
if (this.state.data.charts.length == 1) {
chart
.point()
.position('time*value')
.size(2)
.shape('circle')
.style({
lineWidth: 1
});
}
setTimeout(() => {
const e = document.createEvent('Event');
e.initEvent('resize', true, true);
window.dispatchEvent(e);
}, 50);
chart.render();
} else {
message.warning(res.message);
}
});
}
3、渲染节点
网友评论