
如图所示
直接贴出解决代码
import {
G2,
Chart,
Geom,
Axis,
Tooltip,
Coord,
Label,
Legend,
View,
Guide,
Shape,
Facet,
Util
} from "bizcharts";
render()=>{
const data = [
{
day:'2019-11-12',
label_name:"温度",
value:30
}
]
const cols = {
value: {
min: 0
},
range: {
range: [0, 1]
}
};
render(
<div>
<Chart height={400} data={data} scale={cols} forceFit>
{/* 控制下方筛选标签 */}
<Legend />
{/* 控制横向标签 */}
<Axis name="day" />
{/* 控制纵向标签 */}
<Axis
name="value"
label={{
formatter: val => `${val}°C`
}}
/>
{/* 控制y轴连接线 */}
<Tooltip
crosshairs={{
type: "y"
}}
/>
{/* 控制y轴连接线 */}
<Geom
type="line"
position="day*value"
size={2}
color={"label_name"}
shape={"smooth"}
/>
{/* 控制y轴连接线上的点 */}
<Geom
type="point"
position="day*value"
size={4}
shape={"circle"}
color={"label_name"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
)
}


发表评论 取消回复