ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

echart图 x轴 y轴 两者数据对应映射的问题

2022-06-29 10:01:23  阅读:279  来源: 互联网

标签:00 echart 映射 series image 两者 new 数据 String


##### 问题 :

使用echart图时,x轴和y轴数据不对应。例如:

 

 

 

 

实际:00:00 对应的y轴数据为0 此刻y轴数据应该是18:00的数据

##### 原因:

x轴和y轴数据没有做映射关系

##### 解决方法:

(1)在后台将 没有数据的 x轴的点 赋值为0 ,然后再传到前端。但比较麻烦,需要对照查看每个点是否有数据

(2) 用echart属性

先将x轴所有的点传到xAxis中的data,固定好x轴数据。就算所有点的y轴都没有数据,x轴点也可以正常显示:

![image-20220629092602680](C:\Users\zy\AppData\Roaming\Typora\typora-user-images\image-20220629092602680.png)

 

 

 

 

然后利用echart的series的属性。`系列`([series](https://www.echartsjs.com/zh/option.html#series))是指:一组数值以及他们映射成的图。

以前都是直接光把y轴的数据放在series的data中进行展示。现在才知道这是一个x轴和y轴数据的映射属性,也就是说后台要直接把 x轴的数据 和 y轴数据 都放在series的data中。然后这个属性会去和xAxis data的数据进行映射,然后对应数据。

![image-20220629093317872](C:\Users\zy\AppData\Roaming\Typora\typora-user-images\image-20220629093317872.png)

 

 

 

传数据时出现的问题:

问题:

将数据传到前台,死活不能展示。

这是打印的穿的数据:

![image-20220629094019954](C:\Users\zy\AppData\Roaming\Typora\typora-user-images\image-20220629094019954.png)

 

 

 

原因:这是传的字符串。正常应该是数组!!!才能被echart识别。

代码 如下:

```java
List<String> xAxisList = new ArrayList<String>();

List<String[]> yAxisList = new ArrayList<String[]>();
//List<String> yAxisList = new ArrayList<String>();
String xAxisData1 = "";
String yAxisData1 = "";
String[] yAxisArray = new String[rcd.length];
for (int i = rcd.length-1; i >0; i--) {
String rcdTime = rcd[i].getString("OPERTIME"); //截取字符串 2022-06-16 00:00:00
String[] ydataStrings = new String[2];

String xTimeString = rcdTime.substring(11,16);


BaseDealData baseDeal = new BaseDealData();
String rcsData = rcd[i].getString("PTDATA");
String ydata = rcsData.substring(0,5);

ydataStrings[0] = xTimeString;
ydataStrings[1] = ydata;

yAxisList.add(ydataStrings);
// ydata = "['"+xTimeString+"',"+ydata+"]";
//yAxisList.add(ydata);

}
```

现在前台打印的数据

![image-20220629094334878](C:\Users\zy\AppData\Roaming\Typora\typora-user-images\image-20220629094334878.png)

 

 

颜色都不一样

 

### 注意往前台传数据的类型!!!

 

标签:00,echart,映射,series,image,两者,new,数据,String
来源: https://www.cnblogs.com/weijie1215/p/16422159.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有