Kiwi浏览器 - 支持 Chrome 扩展的安卓浏览器

王小沫

关注

阅读 5

2024-05-28

         在使用echarts 封装组件的时候,偶尔会遇到需要x轴坐标进行二层分组的需求。那么如何对echarts 进行二层分组呢,有以下几个步骤:

仅介绍二层分组的逻辑。有兴趣的可以进行三层延伸。

1,修改echarts Options 中xAxis 的配置。

此时若进行e二层分组,则xAxis 应该是一个数组,里面有两个x轴的配置对象。

第一个x轴对象除了需要data属性,其余属性正常配置即可。

第二个x轴对象需要配置

xAxis[
{
// 第一个x轴坐标(最靠近x轴的那个坐标
type:'category',
data:[],
},
{
// 第二个x轴坐标
type:'category',
position: 'bottom', 坐标轴的位置
offset:40, // 该坐标轴x轴文本向下偏移距离
axisTick:{
length: 40, // 增加分组下面父级坐标刻度线长度
interval: // 这个属性很重要下面介绍
},
axisLabel:{
align: 'center',
interval: 0,
formatter:// 这个属性很重要,下面介绍。
},
data:[],
}
]

现在第二个x轴配置只有axisTick.interval,axisLabel.formatter这两个属性没有介绍。在下面会继续介绍的。

2,处理接口中返回的x轴数据,此时返回的x轴数据应该是一个数组并且分为两种情况。

以下图示例

 2.1,第一种情况也是最终需要的数据结构

2.2,第二种接口返回的x轴数据

3,编写辅助函数,配置Option

3.1,辅助函数

/**
* @description: 计算第N层X轴重复字符串终止索引 n>1
* @param { string[] } list 第n层x轴全部数据
* @return {*}
*/

const countXAxisEndIndex = (list: string[]) => {
const temp = {} as { [key: string]: number };
if (list.length) {
let newVal = list[0];
let newIndex = 0;
temp[list[0]] = 0;
for (let i = 1; i < list.length; i++) {
if (newVal !== list[i]) {
temp[newVal] = newIndex;
newVal = list[i];
}
newIndex++;
}
}
temp[list[list.length - 1]] = list.length - 1;
return temp;
};

/**
* @description: 计算第N层X轴重复字符串起始索引 n>1
* @param { string[] } list 第n层x轴全部数据
* @return {*}
*/

const countXAxisStartIndex = (list: string[]) => {
const temp = {} as { [key: string]: number };
if (list.length) {
let newVal = list[0];
temp[list[0]] = 0;
for (let i = 1; i < list.length; i++) {
if (newVal !== list[i]) {
newVal = list[i];
temp[list[i]] = i;
}
}
}
return temp;
};

3.2,在循环中配置Option

如何进行三层分组,以及多层分组;

大致逻辑和二层分组的逻辑是相同的。

要在循环中生成option.xAxis数组中的每个配置对象。对除了第一级的x坐标轴都需要进行设置position :‘bottom';调整offset 的数值(第N层数据距离x轴的距离。以及增加axisTick.length 刻度的长度,

以上就是echarts 中x轴坐标分组的核心逻辑。

精彩评论(0)

0 0 举报