自定义图例: 这个可能实现的思路不太对, 目前是在数据列表里新建了个无用字段,在坐标轴隐藏该字段,通过color触发图例,再通过legend自定义内容
找这些东西太难了,找半天找不到,不用color的情况下我用legend无效
import React, { useState, useEffect, useRef} from "react";
import "./chart.less"
import { Chart } from "@antv/g2";
const Charts = () => {
const chartRef = useRef()
const data = [
{ name: "杭州银行", score: 2, num: 5, city: "bj" },
{ name: "南京银行", score: 4, num: 11, city: "bj" },
{ name: "江西邮储", score: 8, num: 13, city: "bj" },
{ name: "农业银行", score: 5, num: 9, city: "bj" },
{ name: "工商银行", score: 9, num: 6, city: "bj" },
{ name: "人民银行", score: 3, num: 29, city: "bj" },
]
const [chart, setChart] = useState(null)
useEffect(() => {
if (data && !chart) {
const c = new Chart({
container: 'c7',
autoFit: true,
width: 500,
height: 300,
});
setChart(c)
}
}, [data])
useEffect(() => {
chart && renderChart()
}, [chart, data])
const renderChart = () => {
const nums = data.map(i => i.num)
const maxValue = Math.max(...nums)
const max = Math.ceil(maxValue / 10) * 10
const margin = 1 / 5
chart.clear()
chart.data(data);
chart.scale('score', { // 右侧坐标轴
min: 0,
max: 10,
tickCount: 6, // 左右坐标轴刻度数量保持一致 好看点
range: [0, 1 - margin / 2],
})
const tick = max / 5
let ticks = new Array(6).fill(null)
ticks = ticks.map((i, t) => t * tick)
chart.scale('num', { // 左侧坐标轴
min: 0,
max: max,
ticks: ticks,
tickCount: 6,
range: [0, 1 - margin / 2],
})
chart.scale('city', { // 无用坐标轴
min: 0,
max: max,
ticks: ticks,
tickCount: 6,
range: [0, 1 - margin / 2],
})
chart.scale('name', {
nice: true,
})
chart.axis("city", { // 隐藏无用坐标轴内容
label: {
formatter: () => ""
}
})
chart.axis("num", {
title: {
text: "单位: 个",
autoRotate: false,
position: "end",
offset: -10,
textStyle: {
textAlign: 'start', // 文本对齐方向,可取值为: start middle end
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
textBaseline: 'top' // 文本基准线,可取 top middle bottom,默认为middle
},
},
})
chart.axis("score", {
title: {
text: "单位: 分",
autoRotate: false,
position: "end",
offset: -10,
textStyle: {
textAlign: 'start', // 文本对齐方向,可取值为: start middle end
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
textBaseline: 'top' // 文本基准线,可取 top middle bottom,默认为middle
},
},
})
chart.axis("name", {
label: {
autoRotate: true,
autoHide: false
},
})
chart.interaction('active-region');
// 柱状图设置
chart
.interval()
.label("num", {
offset: -10
})
.size(36)
.position('name*num')
.tooltip('num*score', (num, score) => {
return {
num,
score
}
})
.color("city")
// 折线图设置 隐藏无用的字段
chart.
line()
.position('city')
.style({
stroke: "transparent"
})
// 关闭图例点击事件 没找到api 没实现 点击图例可以触发这个方法
// chart.on('legend:click', ev => {
// return false
// });
// 修改 自定义图例 增加 custom: true
chart.legend({
custom: true,
position: "bottom",
flipPage: false,
items: [
{
name: "项目",
marker: {
symbol: "square",
style:{
fill: "#6395f9"
},
clickable: false
},
},
{
name: "评分",
marker: {
symbol: "circle",
style:{
fill: "#f59a23"
},
clickable: false
},
}
]
})
// tooltip的自定义内容
const itemTpl = `
·
评分: {score} 分
·
项目: {num} 个
`
chart.tooltip({
showTitle: true,
showMarkers: false,
itemTpl: itemTpl
});
// 设置折线内容 颜色
chart
.line()
.position('name*score')
.size(4)
.color("", () => "#f59a23")
.tooltip('num*score', (num, score) => {
return {
num,
score
}
})
chart.removeInteraction('legend-filter'); // 自定义图例,移除默认的分类图例筛选交互
chart.render();
}
return (
<div className={"chart7"}>
<div id="c7" ref={chartRef} />
</div>
)
}
export default Charts;