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>
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,
height: 500,
padding: [100, 100, 50, 100],
pixelRatio:window.devicePixelRatio,
renderer:"canvas",
visible:true,
});
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)",
color:"#7B68EE",
boxShadow:"0px 0px 5px #000000",
},
}
});
chart.axis('trate', {
grid:{
line:{
type:"line",
style:{
stroke:"#000",
opacity:0.3,
lineDash:[1,3],
}
}
},
label: {
style:{
fill:"#4169E1",
fontFamily: "Microsoft YaHei",
fontWeight: 400,
fontSize: 12,
},
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')
.style({
lineWidth: 4
})
.label("trate", {
content: (originData) => {
return originData["trate"]+"°C";
},
style: {
fill: "#A0522D",
fontFamily: "Microsoft YaHei",
fontWeight: 400,
fontSize: 16,
},
position:"top",
})
chart.render();
script>
body>
html>
页面效果:
