owlnas

前言

业务中需要使用echarts双y轴刻度线对齐实现

实现思路

实现思路也很简单，利用echarts配置yAxis中的min、max 、interval属性，先获取所有数据的最大值以及最小值，根据再计算刻度间隔interval。我这里的开发需求是5等分，那么interval = (max-min) / 5。

计算min、max、interval

let arr1 = []
let arr2 = []
let arr3 = []
let arr4 = []
let arr5 = []
let profitArr = []
const getMaxValue = (arr1, arr2, arr3, arr4, arr5) => {
    let newArr = [...arr1,...arr2,...arr3,...arr4,...arr5]
    let max = Math.max(newArr)
    return Math.round(max)
}
const getMinValue = (arr1, arr2, arr3, arr4, arr5) => {
    let newArr = [...arr1,...arr2,...arr3,...arr4,...arr5]
    let min = Math.min(newArr)
    return Math.round(min)
}
const min1 = getMinValue(arr1, arr2, arr3, arr4, arr5)
const max1 = getMaxValue(arr1, arr2, arr3, arr4, arr5)

配置yAxis


{
    yAxis: [
        // 左边y轴
        {
            type: 'value',
            boundaryGap: false,
            min: min1,
            max: max1,
            interval: (max1 - min1) / 5,// 间隔
            splitNumber: 5,
            name: '',
            axisLabel: {
                show: true,
                color: '#00000073',
                interval: 'auto',
                formatter: '{value} '
            },
            splitLine: {
                show: true
            }
        },
        //右边y轴
        {
            type: 'value',
            name: '',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            max: 1,
            min: 0,
            splitNumber: 5,
            axisLabel: {
                show: true,
                formatter: function(val) {
                    return `${val * 100}%`
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed'
                }
            }
        }

    ],
}

配置series

将需要设置为百分比的数据对应到右边y轴上，通过将yAxisIndex设置为对应下标实现。

{
    series: [
        {
            name: '利润率',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            lineStyle: { color: '#f7a45c' },
            data: profitArr
        }
    ]
}

完整配置

// vue中获取echart要渲染的元素
this.mychart = this.$echarts.init(this.$refs['chart'])

let arr1 = []
let arr2 = []
let arr3 = []
let arr4 = []
let arr5 = []
const getMaxValue = (arr1, arr2, arr3, arr4, arr5) => {
    let newArr = [...arr1,...arr2,...arr3,...arr4,...arr5]
    let max = Math.max(newArr)
    return Math.round(max)
}
const getMinValue = (arr1, arr2, arr3, arr4, arr5) => {
    let newArr = [...arr1,...arr2,...arr3,...arr4,...arr5]
    let min = Math.min(newArr)
    return Math.round(min)
}
const min1 = getMinValue(arr1, arr2, arr3, arr4, arr5)
const max1 = getMaxValue(arr1, arr2, arr3, arr4, arr5)

// x轴类目名称
const xData = ['03-16', '03-17', '03-18', '03-19']

const option = {
    title: {},
    tooltip: {
        trigger: 'item',
        position: 'left'
    },
    legend: {
        data: [
            '销售',
            '收入',
            '总成本',
            '退款',
            '利润',
            '利润率'
        ],
        align: 'left'
    },
    grid: {
        show: false,
        left: '5%',
        right: '5%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {},
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xData,
        axisLine: {
            show: false
        },
        axisLabel: {
            show: true,
            color: '#00000073'
        },
        axisTick: {
            alignWithLabel: true
        },
        splitLine: {
            show: true
        }
    },
    yAxis: [
        {
            type: 'value',
            boundaryGap: false,
            min: min1,
            max: max1,
            interval: (max1 - min1) / 5,
            splitNumber: 5,
            name: '',
            axisLabel: {
                show: true,
                color: '#00000073',
                interval: 'auto',
                formatter: '{value} '
            },
            splitLine: {
                show: true
            }
        },
        //右边y轴
        {
            type: 'value',
            name: '',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            max: 1,
            min: 0,
            splitNumber: 5,
            axisLabel: {
                show: true,
                // interval: 'auto',
                formatter: function(val) {
                    return `${val * 100}%`
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed'
                }
            }
        }

    ],
    series: [
        {
            name: '销售',
            type: 'line',
            barMaxWidth: 40,
            data: arr1
            // data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '收入',
            type: 'line',
            barMaxWidth: 40,
            data: arr2
            // data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '总成本',
            type: 'line',
            barMaxWidth: 40,
            data: arr3
            // data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '退款',
            type: 'line',
            barMaxWidth: 40,
            data: arr4
        },
        {
            name: '利润',
            type: 'line',
            yAxisIndex: 0,
            barMaxWidth: 40,
            data: arr5
        },
        {
            name: '利润率',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            lineStyle: { color: '#f7a45c' },
            data: profitArr
        }
    ]
}