自定義圖例： 這個可能實現的思路不太對， 目前是在數據列表里新建了個無用字段，在坐標軸隱藏該字段，通過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 = `
            <div class='chart7Tpl'>
                <div class='tpl'>
                    <span class="tpl1">·</span>
                    評分:&nbsp;&nbsp;&nbsp;{score} 分
                </div>
                <div class='tpl'>
                    <span class="tpl2">·</span>
                    項目:&nbsp;&nbsp;&nbsp;{num} 個
                </div>
            </div>
        `

        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;