如圖所示

直接貼出解決代碼

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>
                    {/* 控制下方篩選標(biāo)簽 */}
                        <Legend />
                        {/* 控制橫向標(biāo)簽 */}
                        <Axis name="day" />
                        {/* 控制縱向標(biāo)簽 */}
                        <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>
    )
}