使用ucharts写的柱状图categories数据过多如何处理

苹果电脑的鑫鑫

已于 2024-09-26 12:05:53 修改

阅读量157

点赞数 1

文章标签：信息可视化

于 2024-09-26 12:00:01 首次发布

本文链接：https://blog.csdn.net/Wx001214/article/details/142552549

版权

未处理前

处理后

使用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,
    };
  }
};

处理后