<template>
<div class="stackArea" style="width: 50%;height: 500px">
<div id="chart" style="width: 100%;height: 500px"></div>
</div>
</template>
<script>
import {Chart} from '@antv/g2';
const data = [
{country: 'Asia', year: '1750', value: 502},
{country: 'Asia', year: '1800', value: 635},
{country: 'Asia', year: '1850', value: 809},
{country: 'Asia', year: '1900', value: 5268},
{country: 'Asia', year: '1950', value: 4400},
{country: 'Asia', year: '1999', value: 3634},
{country: 'Asia', year: '2050', value: 947},
{country: 'Africa', year: '1750', value: 106},
{country: 'Africa', year: '1800', value: 107},
{country: 'Africa', year: '1850', value: 111},
{country: 'Africa', year: '1900', value: 1766},
{country: 'Africa', year: '1950', value: 221},
{country: 'Africa', year: '1999', value: 767},
{country: 'Africa', year: '2050', value: 133},
{country: 'Europe', year: '1750', value: 163},
{country: 'Europe', year: '1800', value: 203},
{country: 'Europe', year: '1850', value: 276},
{country: 'Europe', year: '1900', value: 628},
{country: 'Europe', year: '1950', value: 547},
{country: 'Europe', year: '1999', value: 729},
{country: 'Europe', year: '2050', value: 408},
{country: 'Oceania', year: '1750', value: 200},
{country: 'Oceania', year: '1800', value: 200},
{country: 'Oceania', year: '1850', value: 200},
{country: 'Oceania', year: '1900', value: 460},
{country: 'Oceania', year: '1950', value: 230},
{country: 'Oceania', year: '1999', value: 300},
{country: 'Oceania', year: '2050', value: 300},
];
export default {
name: "stackArea",
data() {
return {
data,
chart: undefined
}
},
methods: {
initChart() {
let _this = this;
_this.chart = new Chart({
container: 'chart',
autoFit: true,
});
_this.chart.data(data);
_this.chart.scale('year', {
type: 'linear',
tickInterval: 50,
});
_this.chart.scale('value', {
nice: true,
});
_this.chart.tooltip({
showCrosshairs: true,
shared: true,
});
_this.chart.area()
.adjust('stack')
.position('year*value')
.shape('smooth')
.color('country');
_this.chart.line()
.adjust('stack')
.position('year*value')
.shape('smooth')
.color('country');
_this.chart.interaction('element-highlight');
_this.chart.render();
}
},
mounted() {
let _this = this;
_this.initChart();
window.addEventListener('resize', function () {
console.log('屏幕尺寸变化')
if (_this.chart) {
_this.chart.render();
} else {
_this.initChart();
}
});
}
}
</script>
<style scoped>
.stackArea{
margin: 0 auto;
}
</style>
09-20
945
02-08
455
12-25
2592