Antv G2(bizCharts) 点线图 实现
名字
点线图: 不知道怎么命名
效果图
思路
数据： 初始化三条数据， 中间的为显示数据
使用折线图，隐藏折线，隐藏显示数据之外的所有点
X轴：隐藏X轴坐标内容
Y轴：设置y轴内容，y轴标题
注释：添加注释，线条，描述内容
代码（下面有全的子组件代码）
// 1、导入Chart图表
import { Chart } from "@antv/g2";
// 2、初始化图表
useEffect(() => {
(async () => {
const chartBox = new Chart({
container: 'c3',
autoFit: true,
width: width,
height: height,
title: true
})
await setChartBox(chartBox) // 设置图表 chart
const newData = cloneDeep(cData) // 复制数据 useState引用数据用新的地址替换
newData.splice(1,1, data) // props接收到的显示的那条数据内容
await setData(() => newData) // 设置新数据
})()
}, [])
// 3、图表渲染
const setChart = () => {
const margin = 1 / 3 // 3为数据列表长度
chart.clear()
chart.data(cData);
chart.scale({
date: {
// 坐标轴起始位置修改 一般[0 , 1]
range: [margin / 2, 1 - margin / 2],
},
num: {
// 起始位置不变 末尾位置留白 给标题挤出空间
range: [0, 1 - margin / 2],
min: 0, // 设置坐标轴最小值
max: max,// 设置坐标轴最大值
nice: true, // 不设置最大值最小值的时候 会根据数据内容自动变化
},
});
chart.tooltip(false); // 关闭提示
// 坐标轴 X
chart.axis('date', {
label: {
// 返回空字符串 隐藏横坐标文字内容
formatter: (text) => ""
}
})
// 坐标轴 Y
chart.axis('num', {
title: {
text: cTitle, // 标题内容
autoRotate: false,
position: "end",
offset: -10,
textStyle: {
textAlign: 'start', // 文本对齐方向，可取值为： start middle end
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
},
},
label: {
formatter: (text) => text
}
})
// 隐藏折线
chart.line().style({
stroke: "transparent" // 设置透明颜色
}).position('date*num');
// 隐藏点
chart
.point()
.size(2) // 控制点的大小
.position('date*num')
.label("name", (val) => {
// 关联文字 设置样式
if (val) {
// 吐槽文本内容字段 一会text 一会content 全是试出来的
return {
content: val, // 格式化文字 不给默认显示关联字段的值
offsetX: 12, // 距离设置点的X偏移量
offsetY: 12, // 距离设置点的Y偏移量
style: {
fill: dataColor,
fontSize: 12,
},
}
}
})
.style("num*name", ((val, name) => {
// 只显示有名字的那个点 其他点隐藏
if (name) {
return {
stroke: dataColor,
fill: dataColor
}
}
// 其他点 隐藏
return {
stroke: "transparent",
lineWidth: 0
}
}))
// 注释
chart.annotation().line({
top: true,
start: [-0.5, averageNum], // 起始位置 第一个参数为X起始位置 第二个为Y
end: [2.5, averageNum], // 结束位置 第一个参数为X起始位置 第二个为Y
// 上面X轴通过 改变了起始位置 range: [margin / 2, 1 - margin / 2]
// 现在又想要注释的横线横穿整个图表 所以向左右扩展
// -0.5 向左扩展 2.5向右扩展 数字可以想成是数据列表的索引
style: {
stroke: contentColor,
lineWidth: 1,
lineDash: [3, 3],
},
text: {
position: 'start',
style: {
fill: contentColor,
fontSize: 12,
fontWeight: 500,
},
content: content,
offsetY: -5,
},
});
chart.render();
}
子组件代码
import React, { useState, useEffect, useRef } from "react";
import "./chart.less"
import { Chart } from "@antv/g2";
import { cloneDeep } from "lodash"
import PropTypes from 'prop-types';
const Charts = (props) => {
const {
width,
height,
max,
content,
contentColor,
dataColor,
cTitle,
data,
averageNum
} = props
const initData = [
{ date: "a", num: 0 },
{ date: "b", num: 0 },
{ date: "c", num: 0 }
]
const [cData, setData] = useState(initData)
const [chart, setChartBox] = useState(null)
const chartRef = useRef()
useEffect(() => {
(async () => {
const chartBox = new Chart({
container: 'c3',
autoFit: true,
width: width,
height: height,
title: true
})
await setChartBox(chartBox)
const newData = cloneDeep(cData)
newData.splice(1,1, data)
await setData(() => newData)
})()
}, [])
// 下面两个useEffect 根据传入内容改变 进行修改
// 原来写法是这样的 不过现在根据react的dom diff的逻辑 在父组件使用时候传入个key值
// 要更新的时候 修改下那个key就行了 少量操作问题不大
// 大量的话 对性能不友好
useEffect(() => {
// initData 初始固定三条数据 修改中间的即可
if (cData[1].name && chart) {
chart.clear()
setChart()
}
}, [chart, cData])
useEffect(() => {
if (cTitle && chart) {
chart.clear()
setChart()
}
}, [chart, cTitle])
useEffect(() => {
(async () => {
const newData = cloneDeep(cData)
newData.splice(1,1, data)
await setData(() => newData)
if (data && chart) setChart()
})()
}, [chart, data])
const setChart = () => {
const margin = 1 / 3
chart.clear()
chart.data(cData);
chart.scale({
date: {
range: [margin / 2, 1 - margin / 2],
},
num: {
range: [0, 1 - margin / 2],
min: 0,
max: max,
nice: true,
},
});
chart.tooltip(false);
// 坐标轴
chart.axis('date', {
label: {
// 返回空字符串 隐藏横坐标文字内容
formatter: (text) => ""
}
})
chart.axis('num', {
title: {
text: cTitle,
autoRotate: false,
position: "end",
offset: -10,
textStyle: {
textAlign: 'start', // 文本对齐方向，可取值为： start middle end
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
},
},
label: {
formatter: (text) => text
}
})
// 隐藏折线
chart.line().style({
stroke: "transparent"
}).position('date*num');
// 隐藏点
chart
.point()
.size(2)
.position('date*num')
.label("name", (val) => {
// 关联文字 设置样式
if (val) {
return {
content: val,
offsetX: 12,
offsetY: 12,
style: {
fill: dataColor,
fontSize: 12,
},
}
}
})
.style("num*name", ((val, name) => {
// 只显示有名字的那个点 其他点隐藏
if (name) {
return {
stroke: dataColor,
fill: dataColor
}
}
return {
stroke: "transparent",
lineWidth: 0
}
}))
// 没找到清空annotation的方法 不用key触发更新的话
// 再次渲染的时候会叠加出现上次的线
chart.annotation().line({
top: true,
start: [-0.5, averageNum],
end: [2.5, averageNum],
style: {
stroke: contentColor,
lineWidth: 1,
lineDash: [3, 3],
},
text: {
position: 'start',
style: {
fill: contentColor,
fontSize: 12,
fontWeight: 500,
},
content: content,
offsetY: -5,
},
});
chart.render();
}
return (
<div className={"chart"}>
<div id="c3" ref={chartRef} />
</div>
)
}
Charts.defaultProps = {
max: 150,
data: { date: "c", num: 60, name: "我" },
width: 300,
height: 200,
dataColor: "#fe8140", // 文字 点颜色
contentColor: "#f4a240", // 横线颜色
cTitle: "单位: 小时", // 纵坐标轴标题
content: "团队均值: 75",// 均值说明
averageNum: 75,// 均值说明
}
Charts.propTypes = {
max: PropTypes.number,
data: PropTypes.object.isRequired,
width: PropTypes.number,
height: PropTypes.number,
dataColor: PropTypes.string,
contentColor: PropTypes.string,
cTitle: PropTypes.string,
content: PropTypes.string,
averageNum: PropTypes.number,
}
export default Charts;
父组件代码
import React from 'react';
import { Button } from "antd"
import Chart3 from "./components/chart3"
class Charts extends React.Component {
constructor(props) {
super(props);
this.state = {
cTitle: "单位: 小时",
data: { date: "b", num: 120, name: "我" },
averageNum: 75
}
}
change = () => {
const { cTitle } = this.state
const flag = cTitle === "单位: 个"
const title = flag ? "单位: 小时" : "单位: 个"
const data = flag ?
{ date: "b", num: 120, name: "我" } :
{ date: "b", num: 55, name: "你" }
const averageNum = flag ? 75 : 55
this.setState({
cTitle: title,
data: data,
averageNum: averageNum,
})
}
render () {
const { cTitle, data, averageNum } = this.state
// 组件通过key值变化可以触发更新
return (
<div className={"chartBox"}>
<Chart3
cTitle={cTitle}
data={data}
key={data.num}
averageNum={averageNum}
/>
<Button onClick={this.change}>切换</Button>
</div>
)
}
}
export default Charts;