bizchart3.x气泡图

bizcharts气泡图参考 https://bizcharts.alibaba-inc.com/product/bizcharts/demo/174

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  4. import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
  6. const scale = {
  7.   name: {
  8.     alias: '技术分布',
  9.     type: 'cat',
  10.     values: ['UI','PD', 'PR', 'SQL', 'API'],
  11.     tickCount: 5,
  12.   },
  13.   label: {
  14.     alias: '技术分布',
  15.   },
  16.   value: {
  17.     alias: '技能等级',
  18.   },
  19. };
  21. BubbleChart.propTypes = {
  22.   dataSource: PropTypes.array.isRequired,
  23.   height: PropTypes.number
  24. };
  26. function BubbleChart(props) {
  27.   const {dataSource, height = 360} = props
  29.   return (
  30.     <Chart
  31.       forceFit
  32.       height={height}
  33.       data={dataSource}
  34.       scale={scale}
  35.     >
  36.       <Tooltip showTitle={false} />
  37.       <Axis title name="name" />
  38.       <Axis title name="label" />
  39.       <Legend />
  41.       <Geom
  42.         type="point"
  43.         position="label*name"
  44.         color='label'
  45.         tooltip="name*value*label"
  46.         opacity={0.5}
  47.         shape="circle"
  48.         size={['value', [2, 16]]}
  49.         style={[
  50.           'name',
  51.           {
  52.             lineWidth: 1,
  53.             strokeOpacity: 1,
  54.             fillOpacity: 0.3,
  55.             opacity: 0.65,
  56.           },
  57.         ]}
  58.       />
  59.     </Chart>
  60.   );
  61. }
  63. export default React.memo(BubbleChart);