bizchart图表封装之多条折线图

多条折线图：

         顾名思义，有多条折线

封装：

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

注意：

     1、代码使用TypeScript实现

     2、本次代码实现的均是曲线折线图，若只想是折线图，将去掉  <Geom type="line" shape="smooth" />中的shape="smooth"即可，即默认是折线图，增加shape="smooth"可将其变为曲线折线；

    3、数据源data最好处理成类似{type:'type',name:'name',value:'value'}这种格式，不需要使用transform，就可以直接使用

代码：

import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';

/**
 *分组折线图
 */
interface ICurvedProps {
  data: any; // 数据源
  xAxis: string; // x轴坐标
  yAxis: string; // y轴坐标
  showTitle?: boolean; // 是否显示坐标轴的title
  titleOffset?: number | undefined;
  xNickName?: string;
  yNickName?: string;
  legendName: string; // 图例对应的变量
  color?: string[];
  yRang?: number[]; // 限定y轴的数据范围
  format?: string; // 格式化文本内容--单位  比如 m 、kg、%
}
const Curved: React.FC<ICurvedProps> = props => {
  const {
    data,
    xAxis,
    yAxis,
    showTitle,
    xNickName,
    yNickName,
    legendName,
    color,
    yRang,
    format,
  } = props;
  const cols: {
    [key: string]: { [key: string]: string | number | string[] | number[] | any };
  } = {};
  cols[xAxis] = {
    alias: showTitle && xNickName ? xNickName : xAxis,
  };
  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>
      <Ch