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)

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

0

1个回答

这个就是在显示的时候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;
                    }

                }
-3
huang931027
IAmObject 还有可能arams[1].value 是undefined 就大概是这个思路,希望对你有帮助,望采纳哦
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
找出一组数据的不同数据
一组数据中只有一个数字出现了一次,其他所有数字都是成对出现的。(使用位运算) 例如: 数据:1 3 5 7 1 3 5 8这组数据中,只有7出现了一次。 代码如下: #include int one_time(int x[],int n) { int i = 0; int j = 0; for(i=0; i<n-1; i++) { for(j=i+1; j<n; j++)
为什么会输出两组数据
#includerint main()rr int n,i,sum;r char t;r while(scanf("%d",&n)!=EOF)r sum=0;r for(i=0;i=97&&t<=122)r sum=sum+t;r else;r r printf("%d\n",sum);r return 0;r
MATLAB实现两组不同数据的时间对齐/同步
两组不同数据的时间同步 对两组不同数据进行融合的过程中,需要保证两组数据的时间标签的完全对齐的。这里利用MATLAB实现两组数据的时间标签对齐,其中要求数据Data1的采样频率大于数据Data2的采样频率。 function SynMatrix = TimeSyn2Data(Data1, Data2) % Data1: N Rows &amp;amp; 1 Column; Data2: M Rows ...
怎么快速比较两组数据的不同?
从服务器和客户端同一个数据库表返回的数据,以服务器端的数据为主,怎么快速高效的判断两组数据有那些不同?rnEge:id、count、staternid相同,1、比较是否有新的id,2、已有的id数据是否相同rnrn有高人指教吗?
当鼠标靠上去的时候停止移动
在鼠标靠到漂浮的FLASH上的时候,FLASH就停止移动,然后可以点击.rn漂浮的代码如下,忘记了那个函数是用来停止的了.rnrn rn rn rn rn rn rn rn rnrn在线等.
关于Echarts的formatter函数的自定义(图像上显示一组数据的图像,当鼠标移上去的时候显示五组数据)
前端使用echarts3实现tooltip的formatter函数的自定义,实现显示一组图像,tooltip里面显示多组数据
HTML 两组数据比较
两组数据比较,如何才能把结果用WEB(HTML)表达出来.rn列如:rn数据A: rnaaarnbbbrncccrn数据Brnaaarndddrncccrnrn我想要的结果是:rn数据A: 数据B rnaaa aaarnbbb dddrnccc cccrn其中bbb,ddd要用不同的颜色表示出来.这样一来才能突出不同之处.rn用HTML,可以实现吗?rn用两个textarea来装这两组数据.然后用不同的颜色表示出不同的数据.rn这一想法行得通吗?rn
两组数据对比
我现在又两组数据:rn第一组是由人输入的,人有造假的可能,但是不造假的话数据时准确的;rn第二组是机器监测的,机器有可能出故障;rn我改如何对比两组数据,知道那个出错概率最大啊
比较两组数据
编码 名称 编码 名称 数量 金额rn1011 苹果 1011 苹果 3 6rn2022 梨 2022 梨 5 10rn2233 油桃 454 西瓜 4 26rn454 西瓜 485 大豆 2 4rn485 大豆 266 甜瓜 3 5rn266 甜瓜 488 花生 2 8rn1007 豆角 rn488 花生 rnrnrn 编码是唯一的数据有很多如何找出不同的数据 rn
输出的表格 只有一组数据.怎么修改?
public boolean toOutList(List billList) throws IOException n // 第一步,创建一个webbook,对应一个Excel文件 n HSSFWorkbook wb = new HSSFWorkbook(); n // 第二步,在webbook中添加一个sheet,对应Excel文件中的sheet n HSSFSheet sheet = wb.createSheet("订单"); n // 第三步,在sheet中添加表头第0行,注意老版本poi对Excel的行数列数有限制short n HSSFRow row = sheet.createRow((int) 0); n // 第四步,创建单元格,并设置值表头 设置表头居中 n HSSFCellStyle style = wb.createCellStyle(); n style.setAlignment(HSSFCellStyle.ALIGN_CENTER); // 创建一个居中格式 n n HSSFCell cell = row.createCell(0); n n cell.setCellValue("订单编码"); n cell.setCellStyle(style); n cell = row.createCell( 1); n cell.setCellValue("患者姓名"); n cell.setCellStyle(style); n cell = row.createCell( 2); n cell.setCellValue("医护姓名"); n cell.setCellStyle(style); n cell = row.createCell( 3); n cell.setCellValue("账单金额"); n cell.setCellStyle(style); n n // 第五步,写入实体数据, n int x=billList.size();n for (int i = 0; i < x; i++) n Bill b= billList.get(i); n // 第四步,创建单元格,并设置值 n row.createCell(0).setCellValue( b.getOrderNum()); n row.createCell(1).setCellValue(b.getPaName()); n row.createCell(2).setCellValue(b.getYihuName()); n row.createCell(3).setCellValue(b.getBillMoney()); n System.out.println(b);n n n FileOutputStream fout = new FileOutputStream("F:/students.xls"); n wb.write(fout);n fout.flush();n fout.close(); n return true;n nnnn```n n```nn
将一组很大的数据集随机分成两组数据
最近在看机器学习的东西时发现了一些特别好玩的东西,机器学习中又分为训练集和测试集,如何把一组很大的数据分为这两个集合呢?可以使用接下来的函数完成: 当然由于random这个随机数生成函数每次产生的数不一定都是刚好达到你的期望,所以总会有一点小小的误差。例如阈值为0.5两个数组的数量却不是一样的: 但对于一个很大的数据集来说,这点误差可以忽略。
利用ECharts实现数据的左右移动
今天看到一个需求 “打开这个链接 http://echarts.baidu.com/demo.html#bar-tick-align 左边是代码 修改这个代码 让右边的图,每隔一秒向左移一位,最左边的柱移出屏幕,最右边增加一个随机数.” 首先第一步考虑的是,获取到这个数组: var data= option.series[0].data;//获取数组 其次是做一个定时器,随机生
一组表格数据,怎么得到他的不同次数
我举个例子,好比这个图中的数据,有上百个这样的箱子 ,怎么得到下边那个表格的数据,这个循环该怎么写才能得到我想要的数据,谢谢rn[img=https://img-bbs.csdn.net/upload/201807/29/1532861851_435750.jpg][/img]rnrnrn
一组数据按照不同的优先级快速排序
给定一个数据类型: typedef struct { int a,b,c; }struction; 现在需要把struction型的数组array首先按照a的大小升序排列,如果a相同则再按照b的大小升序排列,如果b也相同则再按c的大小升序排列。 首先定义三个比较函数 int cmp_a(const void *a,const void *b) { struction *aa=(structi...
数据签名的时候报错,什么原因?
未能获取此实现的 CryptoAPI 加密服务提供程序 (CSP)。 rn说明: 执行当前 Web 请求期间,出现未处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。 rnrn异常详细信息: System.Security.Cryptography.CryptographicException: 未能获取此实现的 CryptoAPI 加密服务提供程序 (CSP)。rn
Echarts(一)一组不同颜色的柱状图
【1】     $(function () {                //加载日历列表数据         AirReport();         //加载图表数据         bindChart();     }); 【2】  var dateData = [];     var dataAQI = [];     //绑定图表     function bi
echarts 动态添加ajax数据-报错 dataIndex undefined
我ajax 获取数据,然后,通过js将数据拼装成所需格式,然后给option赋值:如下rnrn option.series[0].data = arr_level;rn option.series[0].links = allLink;rn console.log(option.series[0].data);rn console.log(option.series[0].links);rn myChart.setOption(option);rnrn报错 TypeError: Cannot set property 'dataIndex' of undefinedrnrn真恶心呀
echarts pie饼图初始化的时候没数据
原因:我们在componentDidMount生命周期里初始化了Pie(echarts的饼图) componentDidMount() { this.showPieChart() } showPieChart = () =&gt; { let myChart = echarts.init(document.getElementById('PieWrap')) let...
Oracle数据移动-不同用户不同表空间之间的数据移动
不同用户不同表空间之间的数据移动: 将nezha用户下的数据移动到zhubajie用户下。 表空间为:poineer_data、PIONEER_INDX 到lianxi 1、查看两个用户的信息及数据: SQL> conn nezha/nezha; Connected to Oracle Database 11g Enterprise Edition Release 11.2.
echarts多次进行SetOption的时候数据遗留问题
最近在使用  &quot;echarts&quot;的时候遇到了一个很是严重的问题,哈哈哈哈 就是通过点击的标题不同后台返回不同的数据,返回的echarts数据中有的为一条折线数据,有的就是三条折线数据,如图  然后在点击标题来回切换的时候就出现了数据残留的问题,本来数据返回的只有一条数据,但是却显示了三条!!! 根据度娘提示,试用了 &quot; myChart.setOption(option,true); ...
JButton 只有当鼠标划过的时候才能显示
小弟初接触Swing,遇到一个奇怪的问题,求大牛解答,下面是写的一点代码:rn public mainFrame() rn setTitle("MyPlayer");rn setSize(WIDETH,HEIGHT);rn doLay();rn mainPanel controlPanel=new mainPanel();rn setLayout(new BorderLayout());rn add(controlPanel,BorderLayout.CENTER);//就是这add 的一个panle,panle里面有3个Buttonrn setVisible(true);rn setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);rn rnrn //下面是我自己定义的一个Panelrn mainPanel()rn rn nextone = new Button(rn "E:\\yangwei's home\\java\\Application\\Application\\player\\img\\fastForward.png");rn nextone.setBounds(new Rectangle(165,55,40,30));rn playerButton=new Button("E:\\yangwei's home\\java\\Application\\Application\\player\\img\\play.png");rn playerButton.setBounds(210,55,40,30);rn previousone = new Button("E:\\yangwei's home\\java\\Application\\Application\\player\\img\\rewind.png");rn previousone.setBounds(255,55,40,30);rn setLayout(null);rn add(previousone,null);rn add(playerButton,null);rn add(nextone,null);rn JSlider VolumeControl=new JSlider();rn VolumeControl.setBounds(275, 55, 40, 30);rn VolumeControl.setPaintLabels(true);rn add(VolumeControl);rn setVisible(true);rn rn rn我运行程序,可以看到界面和我自己设置的背景画布,但是add的panel看不到,只有当把鼠标移动到button的位置,Button才会显示出来。rnrnrn我怀疑是我布局管理器的原因,但是调试半天没发现问题,请各位指教。
如何比较两组数据的相似度?
有很多个int类型的数组(里面有一个数组A),要在这些数组里面找到与A数组最相似的数组。rn最相似的定义是:如果把这些数组都在坐标轴里画图(索引为x,值为y),与数组A的图形最接近的即为最相似的。rn有类似的相关代码可参考吗?
echarts map,echarts地图数据
echarts map地图数据下载,echarts map地图数据下载,echarts map地图数据下载
求两组数据的交集,帮忙!
一个查询模块,查询到了两组数据(或更多组)如下:rnA:rn ibmrn canonrn microsfotrn dellrn sunrnrnB:rn ibmrn sunrn linuxrn hprnrn现在想求出这两组数据的交集,即ibm,sun,然后把它们显示出来rn有什么好的方法呢,速度快一点的,rn我想先把它们插入到数据表中再用sql语句取出交集,但觉得那样比较慢(因为有很多数据,而且要频繁地查询),不知道用数组行不行,rn各位有什么解决方法没有?
交换结构体内部的两组数据
#include #define N 30 typedef struct Mystruct { int a; int b; }MYSTRUCT; void Swap(struct Mystruct *p,struct Mystruct *p1) { // struct Mystruct *pstr=p1; struct Mystruct a; a=*p1;
CUDA 数据分为大小两组
// #include "cuda_runtime.h" #include "device_launch_parameters.h" #include "device_functions.h" #include typedef struct __align__(128) qsortAtomicData_t { volatile unsigned int lt_offset; // C
根据两组数据拟合曲线
1. 方法一:用Excel拟合: 选择需要拟合的两组数据,插入->散点图->右键所得图表->添加趋势线->点击属性,得到如下图: 趋势线选项:可以选择拟合成哪种线形。 点击显示公式选项,即可得到拟合所得曲线的表达式。 注意: 问题一:有些线形可以拟合但是得不出公式。 问题二:有些线性是不可以拟合的。 问题三:因为多项式拟合只能到6次,导致有些数据拟合所得曲线误差较大。
怎样一次输入两组数据
绝对值都不相等。n=0表示输入数据的结束,不做处理。rn样例输入rn3 3 -4 2rn4 0 1 2 -3rn0rnrn样例输出rn-4 3 2rn-3 2 1 0rnrn我的代码:rnpublic static void main(String[] args) rn // TODO Auto-generated method stubrn Scanner rd = new Scanner(System.in);rn int N = 0;rn // 循环才能输入多组数据rn N = rd.nextInt();rnrn int arr[]=new int[N];rn int i,j,temp;rn for(i=0;ii;j--)rn rn if(Math.abs(arr[j])>Math.abs(arr[j-1]))rn rn temp=arr[j-1];rn arr[j-1]=arr[j];rn arr[j]=temp;rn rn rn rn for(i=0;i
一个地址不同地方得到的数据不一样
项目中经常将某些代码通过#ifdef,#else,#end启用和弃用,再通过#define来开启弃用。 首先描述下我的问题,A,B,C类,有个全局指针指向C类,A和B都能访问,原来访问都是正常的,最近调整工程时没注意将B类中的#define包含文件删除了。结果导致A和B两个地方访问C类时数据不一样。最开始的思路指向C类实例的全局指针一样,是不是有内存泄漏了。反反复复调试没发现。 无意间同事提醒
如何是两组数据一一对应
两组数都是是 1 2 3 4 5 需要完成的是rn 数组1里 1 对应 数组2里 12345rn 数组1里 2 对应 数组2里 2345rn 数组1里 3 对应 数组2里 345rn 数组1里 4 对应 数组2里 45rn 数组1里 5 对应 数组2里 5
比较两端数据,返回不同的地方?
[size=24px]如何对以下两段数据a.txt和b.txt进行比较,然后返回不同的地方到数组中?[/size]rnrnrna.txtrn-------------------------------------------------------------------------rnaaasssssssssdddddddssssssssrnsssfkkkksdgfadsomdfvsadfawe12432452323rnrnrnrnb.txtrn-------------------------------------------------------------------------rnaaasssssssssdddddddssssssssssrnsfkkkksdgfadsomdfvssdfdadfawe12432452323sdef
【ECharts】数据量差距大
在echarts图表展示时,会遇到数据量差距过大的情况,出现这种情况后,过小的数据往往会影响交互(比如,点击事件等) option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { ...
请教插入超大数据到数据库的时候会报错
做了一个小东西 测试的时候遇到了一个大麻烦 rn用html编辑器 输入大约是15K样子的数据的时候 rn程序报错 说发生致命错误 停止rn用的存储过程 rn是varchar类型rn设置的大小应该是8000rn有啥好解决的办法没?
将一组数据逆序输出。
#include&amp;lt;stdio.h&amp;gt;int main(){ int i,j,n,a[100],b[100];                                          //n表示这组数据有n个。 scanf(&quot;%d&quot;,&amp;amp;n); for(i=0;i&amp;lt;n;i++) scanf(&quot;%d&quot;,&amp;amp;a[i]);   i=0;   j=n-1;   whil...
求一组数据的全排列
给定一个没有重复数字的序列,返回其所有可能的全排列。 class Solution { public void swap(int nums[],int i,int j){ int tmp = nums[i]; nums[i] = nums[j]; nums[j] = tmp; } public void permutation(...
$.getJSON获取一组数据
从后台传回的json数据为"cpu":[100],"mem":[10]"cpu":[110],"mem":[11]"cpu":[120],"mem":[12]"cpu":[130],"mem":[13]。怎么利用getJSON的方法获得数据,单个"cpu":[100],"mem":[10]这样的数据可以获得,但是一组的却不行。我在百度知道上问过,但是没人回答http://zhidao.baidu.com/question/392661669009639965.html。菜鸟哈,劳烦各位看看
求一组数据的和
如表(data)rnrn姓名(name) 生产数量(number)rn张三 80rn李四 70rn老王 50rnrn怎么求他们的生产总数? 就是200。rnrn谢谢!
一组txt数据
一组测量数据属于txt文件,抽数据
一组有关连的数据
C8N9Fg==0182880rnAD+ROA==0359613rntj/f0g==0838056rnD+F9uA==0500990rnv+bOUQ==0268623rn上面这些数据,可反推出同样的一组数字,不知使用了什么加密码手段?
插入一组数据
我要向表插入一组数据,如4,3,2,5,6,rn插入变成rn表:rnid name wedidrn1 a 4rn2 a 3rn3 a 2rn4 a 5rn5 a 6rnrn怎么处理?除了用循环外,有没有办法一条插入语句就可以处理。