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>
    );
  }

官網圖表實例