1.定义一个全局chart,方便使用chart.changeData(newData)
2.定义chart时,原始数据不能为空,并且结构要与newData结构相同
3. scale(度量)、 legend(图表)、tooltip(提示)、axis(坐标轴)都可以自定义
const data = [
{PV: 0, IP: 0, time: ''}
]; //必须设置相同的数据结构的数据才能使用changeData
const chart = new Chart({
container: 'userViewMonthly',
height: 360,
autoFit: true, //宽度自适应
// padding: [20, 20, 20, 20]
});
this.setState({...this.state, chartMonthly: chart}); //方便后续调用此chart
chart.data(data);
chart.scale({
PV: {
alias: 'PV', //定义别名
nice: true, //优化数值范围
min: 0,
tickCount: 6,
style: {
fontSize: 10
}
},
IP: {
alias: 'IP', //定义别名
nice: true, //优化数值范围
min: 0,
tickCount: 6,
style: {
fontSize: 10
}
},
time: {
// type: 'cat',
// mask: 'MM/DD', //时间类型格式
range: [0,1],
style: {
fontSize: 10
}
}
});
// // 坐标轴;
// chart.axis('IP', {
// title: null, //坐标轴标题,
// label: {
// offset: 0, //label偏移量,
// textStyle: {
// fill: '#eee', //颜色
// rotate: 60, //旋转度数
// fontSize: 10,
// }
// },
// tickLine: {
// lineStyle: {
// length: 10,
// stroke: '#eee',
// lineDash: [3, 3]
// }
// },//刻度线
// grid: {
// lineStyle: {
// stroke: '#d9d9d9',
// lineWidth: 1,
// lineDash: [ 2, 2 ]
// }
// } //网格线
// });
// chart.annotation()
//提示
chart.tooltip({
showCrosshairs: true,
shared: true
});
//图例
// chart.legend('IP', {
// position: 'top-center',
// itemWidth: 50, //图项之间的距离,
// marker: {
symbol:'square'
} //形状
// });
// 画
chart.area().position('time*PV').color('#1890ff').style({
fillOpacity: 0.1,
});
chart.line().position('time*PV').color('#1890ff').shape('smooth');
chart.area().position('time*IP').color('#2fc25b').style({
fillOpacity: 0.1,
});
chart.line().position('time*IP').color('#2fc25b').shape('smooth');
// 绘制
chart.render();