AntV 柱状图

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"