smart_storage_app/pages/home-page/lights/components/runChart/index.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>