bizcharts图表封装之基础折线图

最新推荐文章于 2024-08-13 08:48:42 发布

懒得懒

最新推荐文章于 2024-08-13 08:48:42 发布

阅读量2.2k

点赞数 1

分类专栏： bizchart

本文链接：https://blog.csdn.net/wuChiSha/article/details/103178877

版权

本文介绍了如何使用bizcharts封装基础折线图，包括数据源、坐标轴配置、图例显示和颜色定制。特别是针对数据量大时，通过添加Slider组件实现带滚动条的显示功能。

摘要由CSDN通过智能技术生成

基础折线图：

由点（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&