雷达图参考 https://bizcharts.alibaba-inc.com/product/bizcharts/demo/130

image.png

  1. import React, { memo } from 'react';
  2. import PropTypes from 'prop-types'
  3. import {
  4.     Chart,
  5.     Geom,
  6.     Axis,
  7.     Tooltip,
  8.     Coord,
  9.     Legend,
  10.     Guide,
  11. } from 'bizcharts';
  13. const { Html } = Guide
  14. const scale = {
  15.     score: {
  16.         min: 0,
  17.         max: 100,
  18.     },
  19.     user: {
  20.         formatter: val => {
  21.             return ({ '1': '一季度', '2': '二季度', '3': '三季度', '4': '四季度' }[val])
  22.         }
  23.     },
  24. };
  26. RadarChart.propTypes = {
  27.     dataSource: PropTypes.array.isRequired,
  28.     onLegendItemClick: PropTypes.func.isRequired,
  29.     quarter: PropTypes.number.isRequired,
  30.     padding: PropTypes.array,
  31.     height: PropTypes.number,
  32. }
  35. function RadarChart(props) {
  36.     const {
  37.         dataSource, onLegendItemClick, padding = [24, 24, 48, 24], height = 360, quarter
  38.     } = props
  40.     return (
  41.         <Chart
  42.             forceFit
  43.             data={dataSource}
  44.             height={height}
  45.             padding={padding}
  46.             scale={scale}
  47.             filter={
  48.                 [['user', val => val === String(quarter)]]
  49.             }
  50.             onLegendItemClick={onLegendItemClick}
  51.         >
  52.             <Coord type="polar" radius={0.8} />
  53.             <Tooltip />
  55.             <Axis
  56.                 name="item"
  57.                 line={null}
  58.                 tickLine={null}
  59.                 grid={{
  60.                     lineStyle: {
  61.                         lineDash: null,
  62.                     },
  63.                     hideFirstLine: false,
  64.                 }}
  65.             />
  66.             <Axis
  67.                 name="score"
  68.                 line={null}
  69.                 tickLine={null}
  70.                 label={null}
  71.                 grid={{
  72.                     type: 'polygon',
  73.                     lineStyle: {
  74.                         lineDash: null,
  75.                     },
  76.                     alternateColor: 'rgba(0, 0, 0, 0.04)',
  77.                 }}
  78.             />
  79.             <Legend
  80.                 name="user"
  81.                 marker="circle"
  82.                 offset={30}
  83.                 selectedMode="single"
  84.             />
  86.             <Guide>
  87.                 <Html
  88.                     position={['50%', '50%']}
  89.                     html={(_, score) => {
  90.                         const { values } = score.score || []
  91.                         return nodeString(values)
  92.                     }}
  93.                     alignX="middle"
  94.                     alignY="middle"
  95.                 />
  96.             </Guide>
  98.             <Geom type="line" position="item*score" color="user" size={2} />
  99.             <Geom
  100.                 type="point"
  101.                 position="item*score"
  102.                 color="user"
  103.                 shape="circle"
  104.                 size={4}
  105.                 style={{
  106.                     stroke: '#fff',
  107.                     lineWidth: 1,
  108.                     fillOpacity: 1,
  109.                 }}
  110.             />
  111.         </Chart>
  112.     );
  113. }
  115. export default memo(RadarChart)
  118. // Guide.Html
  119. function nodeString(values) {
  120.     let avg = values.reduce((prev, next) => prev + next, 0) / values.length;
  121.     avg = Math.round(avg * 100 / 100)
  123.     return `<div style=color:#8c8c8c;text-align: center;width: 10em;><b style=color:#262626;font-size:24px>${avg}</b></div>`
  124. }

radar数据格式

  1. export const radarData = [
  2.   { 'item': 'UI设计', 'user': '1', 'score': 0, key: 'UI' },
  3.   { 'item': 'UI设计', 'user': '2', 'score': 0, key: 'UI' },
  4.   { 'item': 'UI设计', 'user': '3', 'score': 0, key: 'UI' },
  5.   { 'item': 'UI设计', 'user': '4', 'score': 0, key: 'UI' },
  7.   { 'item': 'WEB', 'user': '1', 'score': 0, key: 'WEB' },
  8.   { 'item': 'WEB', 'user': '2', 'score': 0, key: 'WEB' },
  9.   { 'item': 'WEB', 'user': '3', 'score': 0, key: 'WEB' },
  10.   { 'item': 'WEB', 'user': '4', 'score': 0, key: 'WEB' },
  12.   { 'item': 'FRONT', 'user': '1', 'score': 0, key: 'FRONT' },
  13.   { 'item': 'FRONT', 'user': '2', 'score': 0, key: 'FRONT' },
  14.   { 'item': 'FRONT', 'user': '3', 'score': 0, key: 'FRONT' },
  15.   { 'item': 'FRONT', 'user': '4', 'score': 0, key: 'FRONT' },
  17.   { 'item': 'MYSQL', 'user': '1', 'score': 0, key: 'MYSQL' },
  18.   { 'item': 'MYSQL', 'user': '2', 'score': 0, key: 'MYSQL' },
  19.   { 'item': 'MYSQL', 'user': '3', 'score': 0, key: 'MYSQL' },
  20.   { 'item': 'MYSQL', 'user': '4', 'score': 0, key: 'MYSQL' },
  22.   { 'item': 'NGINX', 'user': '1', 'score': 0, key: 'NGINX' },
  23.   { 'item': 'NGINX', 'user': '2', 'score': 0, key: 'NGINX' },
  24.   { 'item': 'NGINX', 'user': '3', 'score': 0, key: 'NGINX' },
  25.   { 'item': 'NGINX', 'user': '4', 'score': 0, key: 'NGINX' },
  26. ];