基于 G2与G2Plot封装的React图表库, React-Antd技术栈
bizchart网站 https://bizcharts.net
bizchart鱼雀文档 https://www.yuque.com/antv/g2-docs/api-geom#label

bizcharts4x和 3x的区别

https://bizcharts.net/product/BizCharts4/category/61/page/104
image.png

折线图缩放

  1. bizchart@3.5.8 暂时不支持 4.x版本
  2. 缩放用到g2-brush
  3. 折线图缩放案例：https://codepen.io/fengyue/pen/WNNwJEZ?editors=1010
  1. import React from 'react';
  2. import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
  3. import Brush from '@antv/g2-brush';
  4. import dayJs from 'dayjs';
  6. export default class LineChart extends React.Component {
  7.   static defaultProps = {
  8.     data: [],
  9.     padding: 'auto',
  10.     className: '',
  11.   };
  13.   componentDidUpdate = () => {
  14.     if (this.chart && !this.brush) {
  15.       this.brush = new Brush({
  16.         canvas: this.chart.get('canvas'),
  17.         chart: this.chart,
  18.         type: 'X',
  19.         onBrushstart() {
  20.           this.chart.hideTooltip();
  21.         },
  22.         onBrushmove() {
  23.           this.chart.hideTooltip();
  24.         },
  25.       });
  26.     }
  27.   };
  29.   processData = (data = []) => {
  30.     return data.map(item => {
  31.       item.time = `${dayJs(item.time).format('YYYY-MM-DD HH:mm')}`;
  32.       return item;
  33.     });
  34.   };
  36.   render() {
  37.     const { height, data, padding, className } = this.props;
  38.     const scale = {
  39.       value: { min: 0 },
  40.       time: { tickCount: 20 },
  41.     };
  42.     return (
  43.       <div className={`g-flexbox g-justify-center ${className}`}>
  44.         <Chart
  45.           forceFit
  46.           onGetG2Instance={g2Chart => {
  47.             g2Chart.animate(false);
  48.             this.chart = g2Chart;
  49.           }}
  50.           scale={scale}
  51.           padding={padding}
  52.           height={height}
  53.           data={this.processData(data)}
  54.         >
  55.           <Axis name="time" />
  56.           <Axis name="value" />
  57.           <Geom type="line" position="time*value" size={2} shape="smooth" />
  58.           <Tooltip shared />
  59.         </Chart>
  60.       </div>
  61.     );
  62.   }
  63. }

legend图例

  1. legend API文档 https://bizcharts.net/product/bizcharts/category/7/page/29#g2
  2. 自定义图例形状 https://bizcharts.net/product/bizcharts/category/7/page/29#custom

折柱混合图表

  1. const legendItem = [
  2.   {
  3.     value: "百分比", // percent
  4.     marker: {
  5.       symbol: "square",
  6.       fill: "#3182bd", // 深蓝
  7.       radius: 5
  8.     }
  9.   },
  10.   {
  11.     value: "总量", // total
  12.     fill: '#99d8c9',
  13.     marker: {
  14.       symbol: "hyphen",
  15.       stroke: "#ffae6b",
  16.       radius: 5,
  17.       lineWidth: 3
  18.     }
  19.   },
  20.   {
  21.     value: "已使用", // used
  22.     fill: '#fdae6b',
  23.     marker: {
  24.       symbol: "hyphen",
  25.       stroke: "#336699",
  26.       radius: 5,
  27.       lineWidth: 3
  28.     }
  29.   }
  30. ]
  32. let chartIns = null
  33. const padding = [32, 16, 64, 48]
  34. const data = [
  35.   {
  36.     time: "10:16",
  37.     percent: 90,
  38.     total: 600,
  39.     used: 200
  40.   }
  41. ]
  43. const scale = {
  44.   util: {
  45.     alias: "使用率",
  46.     type: "linear",
  47.     formatter: val => `${val}%`,
  48.     tickCount: 5,
  49.     ticks: [0, 25, 50, 75, 100]
  50.   },
  51.   total: {
  52.     alias: "总量",
  53.     type: "linear",
  54.   },
  55.   used: {
  56.     alias: "已使用",
  57.     type: "linear",
  58.   }
  59. }
  62. class LineBar extends React.PureComponent {
  63.   render() {
  64.     return (
  65.       <Chart
  66.         autoFit
  67.         padding={padding}
  68.         scale={scale}
  69.         data={data}
  70.         height={360}
  71.         onGetG2Instance={chart => {
  72.           chartIns = chart
  73.         }}
  74.         >
  75.         <Legend
  76.           custom={true}
  77.           allowAllCanceled={true}
  78.           items={legendItem}
  80.           onClick={ev => {
  81.             const item = ev.item;
  82.             const value = item.value;
  83.             const checked = ev.checked;
  84.             const geoms = chartIns.getAllGeoms();
  86.             for (let i = 0; i < geoms.length; i++) {
  87.               const geom = geoms[i];
  89.               if (geom.getYScale().field === value) {
  90.                 if (checked) {
  91.                   geom.show();
  92.                 } else {
  93.                   geom.hide();
  94.                 }
  95.               }
  96.             }
  97.           }}
  98.           />
  99.         <Axis
  100.           name="used"
  101.           grid={null}
  102.           label={{
  103.             textStyle: {
  104.               fill: "#fdae6b"
  105.             }
  106.           }}
  107.           />
  108.         <Tooltip />
  110.         <Geom type="interval" position="time*util" color="#3182bd" />
  111.         <Geom
  112.           type="line"
  113.           position="time*total"
  114.           color="#9900ff"
  115.           size={3}
  116.           shape="smooth"
  117.           />
  118.         <Geom
  119.           type="line"
  120.           position="time*free"
  121.           color="#fdae6b"
  122.           size={3}
  123.           shape="smooth"
  124.           />
  125.       </Chart>
  126.     )
  127.   }
  128. }
  130. export default LineBar