12、echarts 没有显示折线图

一、问题描述

echarts 没有显示折线图，但是，有数据显示：

看图表展示，y轴数据全部没有显示，直接可以判定是数据结构出问题了。

检查 series.data=[] 数据结构：

dataList = [
 {"dateStr":"2024-07-25","quantity":1,"price":23.4},
{"dateStr":"2024-07-28","quantity":2,"price":143.6},
{"dateStr":"2024-08-15","quantity":2,"price":155.2},
{"dateStr":"2024-08-25","quantity":1,"price":23.2,},
{"dateStr":"2024-09-11","quantity":2,"price":233.8},
{"dateStr":"2024-09-13","quantity":2,"price":433.6},
{"dateStr":"2024-09-25","quantity":1,"price":33.6}
    ];

发现，自定义对象中少了 "value" 属性名和值；

在 ECharts 中，如果你在 series 的 data 中没有设置 value，那么折线图将不会显示。value 是必须的，因为它定义了数据点在图表中的位置。

二、解决方案

把数据结构集合，补上 "value" 属性名和值：

dataList = [
{"dateStr":"2024-07-25","quantity":1,"price":23.4,"value":23.4},
{"dateStr":"2024-07-28","quantity":2,"price":143.6,"value":143.6},
{"dateStr":"2024-08-15","quantity":2,"price":155.2,"value":152.4},
{"dateStr":"2024-08-25","quantity":1,"price":23.2,"value":23.2},
{"dateStr":"2024-09-11","quantity":2,"price":233.8,"value":233.8},
{"dateStr":"2024-09-13","quantity":2,"price":433.6,"value":433.6},
{"dateStr":"2024-09-25","quantity":1,"price":33.6,"value":33.6}
];

再次刷新查看图表。折线图显示正常；

官方文档资料参考：

Documentation - Apache ECharts

原文地址：https://blog.csdn.net/yandype/article/details/142639648

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！