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

##### 问题 ：

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

 

 

 

 

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

##### 原因：

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

##### 解决方法：

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

（2） 用echart属性

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


 

 

 

 

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

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


 

 

 

传数据时出现的问题：

问题：

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

这是打印的穿的数据：


 

 

 

原因：这是传的字符串。正常应该是数组！！！才能被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);

}
```

现在前台打印的数据


 

 

颜色都不一样

 

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

 

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