React项目中使用Bizcharts过程记录

近期项目中有使用到bizcharts，遇到不少问题，在此记录一下。
引入过程不赘述

 _genscoreTrends() {
    const styles = this._getStyles();
    const trueData = this.props.chart_data.datas;
    const dftMap = keyBy(trueData, 'type');
    const userData = values(dftMap);
    const showData = [];
    forEach(trueData, (l) => {
      if (l.type === chartTit) {
        const wholeC = { year: l.year, perforScore: l.perforScore };
        showData.push(wholeC);
      }
    });
//数据
    const data = [
      {
        year: '2020 年',
        perforScore: 38
      }
    ];
    const cols = {
      perforScore: {
        tickInterval: 20
      }
    };
//设置xy轴的显示
    const scale = {
      perforScore: { alias: '分值', tickInterval: 100, min: 0, max: 500 },
      year: { alias: '年份', tickInterval: 1, min: 1, max: 6, tickCount: 6, },
    };
//设置标题
    const title = {
      textStyle: {
        fontSize: '15',
        textAlign: 'center',
        fill: '#000',
      }
    };
//设置y轴网格柱子
    const grid = {
      align: 'center', // 网格顶点从两个刻度中间开始
      type: 'line', // 网格的类型
      lineStyle: {
        stroke: '#d9d9d9', // 网格线的颜色
        lineWidth: 1, // 网格线的宽度复制代码
        lineDash: [4, 4] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
      }
    };
//设置刻度线
    const tickLine = {
      stroke: '#000',
      value: 6 // 刻度线长度
    };
//设置文字
    const label = {
      textStyle: {
        fill: '#000'
      }
    };
    return (
      <div style={styles.trends}>
        <p style={styles.cardTit}>历年分值趋势</p>
        <div style={styles.trendsBox}>
          <div style={styles.trendsRight}>
            <Chart height={400} data={showData || data} scale={scale} forceFit>
              <span style={styles.mainTitle}>
                {chartTit}
              </span>
              <Axis
                name="year" title={title}
                grid={null}
                tickLine={tickLine}
                label={label}
                line={{
                  stroke: '#000'
                }}
              />
              <Axis
                name="perforScore" title={title}
                grid={grid}
                tickLine={tickLine}
                label={label}
                line={{
                  stroke: '#000'
                }}
              />
              <Tooltip
                crosshairs={{
                  type: 'y'
                }}
              />
              <Geom type="interval" position="year*perforScore" size={50}>
                <Label content="perforScore" />
              </Geom>
            </Chart>
          </div>
        </div>
      </div>
    );
  }

官网图表实例