未处理前
处理后
使用uCharts官网 - 秋云uCharts跨平台图表库写的柱状图或者折线图的categories数据太多处理方法，也就是xAxis数据过多处理方法
方法一：只能处理少量的categories数据的情况
xAxis: {disableGrid: true,labelCount: 5, //设置显示个数formatter: (val) => {return val.slice(5) // x轴过长，可以截取一下}
},
方法二：可以处理多数据categories数据的情况
xAxis: {
disableGrid: true,
labelCount: 17, //设置显示个数
},
中添加 labelCount: 17, //设置显示个数用于控制显示的个数
对categories里面数据的内容进行截取
categories: response.data.timeStrArray.map(time => time.slice(0, 2)),//根据实际情况截取
// 图表数据和配置
const chartData = ref({});
const opts = ref({color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],padding: [15, 15, 0, 15],enableScroll: false,dataLabel: false, // 数据legend: {},xAxis: {disableGrid: true,labelCount: 17, //设置显示个数},yAxis: {gridType: "dash",dashLength: 2,data: [{ min: 0, unit: "万度" }]},extra: {area: {type: "straight",opacity: 0.2,addLine: true,width: 2,gradient: false,activeType: "hollow"}}
});
// 数据获取函数
const dhuData = async (date = single.value) => {try {const response = await getpowercount(props.siteId, date, 1);console.log('获取到的数据:', response.data);chartD.value = { ...chartD.value, ...response.data };// 假设每2个数据点取平均const interval = 2; chartData.value = {categories: response.data.timeStrArray.map(time => time.slice(0, 2)),series: [{name: "光伏发电功率",data: averageData(response.data.inverterPowerArray || [], interval),},{name: "电网功率",data: averageData(response.data.gridPowerArray || [], interval),},{name: "负载用电功率",data: averageData(response.data.loadPowerArray || [], interval),},],};} catch (error) {console.error('获取数据时出错:', error);chartD.value = {selfPowerCount: 0,selfRate: 0,inverterPowerCount: 0,uploadPowerCount: 0,uploadRate: 0,useSelfPowerCount: 0,useSelfRate: 0,iallUsePowerCount: 0,gridDownPowerCount: 0,gridDownRate: 0,};}
};
处理后
