效果图
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',
}} />