可以直接在官网里运行代码:
import { Chart } from '@antv/g2';
// 会自动过滤掉重复日期的值
const data = [
{
Data: '2021-07-24 8:00',
sales: 57
},
{
Data: '2021-07-24 12:00',
sales: 55
},
{
Data: '2021-07-24 16:00',
sales: 60
},
{
Data: '2021-07-24 20:00',
sales: 54
},
{
Data: '2021-07-24 24:00',
sales: 57
},
{
Data: '2021-07-25 4:00',
sales: 56
},
{
Data: '2021-07-25 8:00',
sales: 62
},
{
Data: '2021-07-25 12:00',
sales: 60
},
{
Data: '2021-07-25 16:00',
sales: 55
},
{
Data: '2021-07-25 20:00',
sales: 58
},
{
Data: '2021-07-25 24:00',
sales: 60
},
{
Data: '2021-07-26 4:00',
sales: 57
},
{
Data: '2021-07-26 8:00',
sales: 55
},
{
Data: '2021-07-26 12:00',
sales: 57
},
{
Data: '2021-07-26 16:00',
sales: 58
},
{
Data: '2021-07-26 20:00',
sales: 60
},
{
Data: '2021-07-26 24:00',
sales: 57
}
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
// 显示刻度
chart.axis('type', {
tickLine: {
alignTick: false,
},
});
chart.data(data);
chart.scale('sales', {
nice: true,
min: 40,
alias: '当前水位',
});
chart.axis('sales', {
label: {
formatter: text => {
return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ' m';
}
}
});
chart.tooltip({
showMarkers: false,
});
// 框选
chart.interaction('brush');
// x轴折线显示数据
chart.axis('Data', {
label: {
autoRotate: true,
formatter: (params) => {
let newParamsName = '';
const paramsNameNumber = params.length;
const provideNumber = 10; // 一行显示几个字符
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = '';
const start = p * provideNumber;
const end = start + provideNumber;
if (p === rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
}
});
chart
.interval() // 设置柱状图
.position('Data*sales') // 指定展示的数据
.tooltip('Data*sales', (Data: any, sales: any) => { // 设置tooltip
return {
name: Data,
value: sales + 'm',
};
})
.color('sales', '#6395F9'); // 指定柱子颜色
// .size('20'); // 设置柱子宽度
// chart.interaction('element-active');//在鼠标hover时出发交互
// chart.interaction('active-region'); //鼠标交互方式,在柱子上方时触发交互
chart.interaction('active-region');
chart.render();