Bizcharts API学习

缘起

项目开发和毕设都需要用到图表，在公司用的antd，索性用其下的Bizcharts。

缘因

大佬让我学习下其API，做下技术储备，项目开发会用到。

缘解

这是Bizcharts官方下的代码，一个简单的折线图，以此为例，学习相关API，做下简单的注释记录。

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

class Basic extends React.Component {
  render() {
    
    const lineStyle = {
            stroke: 'dddddd',
            fill: '#ffffff',
            lineDash: [2, 2, 3],
            lineWidth: 3
          }
    
    const data = [
      {
        year: "1991",
        value: 3
      },
      {
        year: "1992",
        value: 4
      },
      {
        year: "1993",
        value: 3.5
      },
      {
        year: "1994",
        value: 5
      },
      {
        year: "1995",
        value: 4.9
      },
      {
        year: "1996",
        value: 6
      },
      {
        year: "1997",
        value: 7
      },
      {
        year: "1998",
        value: 9
      },
      {
        year: "1999",
        value: 13
      }
    ];
    //scale 配置数据比例尺，该配置会影响数据在图表中的展示方式
    const cols = {
      //人话：y轴的最小值和最大值设置地方
      value: {//根据与自定义的数据源来判断该类型是什么？type: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow', 像这里是连续的数值，就是linear，不同类型可能有不同的参数，下面的min就是
        // min: 0,//数据最小值为该图表的纵坐标起始点,当需要界定是可以用到
        type: 'linear',//官方Demo经常省略
        minLimit : 0, //似乎和min区别就是y轴的最大值一定比数据中的最大值大，而min会刚刚好
        // max : 13
        alias : '数据别名'
      },
      year: {
        range: [0, 1],//TODO 度量转换的范围，不太懂
        alias : '这里也可以改动标题'
      }
    };
    //forceFit 图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度，此时width设置会失效。
    //只提供自适应父容器宽度的功能，不能自适应高度
    return (
      <div>
        <Chart height={400} data={data} scale={cols} forceFit>
          <Axis name="year" title line ={lineStyle}/>/*name字段对应数据源的字段名*/
          <Axis name="value" />
          <Tooltip
            crosshairs={{
              type: "cross"//rect: 矩形框,x: 水平辅助线,y: 垂直辅助线,cross: 十字辅助线
            }}
          />
          //几何标记对象，决定创建图表的类型,几何标记和坐标系共同决定的
          <Geom type="line" position="year*value" size={2} color={['value', '#ff0000-#00ff00' ]} />
          <Geom
            type="point"
            position="year*value"
            size={4}
            shape={"circle"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Basic />, mountNode)

缘尽

有网友说，注释如注解，注解如笔记，程序员的笔记。认真阅读官方文档，好好学习，多多笔记。

缘落

行有不得，反求诸己 --孟子