如题,我需要用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)
第一次发表这种提问,语言组织能力有限,如果有大神看懂了,麻烦指导一下,谢谢
