zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Java程序员必知的8大排序
    Servlet与JSP间的传值问题
    Servlet上传文件详细解析以及注意事项
    JSP入门学习经验
    统计语言模型(Statistical Language Models)(条件概率公式)
    自定义用户控件ascx
    asp.net相对路径、绝对路径
    A list of supported CSS selectors when invoking g(..)
    一位研究生导师心目中理想的论文(转)
    常用软件
  • 原文地址:https://www.cnblogs.com/feijiediyimei/p/10063179.html
Copyright © 2011-2022 走看看