bizcharts图表封装之基础折线图

基础折线图：

         由点（point）和线(line)组成

封装：

   数据源、坐标轴、是否显示坐标轴标题、横纵坐标范围限定、自定义图例及颜色

注意：

     bizcharts中单（柱状/折线）图默认不显示图例===》如果需要显示图例，需要自定义图例;代码使用TypeScript实现

代码：

import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
/**
 *基础折线图
 */
interface IBasicProps {
  data: any; // 数据源
  xAxis: string; // x轴坐标
  yAxis: string; // y轴坐标
  showTitle?: boolean; // 是否显示坐标轴的title
  titleOffset?: number | undefined;
  xNickName?: string;
  yNickName?: string;
  color?: string;
  yRang?: number[]; // 限定y轴的数据范围
  xRang?: number[]; // 限定X轴的数据范围
  format?: string; // 格式化文本内容--单位  比如 m 、kg、%
  legendMakerFill?: string; // 自定义图例的颜色
}
const Basic: React.FC<IBasicProps> = props => {
  const {
    data,
    xAxis,
    yAxis,
    showTitle,
    xNickName,
    yNickName,
    color,
    yRang,
    xRang,
    format,
    legendMakerFill,
  } = props;
  const cols: {
    [key: string]: { [key: string]: string | number | string[] | number[] | any };
  } = {};
  cols[xAxis] = {
    alias: showTitle && xNickName ? xNickName : xAxis,
  };
  if (xRang) {
    cols[xAxis].ticks = xRang;
  }
  cols[yAxis] = {
    min: 0,
    alias: showTitle && yNickName ? yNickName : yAxis,
    formatter: (val: number): number | string => {
      if (format && val > 0) {
        return `${val}${format}`;
      }
      return val;
    }, // 格式化文本内容，会影响到轴的label格式;
  };
  if (yRang) {
    cols[yAxis].ticks = yRang;
  }
  /* 坐标轴字体样式 */
  const axisLabelStyle: G2.AxisLabel = {
    textStyle: {
      fill: '#FFFFFF', // 文本的颜色
    },
  };
  return (
    <div>
      <Chart height={400} data={data} scale={cols} forceFit padding="auto">
        <Legend
          textStyle={
  {
            textAlign: 'start', // 文本对齐方向，可取值为： start middle end
            fill: '#FFF', // 文本的颜色
          }}
          custom
          items={[
            {
              value: yNickName,
              marker: {
                symbol: 'hyphen&