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 (
      

        
历年分值趋势
        

          

            
              
                {chartTit}
              
              
              
              
              
                
              
            
          
        
      
    );
  }

官网图表实例