在react中使用Bizcharts 仪表盘（多色）

效果图

1. 核心代码

2. 使用

核心代码

import React, { useEffect, useState } from 'react';
import { Chart, Axis, Coord, Geom, Guide, Shape } from 'bizcharts';

const { Html, Arc } = Guide;


// 自定义Shape 部分 - 指针
Shape.registerShape('point', 'pointer', {
  drawShape(cfg, group) {
    let point = cfg.points[0]; // 获取第一个标记点
    point = this.parsePoint(point);
    const center = this.parsePoint({ // 获取极坐标系下画布中心点
      x: 0,
      y: 0,
    });
    // 绘制指针
    group.addShape('line', {
      attrs: {
        x1: center.x,
        y1: center.y,
        x2: point.x,
        y2: point.y,
        stroke: cfg.color,
        lineWidth: 1,
        lineCap: 'round',
      },
    });
    return group.addShape('circle', {
      attrs: {
        x: center.x,
        y: center.y,
        r: 6,
        stroke: cfg.color,
        lineWidth: 1,
        fill: '#fff',
      },
    });
  },
});

const color = ['#0fb746', '#00b0f0', '#1d41d5', '#ffff00', '#ff0000'];
// const arcNUM = [[0, 0.5], [0.50, 0.8], [0.8, 1], [1, 1.3], [1.3, 2]]; // 范围值
// const cols = {
//   value: {
//     min: 0,
//     max: daNum,
//     ticks: [0.2, 0.7, 0.9, 1.2, 1.8],
//   },
// };


/**
 * value 数值 number
 * arcNUM 范围值 [[0, 0.5], [0.50, 0.8], [0.8, 1], [1, 1.3], [1.3, 2]]
 * arcColor 颜色 ['#0fb746', '#00b0f0', '#1d41d5', '#ffff00', '#ff0000']
 * daNum 上限值 number 上限值*基数 === 真正的上限值
 * ticks 刻度值 [0.2, 0.7, 0.9, 1.2, 1.8]
 * Text 刻度文字 ['1', '2']
 * base 基数 number 其实就是倍数默认是100 上限值*基数 === 真正的上限值
 * keyName 文字 string
 */
export default ({ value, arcNUM, arcColor: arcCol = [], daNum, ticks, Text: ticksText = [], base: baseNum = 100, keyName }) => {

    const [data, setData] = useState([{ value: 0 }])
    const [values, setValues] = useState('')
    const lineWidth = 10

    useEffect(() => {
        if (value || value === 0) {
          setData([{ value: value/baseNum }])
        }
    }, [value])

    const val = data[0].value;
    return (
      <>
        {/* <input value={values} onChange={e => setValues(e.target.value)} /><button onClick={() => setData([{ value: +values }])} type="button">btn</button> */}
        <Chart height={120} data={data} scale={{value : { min: 0, max: daNum, ticks }}} padding={[0, 0, 10, 0]} forceFit>
            <Coord type="polar" startAngle={-9 / 8 * Math.PI} endAngle={1 / 8 * Math.PI} radius={0.75} />
            <Axis
                name="value"
                zIndex={2}
                line={null}
                label={{
                    offset: -8,
                    textStyle: {
                        fontSize: 12,
                        fill: '#CBCBCB',
                        textAlign: 'center',
                        textBaseline: 'middle',
                    },
                    formatter: (it) => {
                        if (+it === ticks[0]) {
                          return ticksText[0] || '优';
                        } if (+it === ticks[1]) {
                          return ticksText[1] || '良';
                        } if (+it === ticks[2]) {
                          return ticksText[2] || '中';
                        } if (+it === ticks[3]) {
                            return ticksText[3] || '差';
                        }
                        return ticksText[4] || '重';
                    },
                }}
                tickLine={{
                    // length: -24,
                    stroke: '#fff',
                    strokeOpacity: 1,
                }}
            />
            <Axis name="1" visible={false} />
            <Guide>
                <Arc
                    zIndex={0}
                    start={[0, 0.965]}
                    end={[daNum, 0.965]}
                    style={{ // 底灰色
                        stroke: 'rgba(0, 0, 0, 0.09)',
                        lineWidth,
                    }}
                />

                {/* 正常 */}
                { val >= arcNUM[0][1] &&
                <Arc
                    zIndex={1}
                    start={[0, 0.965]}
                    end={[val, 0.965]}
                    style={{
                        stroke: arcCol[0] || color[0],
                        lineWidth,
                    }}
                />}
                { val < arcNUM[0][1] &&
                <Arc
                    zIndex={1}
                    start={[0, 0.965]}
                    end={[val, 0.965]}
                    style={{
                        stroke: arcCol[0] || color[0],
                        lineWidth,
                    }}
                />}

                {/* 偏高 */}
                { val >= arcNUM[1][1] &&
                <Arc
                    zIndex={1}
                    start={[arcNUM[1][0], 0.965]}
                    end={[arcNUM[1][1], 0.965]}
                    style={{
                        stroke: arcCol[1] || color[1],
                        lineWidth,
                    }}
                />}
                { val >= arcNUM[1][0] && val < arcNUM[1][1] &&
                <Arc
                    zIndex={1}
                    start={[arcNUM[1][0], 0.965]}
                    end={[val, 0.965]}
                    style={{
                        stroke: arcCol[1] || color[1],
                        lineWidth,
                    }}
                />}

                {/* 超标 */}
                { val >= arcNUM[2][1] &&
                <Arc
                    zIndex={1}
                    start={[arcNUM[2][0], 0.965]}
                    end={[arcNUM[2][1], 0.965]}
                    style={{
                        stroke: arcCol[2] || color[2],
                        lineWidth,
                    }}
                />}
                { val >= arcNUM[2][0] && val < arcNUM[2][1] &&
                <Arc
                    zIndex={1}
                    start={[arcNUM[2][0], 0.965]}
                    end={[val, 0.965]}
                    style={{
                        stroke: arcCol[2] || color[2],
                        lineWidth,
                    }}
                />}

                {/* 污染 */}
                { val >= arcNUM[3][1] &&
                <Arc
                    zIndex={1}
                    start={[arcNUM[3][0], 0.965]}
                    end={[arcNUM[3][1], 0.965]}
                    style={{
                        stroke: arcCol[3] || color[3],
                        lineWidth,
                    }}
                />}
                { val >= arcNUM[3][0] && val < arcNUM[3][1] &&
                <Arc
                    zIndex={1}
                    start={[arcNUM[3][0], 0.965]}
                    end={[val, 0.965]}
                    style={{
                        stroke: arcCol[3] || color[3],
                        lineWidth,
                    }}
                />}

                {/* 有害 */}
                {val >= arcNUM[4][0] && <Arc
                    zIndex={1}
                    start={[arcNUM[4][0], 0.965]}
                    end={[val, 0.965]}
                    style={{
                        stroke: arcCol[4] || color[4],
                        lineWidth,
                    }}
                />}
                <Html
                    position={['50%', '90%']}
                    html={() => (`<div style="width: 150px;text-align: center;font-size: 12px!important;"><p style="font-size: 0.75em; color: rgba(0,0,0,0.43);margin: 0;">${keyName}</p><p style="font-size: 1em;font-weight: 600;color: rgba(0,0,0,0.85);margin: 0;">${val === 0 ? val : (Math.floor(val*baseNum) || '')}</p></div>`)}
                />
            </Guide>
            <Geom
                type="point"
                position="value*1"
                shape="pointer"
                color="#1890FF"
                active={false}
                style={{ stroke: '#fff', lineWidth: 1 }}
            />
        </Chart>
      </>
    );
}

使用

这是一个封装好的

/**
 * value 数值 number 真正的数值 = value/base(基数)
 * arcNUM 范围值 [[0, 0.5], [0.50, 0.8], [0.8, 1], [1, 1.3], [1.3, 2]]
 * arcColor 颜色 ['#0fb746', '#00b0f0', '#1d41d5', '#ffff00', '#ff0000']
 * daNum 上限值 number 真正的上限值 = 上限值*基数
 * ticks 刻度值 [0.2, 0.7, 0.9, 1.2, 1.8]
 * Text 刻度文字 ['1', '2']
 * base 基数(倍数) number 其实就是倍数默认是100 上限值*基数 === 真正的上限值
 * keyName 文字 string
 */
<PointerChart {...{
   value: 200,
   arcNUM: [[0, 0.5], [0.50, 0.8], [0.8, 1], [1, 1.3], [1.3, 2]],
   arcColor: ['#00b050', '#ffff00', '#ff6c0d', '#000000', '#ff0000'],
   daNum: 3,
   ticks: [0.2, 0.65, 0.9, 1.2, 1.8],
   Text: ['正常', '偏高', '超标', '污染', '有害'],
   keyName: 'PM2.5',
}} />

3. 回到顶部