Antv/G2 自定义折线图线条样式及tootip提示信息样式

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>自定义折线图线条样式及tootip提示信息样式</title>    
    <style>
        #chartcontainer {
            margin: 50px auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="chartcontainer"></div>
    <script>
        /*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body
        .clientHeight
    </script>
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.8/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script>

    <script>
        const data = [
        { city: 'London', month: 'Jan', trate: 18.9 },
        { city: 'London', month: 'Feb', trate: 28.8 },
        { city: 'London', month: 'Mar', trate: 39.3 },
        { city: 'London', month: 'Apr', trate: 81.4 },
        { city: 'London', month: 'May', trate: 47.1 },
        { city: 'London', month: 'Jun', trate: 20.3 },
        { city: 'London', month: 'Jul', trate: 24.7 },
        { city: 'London', month: 'Aug', trate: 35.6 },
        { city: 'Berlin', month: 'Jan', trate: 12.4 },
        { city: 'Berlin', month: 'Feb', trate: 23.2 },
        { city: 'Berlin', month: 'Mar', trate: 34.5 },
        { city: 'Berlin', month: 'Apr', trate: 99.7 },
        { city: 'Berlin', month: 'May', trate: 52.6 },
        { city: 'Berlin', month: 'Jun', trate: 35.5 },
        { city: 'Berlin', month: 'Jul', trate: 37.4 },
        { city: 'Berlin', month: 'Aug', trate: 42.4 },
        ]   
        // 设置图表　　
        const chart = new G2.Chart({
            　　container: 'chartcontainer',
            autoFit: true,//图表是否自适应容器宽高，默认为 false
            　　height: 500,
            padding: [100, 100, 50, 100],//图表内边距,依次为:上，右，下，左
            pixelRatio:window.devicePixelRatio,//设置设备像素比，默认取浏览器的值 window.devicePixelRatio
            renderer:"canvas",//指定渲染引擎，默认使用 canvas。可选：'canvas' | 'svg'
            // theme:"dark",//配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。
            visible:true,//chart 是否可见，默认为 true，设置为 false 则会隐藏。
        　　});
        　　chart.data(data);
        // 设置提示框信息样式
        　　chart.tooltip({
            　　showCrosshairs: true,
            shared: true,
            crosshairs:{
                line:{
                    style:{
                            stroke:"#AFEEEE",//辅助线颜色
                            lineWidth:1,//辅助线粗细
                        },
                    }
                },
                domStyles:{
                    'g2-tooltip':{
                        background:"rgba(00, 00, 00,0.2)",//背景RGBA形式的值
                        color:"#7B68EE",//文字颜色
                        boxShadow:"0px 0px 5px #000000",//阴影大小 阴影颜色 
                    },
                }
            　　});
        // 设置Y轴
        　　chart.axis('trate', {
            // 设置虚线样式
            grid:{
                line:{
                    type:"line",
                    style:{
                                // fill:'#ff0000',
                                stroke:"#000",//网格线颜色
                                opacity:0.3,//网格线透明度
                                lineDash:[1,3],//虚线
                            }
                        }
                    },
                    　　label: {
                        style:{
                            fill:"#4169E1",///Y轴文字颜色
                            fontFamily: "Microsoft YaHei",///Y轴文字字体
                            fontWeight: 400,///Y轴文字粗细
                            fontSize: 12,///Y轴文字大小
                        },
            　　formatter: function formatter(val) { // 格式化
                　　return val + '°C';
            　　}
        　　}
    　　});
        // 自定义图例
        chart.legend('city',{
            clickable: true,
            position: 'top', // 设置图例的显示位置      
        })
        // 设置图表折线相关属性【折线样式】
        chart.line()
        .color('city', ["#FFA07A","#90EE90","#2611ff","#26aa99"]).shape('smooth')//曲率
        .position('month*trate') // X轴 * Y轴
        .style({ 
            lineWidth: 4 // 折线宽度
        })
        .label("trate", { // 折线上的值标签
            content: (originData) => {
                        return originData["trate"]+"°C";//设置值标签最终显示的内容
                    },
                    style: {
                        fill: "#A0522D",
                        fontFamily: "Microsoft YaHei",
                        fontWeight: 400,
                        fontSize: 16,
                        // fill: "#ffffff",
                    },
                    position:"top",//显示位置
                })       
        chart.render();
    </script>
</body>
</html>
页面效果：