当前位置：首页 > news >正文

12、echarts 没有显示折线图

news 2025/4/28 10:08:01

一、问题描述

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}];

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

文章例子 demo:

<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>History Data Chart</title><script src="js/echarts.min.js"></script>
</head>
<body><!-- echarts --><div id="echartsMain" style="width: 100%;height:450px;"></div><script>var myChart;function showChartData() {//模拟展示数据var chartDataList = [{"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}];var xAxisDataList = [];for(var chartData of chartDataList){xAxisDataList.push(chartData.dateStr);}//设置更新Chart数据myChart.setOption({xAxis: {data: xAxisDataList},series: [{data: chartDataList}]}, false); //只更新数据,参数为 false表示不合并旧选项}(function() { myChart = echarts.init(document.getElementById('echartsMain'));var option =  {title: {text: '历史数据图表'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},formatter: function (params) {let data = params[0];//console.log(data)return `<div>${data.data.dateStr}<br/>价格: ${data.data.price}<br/>售出数量: ${data.data.quantity}</div>`;}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {   },xAxis: {type: 'category',boundaryGap: false,data: []},yAxis: {type: 'value'},series: [{name: '数据',type: 'line',data: [],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]}}]};//初始化配置项myChart.setOption(option); //显示图表数据showChartData();})();</script></body>
</html>

官方文档资料参考：

Documentation - Apache ECharts

查看全文

http://www.mrgr.cn/news/39679.html