vuex/uni-demo/components/investment.vue

72 lines
1.2 KiB
Vue

<template>
<view class="content">
<view class="title">投资规模</view>
<view class="charts-box">
<qiun-data-charts type="column" :opts="opts" :chartData="chartData"/>
</view>
</view>
</template>
<script>
export default {
name:"investment",
data() {
return {
chartData: {},
opts: {
dataLabel:false,
xAxis: {
disableGrid: true
},
yAxis: {
gridType:'dash',
showTitle:true,
data: [{
min: 0,
max:860,
title:'人数/人',
titleOffsetY:-4
}]
},
legend:{
position:'top',
padding:3
},
extra: {
column: {
type: "stack"
}
}
}
};
},
onReady() {
this.getServerData();
},
methods: {
getServerData() {
setTimeout(() => {
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
let res = {
categories: ['未知地区', '昆明','禄丰'],
series: [{
name: "新增",
data: [0,7,0]
},
{
name: "历史",
data: [855,0,7]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},
}
};
</script>
<style scoped>
</style>