vue 使用 antv/g2

效果：

安装： 

npm install @antv/g2 --save

引入：

import { Chart } from '@antv/g2';

使用：

<div id="c1"></div>

LeftChart() {
            const chart = new Chart({
                container: 'c1',
                autoFit: true,
                width: 600,
                height: 300,
            });

            const data = [
                { key: '1991', value: 3 },
                { key: '1992', value: 4 },
                { key: '1993', value: 3.5 },
                { key: '1994', value: 5 },
                { key: '1995', value: 4.9 },
                { key: '1996', value: 6 },
                { key: '1997', value: 7 },
                { key: '1998', value: 9 },
                { key: '1999', value: 13 },
            ];

            chart.data(data);

            chart.tooltip({
                showCrosshairs: false,
                shared: false,
                containerTpl: `<div class="g2-tooltip"><ul class="g2-tooltip-list"></ul></div>`,
                itemTpl: `   
                    <ul class="g2-tooltip-list">
                        <li class="g2-tooltip-list-item">
                            <span class="g2-tooltip-marker" style="background-color: #3136FF;"></span>Number of Validators
                        </li>
                        <li class="g2-tooltip-list-item">
                            <span class="weight">{value}</span>
                        </li>
                        <li class="g2-tooltip-list-item">
                            <span class="">{key}</span>
                        </li>
                    </ul>
                `,
            });
            chart.axis('value', {
                label: {
                    style: {
                        fill: '#F5F5FA',
                    }
                },
                grid: {
                    line: {
                        type: "line",
                        style: {
                            fill: '#ff6600',
                            stroke: "#F5F5FA",
                            opacity: 0,
                            lineDash: [1, 3],//虚线
                        }
                    },
                },
            })
            chart.axis('key', {
                grid: {
                    line: {
                        type: "line",
                        style: {
                            fill: '#ff6600',
                            stroke: "#F5F5FA",
                            opacity: 0,
                            lineDash: [1, 3],//虚线
                        }
                    },
                },
                line: {
                    style: {
                        stroke: "#F5F5FA",//坐标轴颜色
                    }
                },
                tickLine: {
                    length: 0,
                    stroke: "#fff",//坐标轴颜色
                },
                subTickLine: {
                    length: 0,
                    stroke: "#fff",//坐标轴颜色
                }
            });
            chart.line().position(['key', 'value']).color('#3136FF').style({
                lineWidth: 3,
            }).tooltip('key*value', function (key, value) {
                return {
                    color: '#3136FF',
                    value: value,
                    key: key
                }
            })
            chart.forceFit()
            chart.render();
        },