AntV 折线图

AntV 折线图

Step 1

npm install @antv/g2

Step 2
创建折线图容器

<div id='lineChart' />

Step 3
渲染效果


源码：

 const data: any = [
  {date: "01/01/2021", num: 12},
  {date: "01/10/2021", num: 3},
  {date: "01/20/2021", num: 4},
  {date: "01/28/2021", num: 5},
  {date: "02/01/2021", num: 5},
  {date: "02/10/2021", num: 5},
  {date: "02/15/2021", num: 1},
  {date: "02/18/2021", num: 1},
  {date: "02/20/2021", num: 5},
  {date: "02/21/2021", num: 1},
  {date: "02/22/2021", num: 14},
  {date: "02/23/2021", num: 12},
  {date: "02/24/2021", num: 13},
  {date: "03/01/2021", num: 3},
  {date: "03/10/2021", num: 1},
  {date: "03/15/2021", num: 3},
 ]
  useEffect(() => {
    // 创建 Chart 对象
    const chart = new Chart({
      container: 'lineChart', // 指定图表容器 ID
      autoFit: true, // 自适应宽度
      height: 300, // 指定图表高度
    });

    chart.data(data); // 载入数据源
    chart.scale({ // 度量
      date: {
        range: [0, 1], // 输出域、值域，表示在绘图范围内可用于绘制的范围。
        tickMethod: 'log', // 计算数字的 ticks 方法，按照 log 的函数来计算，生成 [0, 10, 100, 1000] 类似的 ticks
      },
      num: {
        min: 0,
        nice: true, // 自动调整 min、max 
      },
    });

    chart.tooltip({ // 配置提示信息
      showCrosshairs: true, // 是否显示 tooltips 辅助线
      shared: true, // true 表示合并当前点对应的所有数据并展示，false 表示只展示离当前点最逼近的数据内容
      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
      .line()
      .position('date*num')
      .style('num', (val) => { // 图表样式
        console.log(val, 'line');
        return {
          stroke: '#00A850',
        };
      });

    chart.render();
  }, []);

  return <div id="lineChart" />;