效果：
安装：
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();
},
标签：style,vue,g2,antv,chart,value,stroke,key,line From： https://www.cnblogs.com/tlfe/p/17010497.html