双y轴分割线对齐ECharts Gallery

20:11:45图表已生成
代码
let dataSource = [
    ["product", "bsntq", "zje", "B"],
    ["1416001", 102, 230, 236],
    ["1403100", 596, 250, 509],
    ["1400111", 459, 550, 356],
    ["19", 308, 785, 119],
    ["214", 120, 340, 550],
    ["236", 230, 340, -650],
    ["238", 540, 120, 760],
    ["237", 560, -230, 550],
    ["239", -1230, 456, 142],
    ["1311009", 654, 450, -869],
    ["1111401", 444, 230, 462],
    ["274", 191, 267, 219],
    ["240", 120, 340, 670]
]

option = {
    "grid": {
        "left": "3%",
        "right": "4%",
        "bottom": "3%",
        "containLabel": true
    },
    "color": ["#2A3D52", "#A9C0D9", "#5B6C83", "#D7CCB8", "#38526E", "#BFBFBF", "#2A5D98", "#9A6A2D", "#DCA867"],
    "title": {
        "left": "center",
        "show": true,
        "text": "shj测试用",
        "textStyle": {
            "color": "#333",
            "fontSize": 18
        }
    },
    "xAxis": [{
        "type": "category"
    }],
    "yAxis": [{
        "type": "value"
    }, {
        "type": "value"
    }],
    "legend": {
        "show": true,
        "type": "scroll",
        "bottom": 0,
        "textStyle": {
            "fontSize": 12
        }
    },
    "series": [{
        "name": "上年同期",
        "type": "bar",
        "barGap": "30%"
    }, {
        "name": "增减额",
        "type": "bar",
        "barGap": "30%"
    }, {
        "name": "累计数",
        "type": "line",
        "yAxisIndex": 1
    }],
    "dataset": {
        "source": dataSource
    },
    "tooltip": {
        "axisPointer": {
            "type": "none"
        }
    }
}

// 刻度最大值
function yAxisMax(maxValue) {
    if (isNaN(maxValue / 1) || maxValue / 1 < 10) {
        return 10
    }
    const max = Math.ceil(maxValue) + '';
    const itemValue = Math.ceil(max / 5) + '';
    const mins = Math.ceil((itemValue / Math.pow(10, itemValue.length - 1)))
    const item = mins * Math.pow(10, itemValue.length - 1) + '';
    // item 需要是5的整数倍
    const res = Math.ceil(item / 5) * 5 * 5;
    return res
}

// 获取y轴 数值，上部分割数，下部分割数
function getYAxisConfig(dataSource, serieIndexs = []) {
    // y轴数值
    let yData = []
    dataSource.forEach((item, index) => {
        if (index > 0) { // 第一行数据不取值
            serieIndexs.forEach(serie => {
                yData.push(item[serie + 1] || 0)
            })
        }
    })
    // 绝对值最大值
    let absMax = yData.reduce((num1, num2) => {
        return Math.abs(num1) > Math.abs(num2) ? Math.abs(num1) : Math.abs(num2)
    })
    // 间隔值：默认分割段数 5
    let interval = yAxisMax(absMax) / 5

    // 取最大值
    let max = Math.max(...yData)
    // 取最小值
    let min = Math.min(...yData)

    let topSplitNumber = max > 0 ? Math.ceil(max / interval) : 0
    let downSplitNumber = min < 0 ? Math.ceil(Math.abs(min) / interval) : 0
    return {
        interval: interval,
        yData: interval,
        topSplitNumber: topSplitNumber,
        downSplitNumber: downSplitNumber
    }

}

// 获取各y轴对应的serie
function getYAxisIndexSeries(series, dataSource) {
    let yAxisIndexSeries = {}
    series.forEach((item, index) => {
        if (!item.yAxisIndex) { // 默认y轴
            if (!yAxisIndexSeries.hasOwnProperty("0")) {
                yAxisIndexSeries['0'] = [index]
            } else {
                yAxisIndexSeries['0'].push(index)
            }
        } else if (item.yAxisIndex) {
            let key = item.yAxisIndex + ""
            if (!yAxisIndexSeries.hasOwnProperty(key)) {
                yAxisIndexSeries[key] = [index]
            } else {
                yAxisIndexSeries[key].push(index)
            }
        }
    })

    if (Object.keys(yAxisIndexSeries).length > 1) { // 存在多条y轴
        splitLineAlign(dataSource, yAxisIndexSeries)
        // yAxisIndexSeries = {
        //     0: [0, 1],
        //     1: [2]
        // }
    }

}

// 解决分割线不对齐
function splitLineAlign(dataSource, yAxisIndexSeries) {
    let applyObj = {}
    let topSplitNumbers = []
    let downSplitNumbers = []
    for (let key in yAxisIndexSeries) {
        applyObj[key] = getYAxisConfig(dataSource, yAxisIndexSeries[key])
        topSplitNumbers.push(applyObj[key].topSplitNumber)
        downSplitNumbers.push(applyObj[key].downSplitNumber)
    }
    let topSplitNumber = Math.max(...topSplitNumbers)
    let downSplitNumber = Math.max(...downSplitNumbers)

    for (let key in applyObj) {
        if (option.yAxis[key]) {
            option.yAxis[key]['max'] = applyObj[key].interval * topSplitNumber
            option.yAxis[key]['min'] = applyObj[key].interval * downSplitNumber * (-1) // x轴下部分 负数
            option.yAxis[key]['interval'] = applyObj[key].interval
        }
    }
}



getYAxisIndexSeries(option.series, dataSource)
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
