react echars 圆形日历图参考

import ReactEchartsCore from 'echarts-for-react/lib/core';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/heatmap';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/graphic';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/visualMap';
import 'echarts/extension/bmap/bmap';
import echarts from 'echarts/lib/echarts';
import { HEATMAP_CHARTS_COLORS_MANY } from '@/src/common/constants';
import React, { useRef } from 'react';

import { Box } from '../Box';
import { ChartTitle } from './ChartTitle';

const CalendarHeatmap: React.FC<any> = ({
  title,
  chartData,
  height,
  loading = false,
  range,
  max,
  t
}) => {
  const monthCounter = useRef(0);

  const lineOption = {
    title: {
      top: 30,
      left: 'center'
    },
    visualMap: {
      min: 0,
      max: max,
      type: 'piecewise',
      orient: 'horizontal',
      top: 65,
      right: 'right',
      text: ['多', '少'],
      padding: -10,
      itemSymbol: 'circle',
      selectedMode:false,
      inRange: {
        color: HEATMAP_CHARTS_COLORS_MANY,
        symbol: 'circle',
      },

      splitNumber: 11,
      showLabel: false,
    },
    calendar: {
      top: 130,
      left: 40,
      right: 10,
      cellSize: [18, 18],
      splitLine: true,
      range: range,
      itemStyle: {
        borderWidth: 2,
        borderColor: 'transparent'
      },
      dayLabel: {
        nameMap: [t('Su'), '', '', t('We'), '', '', t('Sa')]
      },
      yearLabel: { show: false },
      monthLabel: {
        show: true,
        backgroundColor: '#EAF0F7',
        borderRadius: 14,
        shadowColor: 'green',
        padding: [5, 10]
      }
    },
    series: {
      coordinateSystem: 'calendar',
      data: chartData,
      type: 'graph',
      edgeSymbol: ['none'],
      symbolSize: 15,
      calendarIndex: 0,
      itemStyle: {
        boder: 'none'
      }
    },
    tooltip: [
      {
        trigger: 'item',
        show: true,
        formatter: (value) => {
          return value.data.join(' : ');
        }
      }
    ],
  };
  return (
    <div className="chart-container">
      {title && <ChartTitle title={title} />}
      {loading ? (
        <Box loading={loading} height={height} />
      ) : (<ReactEchartsCore echarts={echarts}   option={lineOption} />
      )}
    </div>
  );
};

export { CalendarHeatmap };

需要注意的是这个是在echars4.9.0版本下实现的