<template>
<div>
<lt-canvas ref="canvas" :width="750" :height="500"></lt-canvas>
</div>
</template>
<script>
import LightChart from 'light-chart';
export default {
components:{
ltCanvas:require("light-chart/canvas")
},
data(){
return {}
},
mounted(){
const { Global } = LightChart;
const data = [
{ country: '巴西', population: 18203 },
{ country: '印尼', population: 23489 },
{ country: '美国', population: 29034 },
{ country: '印度', population: 104970 },
{ country: '中国', population: 131744 }
];
let chart = new LightChart.Chart({
ltCanvas:this.$refs.canvas
});
chart.source(data, {
population: {
tickCount: 5
}
});
chart.coord({
transposed: true
});
chart.axis('country', {
line: Global._defaultAxis.line,
grid: null
});
chart.axis('population', {
line: null,
grid: Global._defaultAxis.grid,
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.interval().position('country*population');
chart.render();
}
}
</script>
<style scoped>
</style>
|
