解决echartsY轴溢出以及多Y轴动态设置offest

最新推荐文章于 2025-06-17 11:41:57 发布

不喜欢吃饼

最新推荐文章于 2025-06-17 11:41:57 发布

阅读量1.3k

点赞数 24

CC 4.0 BY-SA版权

文章标签：前端学习 echarts

本文链接：https://blog.csdn.net/weixin_57760759/article/details/139506667

一、描述

由于上一篇文章已经介绍了处理方法，这篇文章主要展示处理数据的完整代码

1、处理数据的hooks

import http from '../../../../utils';

import rest from '../../../../common/rest.json';

import dayjs from 'dayjs';

import Utils from '../../../../tools'

import { useState } from 'react';

const useMultidimensionAlanalysisApi = (baseUrl) => {

const [tableData, setTableData] = useState([]); // 图表数据

const [loading, setLoading] = useState(false)

const [seriesData, setSeriesData] = useState([]);

const [Xdata, setXData] = useState([]);

const [lengedData, setLengedData] = useState([]);

const color = ['#FFC627', '#7EB338', '#009FF5', "#5E7DEC", "#BE271C"]

// 处理图表数据

const [yAxisArr, setYAxisArr] = useState([])

// 获取数据

const getData = (index, data, timeRange) => {

if (!data.length) return;

setLoading(true)

http.post(baseUrl + rest.energy.multidimension.pointData, {

pointNames: data.map((el) => el.text),

startTime: dayjs(timeRange[0]).format('YYYY-MM-DD 00:00:00'),

endTime: dayjs(timeRange[1]).format('YYYY-MM-DD 23:59:59')

}).then((res) => {

formatData(res.data.data);

setLoading(false)

}).catch((e) => {

console.log(e);

});

};

const formatData = (lineData) => {

if (lineData.length) {

lineData = lineData.sort(function (a, b) {

return b.unit.length - a.unit.length

})

const lengedArr = [];

let yAxisData = []

let timeData = [];

let unitData = []

lineData.forEach((el) => {

el.samples = el.samples.map(el => ({

...el,

value: el.value,

collectTime: Date.parse(el.collectTime)

})).sort(function (a, b) {

return a.collectTime - b.collectTime

})

timeData = el.samples.map(el => dayjs(el.collectTime).format("YYYY-MM-DD HH:mm"))

unitData.push(el?.unit)

});

setTableData(lineData)

unitData = [...new Set(unitData)]

setXData(timeData);

unitData.forEach((el, index) => {

yAxisData.push({

position: index === 0 ? "left" : "right",

// offset: formatdDistance(index),

type: 'value',

name: el,

nameTextStyle: {

color: "#A0A0A0",

fontSize: '.875rem',

padding: index === 0 ? [0, 35, 15, 0] : [0, 0, 15, 40]

},

alignTicks: true, // ！！配置多坐标轴标签对齐

splitLine: {