解决Echarts中Y轴数值极其相近的方法

根据可户需求在实现Echarts折线图的时候发现数值极其相近，3条折线图都重合到一起，非常影响用户体验，因此此方法

方法的思路来源于Y轴最大值与最小值区间的处理

核心代码如下（基于vue实现）

// 准备日期数据
            this.dateList =this.threeU.dateString
            // 准备数值数据
            this.dataList =this.threeU.uas
            // 计算数据最大值和最小值
            let minValue = '0'
            let maxValue = '0'
            let list = this.dataList.filter(item => (item && item != 'null' && item != 'NaN'))
            let precision = 10000 //精度
            maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
            minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
            // 计算间隔，返回y轴最大值，y轴最小值 ，间隔
            let getLeftData = (min, max) => {
                // 控制分隔条数，
                let diff = max - min
                return {
                    max: max + diff,
                    min: min - diff,
                    // 分割成5等份 
                    interval: (max + diff - (min - diff)) / 5,
                };
            }
            this.interObj = getLeftData(minValue, maxValue)

整体代码

<!--
 * @Author: 李勇
 * @Date: 2021-03-25 21:14:19
 * @LastEditors: 李勇
 * @LastEditTime: 2021-04-09 10:26:13
 * @FilePath: \line-lose-phaseIi\src\views\timeSharing\components\curve.vue
 * @Description: 
-->
<template>
    <div class="curve_box">
        <Title text="三相电压" />
        <div class="curve" ref="curve"></div>
    </div>
</template>
<script>
import Title from "@/components/Title.vue";
import echarts from "echarts";
export default {
    components: {
        Title
    },
    created() {
        this.$nextTick(() => {
            this.curve();
        })
    },
    props: {
        threeU: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data(){
        return{
            dataList:{
                type:Array,
                default:[]
            },
            dateList:{
                type:Array,
                default:[]
            },
            interObj:{
                type:null
            }
        }
    },
    watch: {
        dataList: {
            // 在父组件数据发生改变后子组件要做到实时更新,就需要子组件用watch来监听数据的变化
            // 看情况是否需要newValue和oldValue之间值比较
            handler(newVal, oldVal) {
                if (this.myChart) {
                    if (newVal) {
                        this.myChart.setOption(newVal)
                    } else {
                        this.myChart.setOption(oldVal)
                    }
                } else {
                    this.curve()/* 重新执行初始化图表实例 */
                }
            },
            deep: true
        }
    },
    methods: {
        curve() {
            var myChart = echarts.init(this.$refs.curve);
            // 准备日期数据
            this.dateList =this.threeU.dateString
            // 准备数值数据
            this.dataList =this.threeU.uas
            // 计算数据最大值和最小值
            let minValue = '0'
            let maxValue = '0'
            let list = this.dataList.filter(item => (item && item != 'null' && item != 'NaN'))
            let precision = 10000 //精度
            maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
            minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
            // 计算间隔，返回y轴最大值，y轴最小值 ，间隔
            let getLeftData = (min, max) => {
                // 控制分隔条数，
                let diff = max - min
                return {
                    max: max + diff,
                    min: min - diff,
                    // 分割成5等份 
                    interval: (max + diff - (min - diff)) / 5,
                };
            }
            this.interObj = getLeftData(minValue, maxValue)
            var option = {
                 legend: {
                    icon: 'circle',
                    top: '2%',
                    right: '1%',
                    itemWidth: 6,
                    itemGap: 20,
                    textStyle: {
                        color: '#556677'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            show: true,
                            backgroundColor: '#fff',
                            color: '#556677',
                            borderColor: 'rgba(0,0,0,0)',
                            shadowColor: 'rgba(0,0,0,0)',
                            shadowOffsetY: 0
                        },
                        lineStyle: {
                            width: 0
                        }
                    },
                    formatter: '{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
                    backgroundColor: 'rgba(24, 71, 185, .6)',
                    textStyle: {
                        color: '#fff'
                    },
                    padding: [10, 10],
                    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
                },
                grid: {
                    top: '15%',
                    bottom: "12%",
                    left: "10%",
                    right: "10%",
                },
                xAxis: {
                    type: 'category',
                    data: this.dateList,
                    axisLabel: {
                        interval: 'auto',
                        textStyle: {
                            color: '#999',//坐标值得具体的颜色

                        },
                        formatter: function (params) {
                            // console.log("params", params.slice(10))
                            return params.slice(10)
                        }
                    },
                    axisLine: {
                        show: true,//x轴线隐藏
                        fontSize: 12,
                    },
                    axisTick: {
                        show: true,//隐藏x轴的标点
                    },
                },
                yAxis: {
                    type: 'value',
                    // 设置y轴间隔
                    interval: this.interObj.interval,
                    // 设置y轴最大值
                    min: this.interObj.min,
                    // 设置y轴最小值
                    max: this.interObj.max,
                    axisLabel: {
                        textStyle: {
                            color: '#999',
                        },
                        interval: 'auto',
                        formatter: function (value, index) {
                            return value.toFixed(0) ;
                        }
                    },
                    // 显示分隔线
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['#ccc'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                },
                series: [
                    {
                    name: "A相",
                    data: this.threeU.uas,
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                        color: '#39FDDB'
                    },
                },
                {
                    name: "B相",
                    data: this.threeU.ubs,
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                        color: '#F45E23'
                    },
                },
                {
                    name: "C相",
                    data: this.threeU.ucs,
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                        color: '#C63CFF'
                    },
                },
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.curve_box {
    height: 100%;
    width: 100%;
}
.curve {
    width: 100%;
    height: calc(100% - 33px);
}
</style>

效果图如下

希望对大家有所帮助，如有更好的方法可以留言指教