12、echarts 没有显示折线图

yandype

已于 2024-09-30 09:45:08 修改

阅读量269

点赞数 6

于 2024-09-29 17:17:51 首次发布

本文链接：https://blog.csdn.net/yandype/article/details/142639648

版权

异常集专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、问题描述

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