AntV 柱状图图表
Step 1
npm install @antv/g2
Step 2
创建柱状图容器
<div id="bar" />
代码截图:
代码生成效果
源码:
const chartData = [
0: {date: "Jan", num: 4}
1: {date: "Feb", num: 26}
2: {date: "Mar", num: 5}
3: {date: "Apr", num: 4}
4: {date: "May", num: 3}
5: {date: "Jun", num: 1}
6: {date: "Jul", num: 2}
7: {date: "Aug", num: 3}
8: {date: "Sep", num: 3}
9: {date: "Oct", num: 3}
10: {date: "Nov", num: 4}
11: {date: "Dec", num: 4}
];
useEffect(() => {
// 创建 Chart 对象
const chart = new Chart({
container: 'bar', // 指定图表容器 ID
autoFit: true, // 自适应宽度
height: 300, // 指定图表高度
});
// Step 2: 载入数据源
chart.data(chartData);
// 创建图形语法,绘制柱状图
chart
.interval() // 区间图
.position('date*num') // 创建图形语法
.style('num', (val) => { // 柱状图整体样式
return {
fillOpacity: 1, // 用于设置图形填充颜色的透明度,默认值是 1
lineWidth: 0, // 设置线段厚度的属性(即线段的宽度)
stroke: '#00A850', // 描边色、渐变或纹理,默认值为空
lineDash: [3, 2], // 设置线的虚线样式,可以指定一个数组
fill: '#00A850', // 填充色、渐变或纹理,默认值为空
};
})
.tooltip('date*num', (date, num) => { // 提示信息
return {
name: date,
value: num,
};
});
chart.tooltip({ // 配置提示信息
showTitle: false, // 是否默认标题
marker: {
stroke: '#FFF', // 描边色、渐变或纹理,默认值为空
fill: '#00A850', // 填充色、渐变或纹理,默认值为空
},
itemTpl: // 自定义提示信息模板
'<li class="g2-tooltip-list-item" style="font-weight: 500"><span style="color:#00A850; font-size: 16px">{value}</span><span style="color:#000; font-size: 14px; padding-left: 8px"> {title}</span></li>',
});
// 渲染图表
chart.render();
}, []);
return <div id="bar"