111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
time: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
stationId:'',
|
|
chartData: {},
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
opts: {
|
|
color: ["#0DA17D"],
|
|
padding: [30, 15, 100, 25],
|
|
enableScroll: false,
|
|
fonSize: 12,
|
|
fontColor: '#8C8C8C',
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
rotateLabel: true,
|
|
rotateAngle: 30,
|
|
titleOffsetY: 20,
|
|
titleOffsetX: 5,
|
|
marginTop: 5,
|
|
labelCount: 7
|
|
},
|
|
yAxis: {
|
|
data: [{
|
|
min: 0
|
|
}],
|
|
|
|
showTitle: false
|
|
},
|
|
extra: {
|
|
column: {
|
|
width: '10',
|
|
}
|
|
},
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.GetPvMonthData();
|
|
},
|
|
computed: {
|
|
currentStation() {
|
|
return this.vuex_currentStation;
|
|
},
|
|
},
|
|
watch: {
|
|
currentStation: {
|
|
handler(val) {
|
|
this.stationId = val.id;
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
async GetPvMonthData(){
|
|
try {
|
|
const res = await this.$u.api.enrnings.GetPvMonthData({
|
|
stationId: this.stationId,
|
|
time: this.time,
|
|
});
|
|
let resdata = {
|
|
categories:[],
|
|
series:[{
|
|
name:this.$t('homePage.home.powerGeneration'),
|
|
textColor: "#FFFFFF",
|
|
data: []
|
|
}]
|
|
}
|
|
if (res.data.length) {
|
|
res.data.forEach((el) => {
|
|
resdata.categories.push(el.date)
|
|
resdata.series[0].data.push(el.powerGenerate)
|
|
});
|
|
console.log(JSON.parse(JSON.stringify(resdata)));
|
|
this.chartData = JSON.parse(JSON.stringify(resdata));
|
|
} else {
|
|
this.chargeArr = [];
|
|
}
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
</style> |