1.效果 2.代码 nmp 导入:
npm install @antv/g2plot
代码:
<template>
<div id="app">
<div id="container"></div>
</div>
</template>
<script>
import {
Bar
} from '@antv/g2plot';
export default {
name: 'App',
data() {
return {
sj: [{
year: '1951 年',
value: 38
},
{
year: '1952 年',
value: 52
},
{
year: '1956 年',
value: 61
},
{
year: '1957 年',
value: 145
},
{
year: '1958 年',
value: 48
},
]
}
},
mounted() {
const bar = new Bar('container', {
data: this.sj,
xField: 'value',
yField: 'year',
seriesField: 'year',
legend: {
position: 'top-left',
},
});
bar.render();
}
}
</script>
<style>
</style>
|