echarts实现多X轴

一、实现效果

本次实现用的是vue2，不管是vue2还是vue3配置项都差不多

二、实现多X轴

此处基础图表为折线图，要实现多X轴其实就是在yAxis中配置多个数组，并且在对应的series配置中将其配置项yAxisIndex的顺序写好。

在yAxis数组中的对象及其配置如下：

{
      type: 'value',
      name: 'First', // y轴上方的字，如果这个轴要带单位也可以在这儿实现
      nameTextStyle: {
          // 调整字体的位置
          padding: [0, 0, 0, -25],
      },
      axisLine: {
          lineStyle: {
            // Y轴上数字的颜色，当数据较多时可以尝试与折线图颜色保持一致
             color: '#0085D5', 
           },
       },
      splitLine: {
           show: false,
      },
      splitNumber: 5,
      axisTick: {
          inside: true,
           length: 10,
       },
},

在series数组中的配置项如下：

                    {
                        type: 'line',
                        data: [11, 12, 13, 14, 15, 16, 17],
                        yAxisIndex: 0, // 对应在yAxis中的数组下标
                    },

关于在Y上方配置单位或者多行文本，是在yAxis配置的数组中对name项使用富文本，举例：

此处我是动态配置的数据：

                {
                        type: 'value',
                        // 此处使用富文本
                        name: `{a|${item.name}}\n{b|单位：${item.unit}}`,
                        nameTextStyle: {
                           // 富文本的定义
                            rich: {
                                a: {
                                    color: '#666666',
                                    align: 'left',
                                    padding: [0, 0, 8, 35],
                                },
                                b: {
                                    color: '#a3a3a3',
                                    padding: [0, 0, 0, 35],
                                },
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: colorArr[i],
                            },
                        },
                        splitNumber: 5,
                        axisTick: {
                            inside: true,
                            length: 10,
                        },
                        offset: 70 * (i - 1),
                        position: 'center',
                    }

三、完整的配置代码

creatactualbar() {
    let chartDom = document.getElementById('lineChart');
    this.echarts1 = this.$echarts.init(chartDom);
    let option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: [
       // 此处的name配置要和series中的name配置一样,如果legend没有显示可以检查一下两处是否一致
                { name: 'Firstaaa', icon: 'circle' },
                { name: 'Second', icon: 'circle' },
                { name: 'Third', icon: 'circle' },
            ],
            textStyle: {
                color: '#444444',
                fontsize: 25,
            },
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: [
            {
                type: 'value',
                name: 'First', // y轴上方的字，如果这个轴要带单位也可以在这儿实现
                nameTextStyle: {
                    // 调整字体的位置
                    padding: [0, 0, 0, -25],
                },
                axisLine: {
                    lineStyle: {
// Y轴上数字的颜色，当数据较多时可以尝试与折线图颜色保持一致
                        color: '#0085D5', 
                    },
                },
                splitLine: {
                    show: false,
                },
                splitNumber: 5,
                axisTick: {
                    inside: true,
                    length: 10,
                },
            },
            {
                type: 'value',
                name: 'Second',
                nameTextStyle: {
                    padding: [0, 0, 0, 25],
                },
                axisLine: {
                    lineStyle: {
                        color: '#5CC210',
                    },
                },
                splitLine: {
                    show: false,
                },
                splitNumber: 5,
                axisLabel: {
                    formatter: '{value}',
                },
                axisTick: {
                    inside: true,
                    length: 10,
                },
                offset: 0,
                position: 'center',
            },
            {
                type: 'value',
                name: 'Third',
                nameTextStyle: {
                    padding: [0, 0, 0, 50],
                },
                axisLine: {
                    lineStyle: {
                        color: '#5F769C',
                    },
                },
                splitLine: {
                    show: false,
                },
                splitNumber: 5,
                axisLabel: {
                    formatter: '{value}',
                },
                axisTick: {
                    inside: true,
                    length: 10,
                },
                offset: 70,
                position: 'center',
            },
        ],
        series: [
            {
                name: 'Firstaaa',
                type: 'line',
                data: [11, 12, 13, 14, 15, 16, 17],
                yAxisIndex: 0, // 对应在yAxis中的数组下标
            },
            {
                name: 'Second',
                type: 'line',
                data: [21, 22, 23, 24, 25, 26, 27],
                yAxisIndex: 1,
            },
            {
                name: 'Third',
                type: 'line',
                data: [31, 32, 33, 34, 35, 36, 37],
                yAxisIndex: 2,
            },
        ],
    };

    this.echarts1.setOption(option);
},

下次有空再总结下图：