<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(){
let data = require("bubble.json");
let chart = new LightChart.Chart({
ltCanvas:this.$refs.canvas
});
chart.source(data, {
LifeExpectancy: {
alias: '人均寿命（年）',
tickCount: 5
},
GDP: {
alias: '人均国内生产总值($)'
},
Country: {
alias: '国家/地区'
}
});
chart.axis('GDP', {
label(value){
return {
text: (value / 1000).toFixed(0) + 'k'
};
}
});
chart.axis('GDP', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.point().position('GDP*LifeExpectancy')
.size('Population', [ 4, 65 ])
.color('continent')
.style({
fillOpacity: 0.65
});
chart.render();
}
}
</script>
<style scoped>
</style>
|
