Echarts x轴坐标二级分组

梦凡尘

已于 2024-05-28 19:43:03 修改

阅读量1.8k

点赞数 36

分类专栏： echarts vue3 文章标签： echarts html 前端

于 2024-05-28 19:29:15 首次发布

本文链接：https://blog.csdn.net/qq_43225508/article/details/139275391

版权

vue3 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

echarts

4 篇文章 0 订阅

订阅专栏

在使用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，第一种情况也是最终需要的数据结构

需要单层数据即可表达二级父子关系
interface XAxis {
first: string, // 第一层数据（距离坐标轴最近的数据）
second: string // 第二层父级数据
}
// 则以上面数据为例，原始x轴数据为
xAxisData = [
{second:'水果'，first:'香蕉'},
{second:'水果',first:'苹果'},
{second: '笔'， first:'圆珠笔'},
{second:'笔'， first:'钢笔'}，
]
// 此种数据结构就是最为合适的。第一层x轴数据大家直接将xAxisData 中的first属性过滤即可
// 第二层数据的处理将会在第三步进行介绍

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

第二种数据结构为二层数据结构，以上图为例应该是
xAxisData = [
{second:'水果'，child:[
{first:'香蕉'}，
{first:'苹果'}
]}，
{second: '笔', child:[
{first:'钢笔'},
{first: '圆珠笔'}
]}
]，
如果接口返回的是这种二层数据结构，则需要将其扁平化变成上面那种只有一层的数据结构

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

首先已知知最终x轴的数据为
xAxisData = [
{second:'水果'，first:'香蕉'},
{second:'水果',first:'苹果'},
{second: '笔'， first:'圆珠笔'},
{second:'笔'， first:'钢笔'}，
]
在循环中配置xAxis中的数据。
当然目前只有两层可以不进行循环遍历。
只需要给option.xAxis[1]中的配置属性进行赋值即可
1，首先对data 属性进行赋值
option.xAxis[1].data = xAxisData.map((item:any)=>{return item.second;})
2，配置option.xAxis[1].axisTick和option.xAxis[1].axisLabel这两个对象
首先大家可能不知道上面两个辅助数组的作用
countXAxisStartIndex，获取第N层重复字符串的起始索引
const tempStartObj = countXAxisStartIndex(xAxisData)的结果为 {水果：0，笔：2 }
countXAxisEndIndex，获取第N层重复字符串的终止索引
const tempEndObj = countXAxisEndIndex(xAxisData); 的结果为 {水果：1，笔：3}
下面就可以开始配置x轴第二层相关属性了
option.xAxis[1] = {
...option.xAxis[1],
aXisTick:{
length: 40,
// 设置第二层刻度线的间隔，当第一个元素，以及每个重复二级元素的最后一个才会设置刻度
interval: (index: number, value: string) => index === tempEndObj[value] || index === 0,
},
axisLabel:{
align:'center',
interval:0,
// 去掉重复的二级坐标刻度，只保留位于一级坐标中间索引的那个二级坐标
formatter: (value: string, index: number) => {
const nowIndex = tempEndObj[value] - tempStartObj[value];
if (index === tempEndObj[value] - Math.ceil(nowIndex / 2)) {
return value;
}
return '';
},
}
};
注意事项：一定要先进行data属性赋值，否则，下面的aXisTick.interval,aXisLabel.formatter 对应的方法就不会有回调参数了。