echarts Y轴数据类型不同怎么让折线图显示差距不大

如果希望在同一grid中展示不同数据类型的折线(1000或10%),那么展现出来的折线肯定显示差距很大,那么怎么让这两条折线显示效果差不多,在之前的项目中碰到了这个问题

每条折线对应的是不同的数据组,即series的数据组,对每个数据组进行排序,求出最大值,然后将这些最大值放在一个数组里,分别填充到yAixs的max中,这样就互不影响,文字比较绕,直接上代码

eg:

for(var j in this.initVal) {
                    legendData.push(this.initVal[j]);
                    var i = 0;
                    var newSeriesData = [];
                    //遍历店铺汇总数据对象,对本地存储数据进行遍历,下拉框数组与本地数据匹配时                    
                    for(var k=0; k<$data.length;k++) {
                        var $obj = this.parameter.dataList.find(obj => {
                            return obj.label === this.initVal[j];
                        });
                        if($obj) {
                            var $key = $obj.key;
                            //店铺汇总数据对象里是对象,遍历这个对象
                            for(var _$key in $data[k]) {
                                if(_$key === $key) {
                                    newSeriesData.push($data[k][$key]);
                                    i++;
                                }
                                seriesData[j] = newSeriesData;
                            }
                        }
                    }
                    var sd = JSON.parse(JSON.stringify(newSeriesData));
                    var max = sd.sort(function(a, b) { return b - a; })[0] + "";
                    max = (parseInt(max.substring(0, 1)) + 1) + arrPint(max.split(".")[0].length - 1)
                    yAxisData.push({
                        type: 'value',
                        max: max,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: j == 0,
                            lineStyle: {
                                color: '#CCC'
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#CCC'
                            }
                        },
                    })

                    series.push({
                        name: this.initVal[j],
                        type: 'line',
                        yAxisIndex: j,
                        data: seriesData[j],
                        itemStyle: {
                            normal: {
                                color: colorList[j],
                            }
                        },
                        //                        showAllSymbol:true,
                    });
                }

这里yAixs不再是对象,而是数组,里面每一个索引对应一个max

猜你喜欢

转载自www.cnblogs.com/feijiediyimei/p/10063179.html