2 chichuhanga chichuhanga 于 2017.08.30 14:21 提问

ECharts两组数据,数据量不同,当鼠标移动只有一组数据的地方的时候会报错

如题,我需要用Echarts做个折线图,里面有两组数据,但是其中一组数据的数据量较少,到了后面会只有一剩一组数据,当鼠标一上去的时候就会报错

以下是代码

js

 $(function(){
    $("#try").click(getData);
})


function getData(){
    var name = $("#try").val();
    set_dates(name);
    set_prices1(name);
    set_prices2("诚德");
    show_line();
}

function set_dates(name){

    $.ajax({
            "url":path+"/stock/dates.do",
            "type":"post",
            "dataType":"json",
            "data":{"name":name},
            "success":function(result){
                if(result.state==0){
                    var dates = result.data;
                    addCookie("dates",dates,2);
                }
            },
            "error":function(){
                console.log("获取失败");
            }
        })
}

function set_prices1(name){
    $.ajax({
        "url":path+"/stock/prices.do",
        "type":"post",
        "dataType":"json",
        "data":{"name":name},
        "success":function(result){
            if(result.state==0){
                var prices = result.data;
                console.log(prices);
                addCookie("prices1",prices,2);
            }
        },
        "error":function(){
            console.log("获取失败");
        }
    })
}

function set_prices2(name){
    $.ajax({
        "url":path+"/stock/prices.do",
        "type":"post",
        "dataType":"json",
        "data":{"name":name},
        "success":function(result){
            if(result.state==0){
                var prices = result.data;
                console.log(prices);
                addCookie("prices2",prices,2);
            }
        },
        "error":function(){
            console.log("获取失败");
        }
    })
}

jsp

 <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="echarts/jquery.min.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script>
<script type="text/javascript" src="scripts/for.js"></script>
<script type="text/javascript" src="scripts/cookie_util.js"></script>
<script type="text/javascript" src="scripts/path.js"></script>
</head>
<body style="font-size: 30px;">
    <!-- 为ECharts准备一个具备大小(宽高)的DOM -->
    <div id="main" style="width: 600px; height: 400px"></div>

    <input id="try" type="button" value="宏旺">

    <script type="text/javascript">
        //基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));

        //指定图表的配置项和数据
        function show_line(){
            var dates = getCookie("dates").split(",");
            var data2 = getCookie("prices1").split(",");
            var data1 = getCookie("prices2").split(",")

            console.log("日期集合为:"+dates);

            console.log("数字集合3为:"+data2);
            console.log("数字集合2为:"+data1);

            option = {
                title : {
                    text : '折线对比图示例',
                    left : 'center'
                },
                tooltip : {
                    trigger : 'axis',
                    formatter:function(params)//数据格式
                    {
                    var relVal = params[0].name+"<br/>";
                    relVal += params[0].seriesName+ ' : ' + params[0].value+"<br/>";
                    relVal +=params[1].seriesName+ ' : ' +params[1].value+"<br/>";
                    return relVal;
                    }

                },
                legend : {
                    left : 'left',
                    textStyle : {
                        color : '#fff'
                    },
                    data : [ '第2个数据', '第1个数据' ]
                },
                grid : {
                    left : '10%',
                    right : '10%',
                    bottom : '15%'
                },
                xAxis : {
                    type : 'category',
                    name : 'x',
                    axisLine : {
                        onZero : false
                    },
                    splitLine : {
                        show : false
                    },
                    splitLine : {
                        show : false
                    },
                    data : dates
                },
                grid : {
                    left : '3%',
                    right : '4%',
                    bottom : '3%',
                    containLabel : true
                },
                yAxis : {
                    type : 'log',
                    name : 'y',
                    min:7000,
                    max:15000,
                    scale : true,
                    splitArea : {
                        show : true
                    }
                },
                dataZoom : [
                        {
                            textStyle : {
                                color : '#8392A5'
                            },
                            handleIcon : 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize : '80%',
                            dataBackground : {
                                areaStyle : {
                                    color : '#8392A5'
                                },
                                lineStyle : {
                                    opacity : 0.8,
                                    color : '#8392A5'
                                }
                            },
                            handleStyle : {
                                color : '#fff',
                                shadowBlur : 3,
                                shadowColor : 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX : 2,
                                shadowOffsetY : 2
                            }
                        }, {
                            type : 'inside'
                        } ],
                series : [ {
                    name : '第2个数据',
                    type : 'line',
                    data : data2,

                }, {
                    name : '第1个数据',
                    type : 'line',
                    data : data1,

                },  ]
            };

            //使用刚制定的配置项和数据显示图表
            myChart.setOption(option);
        }

    </script>
</body>
</html>

报错内容

 echartsDemo.jsp:42 Uncaught TypeError: Cannot read property 'seriesName' of undefined
    at formatter (echartsDemo.jsp:42)
    at ExtendedClass._showTooltipContent (echarts.js:58535)
    at ExtendedClass.<anonymous> (echarts.js:58415)
    at echarts.js:3357
    at ExtendedClass._showOrMove (echarts.js:58329)
    at ExtendedClass._showAxisTooltip (echarts.js:58404)
    at ExtendedClass._tryShow (echarts.js:58301)
    at ExtendedClass.manuallyShowTip (echarts.js:58187)
    at callView (echarts.js:952)
    at ECharts.<anonymous> (echarts.js:946)

第一次发表这种提问,语言组织能力有限,如果有大神看懂了,麻烦指导一下,谢谢

1个回答

huang931027
huang931027   2017.08.31 09:24

这个就是在显示的时候formatter函数里面的时候注意一下,来个判断就可以了

   tooltip : {
                    trigger : 'axis',
                    formatter:function(params)//数据格式
                    {



                                            var relVal = params[0].name+"<br/>";
                                            relVal += params[0].seriesName+ ' : ' + params[0].value+"<br/>";
                                            if(null!=params[1].value || ""!=params[1].value){
                                                relVal +=params[1].seriesName+ ' : ' +params[1].value+"<br/>";
                                            }
                                            return relVal;
                    }

                }
huang931027
huang931027 还有可能arams[1].value 是undefined 就大概是这个思路,希望对你有帮助,望采纳哦
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片