BizCharts製作簡單的柱狀圖

開發中，經常會用圖表直接的展示數據，如何使用BizCharts製作柱狀圖呢？

參考網址：https://bizcharts.net/

簡單柱狀圖的編碼過程

1. 引入相關組件

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

2.數據的處理（以下是我模擬的一條數據）

let data = [
    {
        name:'張三',
        count:9
    },
    {
        name:'李四',
        count:10
    },     
    {
        name:'王五',
        count:20
    },
    {
        name:'小六',
        count:40
    },
    {
        name:'小張',
        count:1
    },
    {
        name:'小王',
        count:7
    },
    {
        name:'小明',
        count:6
    },
    {
        name:'小玉',
        count:10
    }
]

3.頁面佈局

height：指定圖標的高度，單位爲’px’;
data：設置圖表的數據源;
scale：配置數據比例尺；
forceFit：圖表的寬度自適應開關，默認爲false，設置爲 true 時表示自動取 dom（實例容器）的寬度；izcharts 圖表只提供自適應父容器寬度的功能，不能自適應高度；

<div>
    <Chart height={400} data={data} scale={scales} forceFit>
         <h2 className='main-title' style={styles.mainTitle}>各學生完成作業的次數</h2>
         <Axis name="name" title={true} />
         <Axis name="count" title={true} />
         <Tooltip
               crosshairs={{
                    type: "y"
               }} 
          />
         <Geom type="interval" position="name*count" size={20} />
     </Chart>
</div>

4.樣式及參數設置

設置標題的樣式

const styles = {
            mainTitle: {
                color: '#333',
                padding: 10,
                textAlign: 'center'
            },
       }

scales刻度的設置

const scales = {
            count: {
                alias: '次數', // 爲屬性定義別名
                min: 0, // 定義數值範圍的最小值
                max: 50, // 定義數值範圍的最大值
                tickInterval: 5, // 用於指定座標軸各個標度點的間距，是原始數據之間的間距差值，tickCount 和 tickInterval 不可以同時聲明。
            },
            name: {
                alias: '名字'
            },
        };

最終展示效果

後續未完,請繼續關注,Thanks!☺