g2绘制百分比堆叠柱状图+自定义tooltip
<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>百分比-堆叠柱状图title>
head>
<body>
<div id="container">div>
<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight
script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js">script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js">script>
<script>
const data1 = [
{
country: '实体',
year: '12/07',
value: 111
},
{
country: '实体',
year: '13/07',
value: 203
},
{
country: '实体',
year: '14/07',
value: 276
},
{
country: '实体',
year: '15/07',
value: 408
},
{
country: '实体',
year: '16/07',
value: 547
},
{
country: '实体',
year: '17/07',
value: 729
},
{
country: '实体',
year: '18/07',
value: 628
}
]
let data2 = [
{
country: '房贷',
year: '12/07',
value: 502
},
{
country: '房贷',
year: '13/07',
value: 635
},
{
country: '房贷',
year: '14/07',
value: 809
},
{
country: '房贷',
year: '15/07',
value: 947
},
{
country: '房贷',
year: '16/07',
value: 1402
},
{
country: '房贷',
year: '17/07',
value: 3634
},
{
country: '房贷',
year: '18/07',
value: 5268
}
]
let data = [...data1, ...data2]
console.log(data)
const data3 = []
data2.forEach((item, index) => {
const percent = parseInt(
(item.value / (data1[index].value + item.value)) * 100
)
data3.push({
year: item.year,
low: percent,
q1: percent,
median: percent,
q3: percent + 1,
high: percent + 1,
country: '房贷',
range: [percent, percent, percent, percent + 1, percent + 1]
})
})
console.log(data3)
// 计算每个柱子的占比
const ds = new DataSet()
const dv = ds
.createView()
.source(data)
.transform({
type: 'percent',
field: 'value', // 统计销量
dimension: 'country', // 每年的占比
groupBy: ['year'], // 以不同产品类别为分组
as: 'percent'
})
console.log(dv)
const chart = new G2.Chart({
container: 'container',
autoFit: true,
height: 500
})
const view1 = chart.view()
view1.source(dv, {
percent: {
// max: 100,
min: 0,
tickCount: 5,
formatter: function formatter(val) {
console.log(val)
val = val * 100 + '%'
return val
}
}
})
view1
.intervalStack()
.position('year*percent')
.color('country', [
'l(90) 0:#00DFFD 1:#0079C6 ',
'l(90) 0:#0081FF 1:#004DFF '
])
.tooltip('country*value', function(country, value) {
return {
name: country, //itemTpl:{name}
value: value
}
})
const view2 = chart.view()
console.log(view2)
view2.source(data3, {
range: {
max: 100,
min: 0,
formatter: function formatter(val) {
return val
}
}
})
view2.axis('range', false)
view2
.schema()
.position('year*range')
.shape('box')
.style({
fill: 'orange',
stroke: 'orange'
})
.color('country', ['orange'])
//自定义tooltip
chart.tooltip({
containerTpl:
'' +
'' +
'
' +
'', // tooltip的外层模板
itemTpl:
'' +
'{name}{value}
' +
' ',
offset: 50,
'g2-tooltip': {
position: 'absolute',
width: '160px',
backgroundColor: 'rgba(0, 10, 66, 0.7)',
border: '1px solid rgba(0,227,255,1)',
color: '#fff',
fontSize: '12px',
transition: 'top 200ms,left 200ms',
padding: '0px 10px'
},
'g2-tooltip-marker': {
display: 'none'
},
'g2-tooltip-title': {
display: 'block'
}
})
chart.render()
script>
body>
html>